Create Transparet Circle using PorterduffXfermode

Question

I'm Trying to Create an application that displays two images "bitmap_1 , bitmap_2" over each other, when the user clicks on the screen (displayed image "bitmap_2"), a transparent circle appears showing the a beneath circle section from bitmap_1.

I spent a lot of time on searching for a solution, i came out with some codes, it worked fine on Samsung S 9001 "S1" But it showed a black circle on other devices

            public TouchView(Context context) {
        super(context);
        setScreenWH();

        setBmImages(imagePosition);

        // overlayDefault =
        // BitmapFactory.decodeResource(getResources(),R.drawable.pre1);
        // overlay =
        // BitmapFactory.decodeResource(getResources(),R.drawable.pre1).copy(Config.ARGB_8888,
        // true);
        c2 = new Canvas(overlay);

        pTouch = new Paint(Paint.ANTI_ALIAS_FLAG);
        pTouch.setXfermode(new PorterDuffXfermode(Mode.SRC_OUT));
        pTouch.setColor(Color.TRANSPARENT);
        pTouch.setMaskFilter(new BlurMaskFilter(18, Blur.NORMAL));

    }

...

          @Override
           public void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        // draw background
        canvas.drawBitmap(bgr, 0, 0, null);
        // copy the default overlay into temporary overlay and punch a hole
        // in it
        c2.drawBitmap(overlayDefault, 0, 0, null);

                 // exclude this line to                                                    
                 // show all as you draw
        c2.drawCircle(X, Y, 80, pTouch);
        // draw the overlay over the background
        canvas.drawBitmap(overlay, 0, 0, null);

    }

Please help me to solve this issue, references to this code : PorterduffXfermode: Clear a section of a bitmap , Android canvas: draw transparent circle on image , Make certain area of bitmap transparent on touch

score 0 · Answer 1 · answered Sep 04 '14 at 19:07

@Elias Sh.

I have solved this.

Try this

     @Override
               public void onDraw(Canvas canvas) {
            super.onDraw(canvas);
            // draw background
            canvas.drawBitmap(bgr, 0, 0, null);
            // copy the default overlay into temporary overlay and punch a hole
            // in it
            c2.drawBitmap(overlayDefault, 0, 0, null);    

            c2.drawCircle(X, Y, 80, pTouch);


    // draw the overlay over the background
    // code for png's with transparency
    /* canvas.drawBitmap(overlay, 0, 0, null); */

    // below code to be used only if images are NOT png's with transparency
    Paint ptouch2 = new Paint(Paint.ANTI_ALIAS_FLAG);
            ptouch2.setXfermode(new PorterDuffXfermode(Mode.SRC_ATOP));
            canvas.drawBitmap(overlay, 0, 0, ptouch2);
}

Create Transparet Circle using PorterduffXfermode

1 Answers1