Search code examples
androidcanvaspathpainterase

Eraser with PorterDuff.Mode.CLEAR always draws a black line, where i want to delete


Can i make it draw the path, where I move my finger to delete with a transparent line, or not draw at all?

This is how i instantiate my eraser:

 OnClickListener eraseListener = new OnClickListener() {

        @Override
        public void onClick(View v) {
            mPaint.setColor(0x00000000);
            mPaint.setXfermode(clear);
            mPaint.setAlpha(0x00);
            myView.setPaint(mPaint);
            LogService.log("PaintActivity", "------in eraseListener");

        }
    };

This sets the paint from my View that contains the canvas. Here i have the following motion events:

private void touch_start(float x, float y) {
    mPath.reset();
    mPath.moveTo(x, y);
    mX = x;
    mY = y;
}
private void touch_move(float x, float y) {
    float dx, dy;
        dx = Math.abs(x - mX);
        dy = Math.abs(y - mY);
    if ((dx >= TOUCH_TOLERANCE) || (dy >= TOUCH_TOLERANCE)) {
        undoPath.quadTo(mX, mY, (x + mX) / 2, (y + mY) / 2);
        mPath.quadTo(mX, mY, (x + mX) / 2, (y + mY) / 2);
            mX = x;
            mY = y;
    }
}
private void touch_up() {
    mPath.lineTo(mX, mY);
    mPath.moveTo(mX, mY);
    canvas.drawPath(mPath, paint);
    mPath.reset();
}
public boolean onTouchEvent(MotionEvent event) {
    float x = event.getX();
    float y = event.getY();
    switch (event.getAction()) {
    case MotionEvent.ACTION_DOWN:
        touch_start(x, y);
        break;
    case MotionEvent.ACTION_MOVE:
        touch_move(x, y);
        invalidate();
        break;
    case MotionEvent.ACTION_UP:
        touch_up();
        invalidate();
        break;
    }
    return true;
}

Now if i want to erase, as i said, when i move my finger, it draw a black line on that path. and when i take my finger off, on touch_up, it erases what is on the back of the black line it drawn. If i comment the invalidate(); line from the touch_move function, then it will not draw that black line, but also, it will only erase on touch_up. Can't i make it erase in real time?


Solution

  • I resolved it like this:

    private void touch_move(float x, float y) {
        float dx = Math.abs(x - mX);
        float dy = Math.abs(y - mY);
        if (dx >= TOUCH_TOLERANCE || dy >= TOUCH_TOLERANCE) {
            mPath.quadTo(mX, mY, (x + mX) / 2, (y + mY) / 2);
    
            mPath.lineTo(mX, mY);
            // commit the path to our offscreen
            mCanvas.drawPath(mPath, mPaint);
            mPath.reset();
            mPath.moveTo(mX, mY);
    
            mX = x;
            mY = y;
        }
    }
    

    Here I added a line to the path, drew the path, reset the path and used moveTo in the touch_move method.

    On touch_up I only use mPath.reset().

    private void touch_up() {
    
        // kill this so we don't double draw
         mPath.reset();
    
    }
    

    This make my eraser transparent — no black line draw on erasing.