I am trying to create a Black screen with a transparent Hole in the middle of the screen. Here is what i have tried.
#Override
public void draw(Canvas canvas)
{
Paint myPaint = new Paint();
myPaint.setColor(0xC0000000);
canvas.drawRect(mBlackRect, myPaint);
myPaint = new Paint();
myPaint.setColor(Color.TRANSPARENT);
myPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));
canvas.drawRect(mTransparentRect, myPaint);
}
The second paint, shows black color instead of transparent. How can i punch a transparent hole in MY SemiBlack Canvas?
you didn't save the canvas, try the code below
Paint myPaint = new Paint();
int sc = canvas.saveLayer(mBlackRect.left, mBlackRect.top,
mBlackRect.right, mBlackRect.bottom, myPaint,
Canvas.ALL_SAVE_FLAG);
myPaint.setColor(0xC0000000);
canvas.drawRect(mBlackRect, myPaint);
myPaint.setColor(Color.TRANSPARENT);
myPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));
canvas.drawRect(mTransparentRect, myPaint);
myPaint.setXfermode(null);
canvas.restoreToCount(sc);
You can not really "punch" a hole by "removing pixels" from something already drawn, at least not with a hardware layer. And if you use a software layer, it will be bad for performance.
What you want to do is draw your shape with an alpha mask applied to your paint. A mask will prevent some parts of the shape to be drawn on the canvas, like cutting a piece of paper and stick it on a wall before spreading the painting.
To apply an alpha mask to your paint, you first need to create a bitmap containing the "hole" shape (programmatically or by loading a custom image from resources), then create a BitmapShader from this bitmap with the proper Xfermode (depending if you want the transparent part in your mask bitmap to be cut out or the non-transparent part) and finally apply this shader to your paint before drawing the semitransparent rectangle or anything you want.
Be careful with performance: only create the Paint object once (do not allocate any object in onDraw() because this method gets called up to 60 times per second on the UI thread), and recreate the alpha mask bitmap only when the bounds of your View/Drawable change (if its dimensions depend on the View dimensions of course, otherwise you just create it once).
I'm sorry if I don't have time to give you ready-to-use code but I think you should find plenty of information about the technique I just described and you can start experimenting and figuring out the solution by yourself which is more rewarding I think ;)
Related
Imagine that I have a rectangle image. How could I create a style like the next one?
I mean, cropping the image into a circle, add the border, the shadow and the gross /shine effect. Until now, I only have tried this snippet code to crop the image: Cropping circular area from bitmap in Android but just that. I have no idea how to do the remaining components in Android.
An easy way to achieve this effect is to use Canvas.drawCircle() and a BitmapShader:
BitmapShader s = new BitmapShader(myPhoto, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
Paint p = new Paint();
p.setShader(s);
myCanvas.drawCircle(centerX, centerY, radius, p);
To do the shadow, simply call Paint.setShadowLayer() on the paint (this will only work if you draw the effect into an offscreen Bitmap or if your View uses a software layer – set by calling View.setLayerType() –).
The border can be drawn by drawing another circle on top, using the Paint.Style.STROKE style (that you can set by calling Paint.setStyle()).
Finally you can draw the gloss by drawing a circle, oval or Path on top of your very first circle. You'll need to use a LinearGradient shader on your paint and you'll also need to clip the gloss. You can do this in two ways:
If you are drawing the entire effect into a Bitmap, which is what I would recommend, simply set the paint's Xfermode to a new PorterDuffXfermode(PorterDuff.Mode.SRC_IN).
If you are drawing the effect directly on screen you can simply use Canvas.clipPath() to set a circular clip. Note that this will work with hardware acceleration only as of Android 4.3.
Is it possible to realize the following picture in Android with canvas?
I want to have a hole and not only a Circle over the red layer which is yellow colored. I tried this (and failed) with the following Code in my onDraw()-Method:
canvas.drawBitmap(yellow, 0, 0, paint);
canvas.drawBitmap(red, 0, 200, paint);
Paint p = new Paint();
p.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));
canvas.drawCircle(300, 300, radius, p);
But when I use this code, it makes a hole through both bitmap's. At the end, this App should be a Maze with a ball, holes and other stuff. When the ball would fall into a hole it should appear under the red-Bitmap. Is it possible to realize this?
Answer:
If someone should have the same problem: use View and not SurfaceView. That was my fault, because the bg of a SurfaceView could not be set transparent.
I think you're misunderstanding how the canvas/bitmaps work. There aren't layers or objects stored (unless you store them). It's just a pixel by pixel representation of the image displayed. A yellow circle over a red square is what you have shown in the above picture.
If you truly want a red layer, you have to composite two bitmaps. Draw the hole over the red square in one bitmap, draw the yellow layer in one bitmap. On the canvas, draw the yellow bitmap, then the "red square with a hole" bitmap on top.
I have a bitmap that spans the whole screen that will function as texture for a Path object that I need to draw to my canvas. I then have a background image that this textured path needs to be drawn on top of.
I tried using the PorterDuff modes, but nothing seemed to work correctly. I was having a hard time figuring out exactly how the PorterDuff modes act, because none of them seem to act the way I always thought they were supposed to function.
I've figured out a way to texture the path with this test code:
Paint paint = new Paint();
//draw the texture
canvas.drawBitmap(BitmapFactory.decodeResource(getResources(), R.drawable.texture),0,0,paint);
//construct the Path with an inverse even-odd fill
Path p = new Path();
p.setFillType(Path.FillType.INVERSE_EVEN_ODD);
p.addCircle(this.getHeight()/2, this.getWidth()/2, 200, Path.Direction.CCW);
//use CLEAR to remove inverted fill, thus showing only the originally filled section
paint.setXfermode(new PorterDuffXfermode(android.graphics.PorterDuff.Mode.CLEAR));
//draw path
canvas.drawPath(p, paint);
But I can't figure out how to then place that on top of a background image. Am I just using the PorterDuff modes wrong?
Maybe my questions could lead you to your solution:
The paint used in your drawPath call:
What is the paint style?
What is the paint stroke width?
What is the paint stroke/fill color?
If you are not using a stoke/fill color, but a texture instead, where is the call to the paint's setShader (using a BitmapShader)?
How do I draw a Rect that basically creates a hole in the canvas? For example, say I have an image editing application that's made for Pixel art. The user touches an area of the screen, and draws a purple rectangle. Oops, he put the rectangle in the wrong spot. The user needs to make this purple square turn transparent again so that he can re-draw it in the right position.
How do I do this? I've used PorterDuff.Mode.Clear, myPaintColor.setColor(Color.TRANSPARENT) etc. but all give the same result. An ugly black square where it should be transparent. My canvas starts out as transparent, and can be saved via getDrawingCache to a transparent .PNG, so I know the canvas starts off as transparent. But how do I help my user who drew the purple square to make his canvas transparent again? Thanks. I've been trying to figure this out all day, reading all the documentation on this, but I can't figure it out.
Here's what I have:
Rect square = new Rect();
Paint drawColor = new Paint();
//drawColor.setColor(UserColor.get(i));
drawColor.setXfermode(new PorterDuffXfermode(Mode.CLEAR));
square.set(CanvasFractionWidth * UserX.get(i), CanvasFractionHeight * UserY.get(i), (CanvasFractionWidth * UserX.get(i)) + (CanvasFractionWidth), (CanvasFractionHeight * UserY.get(i)) + CanvasFractionHeight);
canvas.drawRect(square, drawColor);
In RoboDemo, I use this :
Paint p = new Paint();
p.setXfermode( new PorterDuffXfermode( Mode.CLEAR ) );
I have a question about drawBitmap.
android.graphics.Canvas.drawBitmap(Bitmap bitmap, float left, float top, Paint paint)
What does that Paint paint? For example I have a picture.jpg and I make
Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.picture);
paint = new Paint();
paint.setColor(Color.BLUE);
canvas.drawBitmap(bitmap, 0, 0, paint);
What can I do with that "paint" when I have a real picture not some canvas.drawCircle. Is there any way I can change pictures color or something like that?
Yes and another question. For example I draw circle in mspaint in 80x80 size and my background stays plain white. When I use that drawing in my program it shows circle + that white background. Is there any way that there will be displayed only circle without background. Maybe somebody can suggest some program in which I can make that happen or which code should I use in my program? (circle is just example, there can be anything)
Yes and excuse to use circle's background same as program's background is not appropriate, because my program's background isn't white or black or any other color, it is picture.
Paint objects can affect the rendering of the Bitmap. For example, they be used to mask the drawing of the Bitmap.
Save your circle as a PNG or GIF, and set the background as transparent (I do not know if MS Paint can do this).
i suggest gimp for image editing with transparency.
start a new image, delete the default layer, add a transparent layer, then paste your image over that. you can use the fuzzy select tool to trim any white space, then save as .png and you have a transparent image!