Question

I loaded the first bitmap (image1) on the canvas i.e. sized 320 X
312. The second bitmap (image2) is 41 X 41 loaded at x,y – 235, 147.
Overlapped on top of the image1. Now when I do a draw line from x,y –
174, 254 to x,y – 249, 177 in the touch event. The lineTo destination
249, 177 is “underneath” the image2 drawn at 235,147 thus the last 14
or so pixels of the drawn line is hidden under image2. I hope I
explained this clearly. How do I get the full line length to show?

    public GameView(Context context) {
            super(context);
            setFocusable(true);

            bMap = BitmapFactory.decodeResource(getResources(),
                R.drawable.image1);
            bMapMutable = bMap.copy(Bitmap.Config.ARGB_8888, true);
            mCanvas = new Canvas();

            mPath = new Path();

            bMap2 = BitmapFactory.decodeResource(getResources(),
                R.drawable.image2);
            bMapMutable2 = bMap2.copy(Bitmap.Config.ARGB_8888, true);

    }

    @Override
    protected void onDraw(Canvas canvas) {
            canvas.drawBitmap(bMapMutable, 0, 0, null);

            float left = (float) ((scale == 1) ? 235 : 235 * 1.5);
            float top = (float) ((scale == 1) ? 147 : 147 * 1.5);

            canvas.drawBitmap(bMapMutable2, left, top, null);

            canvas.drawPath(mPath, mPaint);

    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        float x = event.getX();
        float y = event.getY();

        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                    if (touchCount <= 2)
                    {
                        touchCount += 1;
                        touch_start(x, y);
                        invalidate();

                    }

                    if (touchCount == 2)
                    {
                            if (scale == 1.0)
                            {
                                mPath.moveTo(174,254);
                            }
                            else
                            {
                                mPath.moveTo(261,381);
                            }

                            if (scale == 1.0)
                                    mPath.lineTo(249, 177);
                            else
                                    mPath.lineTo(374, 266);

                            mCanvas.drawPath(mPath, mPaint);
                            mPath.reset();
                            touchCount = 0;
                    }

                break;
            case MotionEvent.ACTION_MOVE:
                break;
            case MotionEvent.ACTION_UP:
                break;
        }
        return true;
    }

    private void touch_start(float x, float y) {
        mPath.reset();
        mPath.moveTo(x, y);

        if (touchCount == 1)
        {
                mX = x;
                mY = y;
        }
        else
        {
            mX2 = x;
                mY2 = y;
        }
    } 

Answer 1

Instead of drawing the path in your onTouchEvent method, let the onDraw method do it and keep the contents of mPath as your line’s path then call invalidate() to make it redraw with new information. Every time onDraw is called on its own, the path will then be drawn last (as you have it).

To clarify, instead of doing this:

mCanvas.drawPath(mPath, mPaint);
mPath.reset();

Do:

invalidate();

Your onDraw method is already correctly going to draw them in the correct order.

To later remove the line, do:

mPath.reset();
invalidate();

And the onDraw will redraw without the line.