Is there a way to draw a circular gradient mask on a bitmap in Android? Trying to produce something similar to a foggy window. Click the window and a transparent circle shows up revealing whats behind the window. Prefferably using a gradient so the center of the circle is completely transparent and the further out from the center the less transparent. Is this possible?
I'm new to Android so any code samples would be appreciated.
Thanks.
private void drawFoggyWindowWithTransparentCircle(Canvas canvas,
float circleX, float circleY, float radius) {
// Get the "foggy window" bitmap
BitmapDrawable foggyWindow =
(BitmapDrawable) getResources().getDrawable(R.drawable.foggy_window);
Bitmap foggyWindowBmp = foggyWindow.getBitmap();
// Create a temporary bitmap
Bitmap tempBitmap = Bitmap.createBitmap(
foggyWindowBmp.getWidth(),
foggyWindowBmp.getHeight(),
Bitmap.Config.ARGB_8888);
Canvas tempCanvas = new Canvas(tempBitmap);
// Copy foggyWindowBmp into tempBitmap
tempCanvas.drawBitmap(foggyWindowBmp, 0, 0, null);
// Create a radial gradient
RadialGradient gradient = new android.graphics.RadialGradient(
circleX, circleY,
radius, 0xFF000000, 0x00000000,
android.graphics.Shader.TileMode.CLAMP);
// Draw transparent circle into tempBitmap
Paint p = new Paint();
p.setShader(gradient);
p.setColor(0xFF000000);
p.setXfermode(new PorterDuffXfermode(Mode.DST_OUT));
tempCanvas.drawCircle(circleX, circleY, radius, p);
// Draw tempBitmap onto the screen (over what's already there)
canvas.drawBitmap(tempBitmap, 0, 0, null);
}
Related
I an creating an android application in which i am going to crop a bitmap image using path in canvas.
I am able to cut the bitmap using path but it leaves black background on the remaining portion of the bitmap.
Below is my code to cut a bitmap with path and mask in canvas.
public Bitmap cropBitmap(Path path){
Bitmap maskImage = Bitmap.createBitmap(bitmap.getWidth(), bitmap.getHeight(), Bitmap.Config.ARGB_8888);
Canvas maskCanvas = new Canvas(maskImage);
maskCanvas.drawColor(0, PorterDuff.Mode.CLEAR);
Paint pathPaint = new Paint();
pathPaint.setAntiAlias(true);
pathPaint.setXfermode(null);
pathPaint.setStyle(Style.FILL);
pathPaint.setColor(Color.WHITE);
maskCanvas.drawPath(path,pathPaint);
Bitmap resultImg = Bitmap.createBitmap(bitmap.getWidth(), bitmap.getHeight(), Bitmap.Config.ARGB_8888);
Canvas mCanvas = new Canvas(resultImg);
Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
mCanvas.drawBitmap(bitmap, 0, 0, null);
paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN));
mCanvas.drawBitmap(maskImage, 0, 0, paint);
return resultImg;
}
and below is the input image with path.
and below is the result which i am getting right now.
I want to remove that black background portion.
that black portion should be transparent.
Is there any way i can remove that black portion and make it transparent?
So I have the following image to be used as a mask:
Now I want to apply this mask to images so that the image will fill the inner white space but will not fill the borders, keeping it as it is. However, when I use the code below, the image takes the inner white space plus the border.
public static Bitmap applyMask(Bitmap scaledBitmap, Bitmap mask) {
Bitmap result = Bitmap.createBitmap(mask.getWidth(), mask.getHeight(), Bitmap.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(scaledBitmap, 0, 0, null);
mCanvas.drawBitmap(mask, 0, 0, paint);
paint.setXfermode(null);
return result;
}
So is there any way to make the image fill only the white space? How can I keep the mask borders intact?
Thanks in advance.
I had to download your image to see the transparent areas. They are on the outside of your shape (which is why DST_IN is the mode that works for this).
What the DST_IN mode does is erases any pixels already on the canvas where the pixels in the mask are transparent. So whether it's the dark border or the white inside, those pixels all have alpha > 0, so they mask the canvas just the same. Those pixels outside the shape have alpha == 0, so they erase the canvas pixels.
Since the final bitmap is the size of your mask, as I see it you have two options:
OPTION 1: If you can put the background color in the mask image:
Change your mask image so that the transparent pixels are inside the shape, and the pixels outside the shape are your background color. Then use SRC_OVER as your xfer mode. The background color outside the border, plus the black border will overwrite the existing pixels in this mode, and since the inner pixels are transparent, the middle part of the image will come through the way you want.
OPTION 2: If you have to specify the background color in the app so you can't put it in the mask image:
For this you'll need two mask images, the one you have and a copy with the inside pixels transparent as well, so you are left with the border. Draw with your mask image the way you are doing right now using DST_IN, then draw the image with just the border using SRC_OVER to draw the border on top of your masked image.
Here you have an example of what you want and you can adapt it to your case:
public static Bitmap getRoundedCornerBitmap(Bitmap bitmap) {
Bitmap output = Bitmap.createBitmap(bitmap.getWidth(),
bitmap.getHeight(), Config.ARGB_8888);
Canvas canvas = new Canvas(output);
final int color = 0xff424242;
final Paint paint = new Paint();
final Rect rect = new Rect(0, 0, bitmap.getWidth(), bitmap.getHeight());
final RectF rectF = new RectF(rect);
final float roundPx = 12;
paint.setAntiAlias(true);
canvas.drawARGB(0, 0, 0, 0);
paint.setColor(color);
canvas.drawRoundRect(rectF, roundPx, roundPx, paint);
paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));
canvas.drawBitmap(bitmap, rect, rect, paint);
return output;
}
I've found it here. Hope it helps! :)
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
I cannot provide you code but here is what you should do:
Get background image as bitmap and draw it on view's canvas.
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);
Now draw bmp on view's canvas. So, that you can get mask effect on image.
Zoom (re-size etc whatever you want) background bitmap image.
Invalidate your view, and follow all steps again
I am trying to programmatically create a gray Rect and black Rect with BlurMaskFilter layer (drop shadow effect) by overriding onDraw in a custom View. I am able to get it to draw on screen without any issues, but when I try to draw the view to a bitmap the results are different. In drawing to bitmap, it appears BlueMaskFilter is applied to the View rather than the specific layer of the black Rect.
What am I missing to make the drawn bitmap same as the output drawn on screen?
CustomView's onDraw override:
#Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
// draw black box (shadow) first
RectF rectShadow = new RectF();
rectShadow.set(10, 10, 120, 120);
Paint shadowPaint = new Paint();
shadowPaint.setMaskFilter(new BlurMaskFilter(5, Blur.NORMAL));
shadowPaint.setStyle(Paint.Style.FILL);
shadowPaint.setColor(Color.DKGRAY);
shadowPaint.setAntiAlias(true);
canvas.drawRect(rectShadow, shadowPaint);
setLayerType(View.LAYER_TYPE_SOFTWARE, shadowPaint);
// draw grey box
RectF rectGray = new RectF();
rectGray.set(0, 0, 100, 100);
Paint paint = new Paint();
paint.setStyle(Paint.Style.FILL);
paint.setColor(Color.parseColor("#656565"));
paint.setAntiAlias(true);
canvas.drawRoundRect(rectGray, paint);
}
Function to save view to bitmap:
public void saveViewToBitmap( View customView int outWidth, int outHeight ) {
customView.setLayoutParams(new ViewGroup.LayoutParams(outWidth, outHeight));
customView.measure(
ViewGroup.MeasureSpec.makeMeasureSpec(customView.getLayoutParams().width,
ViewGroup.MeasureSpec.EXACTLY),
ViewGroup.MeasureSpec.makeMeasureSpec(customView.getLayoutParams().height,
ViewGroup.MeasureSpec.EXACTLY));
customView.layout(0, 0,
customView.getMeasuredWidth(), customView.getMeasuredHeight());
customView.requestLayout();
Bitmap outputBitmap = Bitmap.createBitmap(outWidth, outHeight, Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(outputBitmap);
customView.draw(canvas);
return outputBitmap;
}
Note in the following images the screen image has crisp edges for the gray rect, whereas the drawn bitmap has the top and left edges of the gray rect blurred demonstrating the problem.
Image on screen:http://i.stack.imgur.com/0Hl0t.png
Image saved from bitmap created by saveViewToBitmap: http://i.stack.imgur.com/xNzi5.png
Thanks!
background
i have a master bitmap that i need to draw on it other bitmaps.
the master bitmap has some semi-transparent pixels (pixels with variant values for the alpha channel) , so that the other bitmaps that are drawn on it should be merged with it instead of overriding the colors completely.
the question
how can i set the canvas to draw the bitmaps on the master bitmap with respect to the semi-transparent pixels ?
note: the alpha is not for the whole bitmap/s . it's per pixel.
Canvas.setXfermode(Xfermode xfermode). There are a number of Xfermodes you can choose.
public void putOver(Bitmap master, Bitmap alphaBitmap){
Canvas canvas = new Canvas(matter);
Paint paint = new Paint();
paint.setXferMode(new PorterDuffXfermode(PorterDuff.Mode.DST_OVER));
canvas.drawBitmap(left, top, left+alphaBitmap.width, left+alphaBitmap.height, paint);
}
public Bitmap PutoverChange(Bitmap all, Bitmap scaledBorder) {
Paint paint = new Paint();
final int width = change.getWidth();
final int height = change.getHeight();
patt = Bitmap.createScaledBitmap(change, width, height, true);
Bitmap mutableBitmap = patt.copy(Bitmap.Config.ARGB_8888, true);
Canvas canvas = new Canvas(mutableBitmap);
scaledBorder = Bitmap.createScaledBitmap(border, width, height, true);
paint.setAlpha(100);
canvas.drawBitmap(scaledBorder, 0, 0, paint);
return mutableBitmap;
}
here the transparency is 100. you can modify it to 50 so it becomes semi transparent.