PorterDuffXfermode drawing black line with CLEAR mode

Question

I have an imageView with background and foreground image. When I try to erase by foreground using Path and Paint with Clear setting, instead of deleting the foreground path its drawing black lines. Can someone help me please?

Here is my code snippet

    public class ShowBackgrounOnDrawImage extends ImageView {

  private static final float MINP = 0.25f;
  private static final float MAXP = 0.75f;

  private Bitmap mBitmap, blur = null;
  private Canvas mCanvas;
  private Path mPath;
  private Paint mBitmapPaint;
  public boolean imageLoaded = false;
  private Canvas imageCanvas = null;
  Context here;
  Long width = null, height = null;
  private Paint mPaint;

  public BlurOnDrawImage(Context c) {
    super(c);
    initialize();
  }

  public BlurOnDrawImage(Context context, AttributeSet attrs)
  {
    super(context, attrs);
    initialize();
  }

  public BlurOnDrawImage(Context context, AttributeSet attrs, int defStyle)
  {
    super(context, attrs, defStyle);
    initialize();
  }

  private void initialize() {
    mPath = new Path();
    mPaint = new Paint();
    mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));
    mPaint.setColor(Color.TRANSPARENT);
    mPaint.setStyle(Paint.Style.STROKE);
    mPaint.setStrokeJoin(Paint.Join.ROUND);
    mPaint.setStrokeWidth(10f);
    mPaint.setAntiAlias(true);

    mBitmapPaint = new Paint(Paint.DITHER_FLAG);
    mBitmapPaint.setStrokeWidth(80f);
  }

  public void setBitmap(Bitmap bitmap) {
    mBitmap = bitmap;
    mCanvas = new Canvas(bitmap);
  }

  @Override
  protected void onSizeChanged(int w, int h, int oldw, int oldh) {
    super.onSizeChanged(w, h, oldw, oldh);
    //mBitmap = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888);
    // mCanvas = new Canvas(mBitmap);
  }

  @Override
  protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    if (imageLoaded) {
      canvas.drawBitmap(mBitmap, 0, 0, mBitmapPaint);
      canvas.drawPath(mPath, mPaint);
      //canvas.drawPath(circlePath, circlePaint);
    } else {
      //imageCanvas = canvas;
    }
  }

  private float mX, mY;
  private static final float TOUCH_TOLERANCE = 4;

  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 = 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);
      mX = x;
      mY = y;
    }
    //circlePath.reset();
    //circlePath.addCircle(mX, mY, 30, Path.Direction.CW);
  }

  private void touch_up() {
    mPath.lineTo(mX, mY);
    // commit the path to our offscreen
    mCanvas.drawPath(mPath, mPaint);
    // kill this so we don't double draw
    //circlePath.reset();
    mPath.reset();
  }

  @Override
  public boolean onTouchEvent(MotionEvent event) {
    if (!imageLoaded) {
      return super.onTouchEvent(event);
    }
    float x = event.getX();
    float y = event.getY();

    switch (event.getAction()) {
      case MotionEvent.ACTION_DOWN:
        touch_start(x, y);
        invalidate();
        break;
      case MotionEvent.ACTION_MOVE:
        touch_move(x, y);
        invalidate();
        break;
      case MotionEvent.ACTION_UP:
        touch_up();
        invalidate();
        break;
    }
    return true;
  }
}

Thanks

score 0 · Answer 1 · answered Jun 11 '14 at 14:52

I faced the same issue. I saw somewhere that this is the problem with hardware acceleration on some devices, so as workaround to this issue is suggested to disable hardware acceleration before corresponded draw method, so in your case this should be something like that:

    if (imageLoaded) {
      canvas.drawBitmap(mBitmap, 0, 0, mBitmapPaint);
      setLayerType(LAYER_TYPE_SOFTWARE, null);
      canvas.drawPath(mPath, mPaint);
    } else {
      //imageCanvas = canvas;
    }

And this works for me for Mode.CLEAR. But not for some other types like DST_IN, for example. And I don't find exact solution for this problem.

There is idea of using bitmap shaders like in this library
https://github.com/lopspower/CircularImageView
May be this will work, but I don't test it

PorterDuffXfermode drawing black line with CLEAR mode

1 Answers1