具有旋转和缩放功能的Android图像蒙版

Question

How to mask image such as we can scale/zoom/rotate the background image but not the mask?

I should be able to zoom the image in this mask but it is scaling whole image.

Suggest me a way to achieve this, I'm creating a photo collage app.

Blue color is background of Layout.

The white color is for mask

I'm able to achieve this type of layout with masking, but when I apply MultiTouchListener to scale and zoom, it will scale the whole image with mask and not the image inside it.

private void getMaskedBitmap() {

    Bitmap bgBitmap =  BitmapFactory.decodeResource(getResources(), R.drawable.background_drawable);
    ImageView bg = (ImageView) findViewById(R.id.bg);
    bg.setImageBitmap(bgBitmap);

    Bitmap.Config conf = Bitmap.Config.ARGB_8888; 
    Bitmap emptyBitmap = Bitmap.createBitmap(bgBitmap.getWidth(), bgBitmap.getHeight(), conf);
    Canvas canvasBmp = new Canvas(bgBitmap);


    ImageView mImageView = (ImageView) findViewById(R.id.troll_face);

    Bitmap original = BitmapFactory.decodeResource(getResources(), R.drawable.random_drawable);

    Bitmap mask = BitmapFactory.decodeResource(getResources(), R.drawable.mask_drawable);

    original = Bitmap.createScaledBitmap(original, mask.getWidth(), mask.getHeight(), true);

    Bitmap result = Bitmap.createBitmap(mask.getWidth(), mask.getHeight(), Config.ARGB_8888);

    Canvas mCanvas = new Canvas(result);
    Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
    paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN));
    mCanvas.drawBitmap(original, 0, 0, null);
    mCanvas.drawBitmap(mask, 0, 0, paint);
    paint.setXfermode(null);

    mImageView.setImageBitmap(result);
    //mImageView.setScaleType(ScaleType.FIT_XY);
    mImageView.setBackgroundResource(R.drawable.background_drawable);

    bg.setOnTouchListener(new MultiTouchListener());

    mImageView.invalidate();


}

Exception on line

Canvas canvasBmp = new Canvas(bgBitmap);

java.lang.IllegalStateException: Immutable bitmap passed to Canvas constructor

Answer 1

I cannot provide you code but here is what you should do:

1. Get background image as bitmap and draw it on view's canvas.

2. Create an new (empty) bitmap of same size (use Bitmap.Config.ARGB_8888) and get its canvas, here you will draw mask.

   Canvas canvasBmp = new Canvas(bmp);

3. Now draw bmp on view's canvas. So, that you can get mask effect on image.

4. Zoom (re-size etc whatever you want) background bitmap image.

5. Invalidate your view, and follow all steps again