I would like to draw something like this:
So on each photo I would like to put a circular sector (cut arc) with black area. How can I achieve that with using e.g.
canvas.draw(Path path, Paint paint);
I tried below but it didn t work out as I would like to:
Path path = new Path();
path.setFillType(Path.FillType.EVEN_ODD);
path.addCircle(getWidth() / 2, getHeight() / 2, getHeight() / 2, Path.Direction.CW);
path.addRect(0, getHeight() - 70, getWidth(), getHeight(), Path.Direction.CW);
You almost had it working. You just need to clip the canvas before drawing and use Path.FillType.INVERSE_EVEN_ODD to draw your sector:
// Limit the drawable region of the canvas (saving the state before)
canvas.save();
canvas.clipRect(new Rect(0, canvas.getHeight() - 70, canvas.getWidth(), canvas.getHeight()));
Path path = new Path();
path.setFillType(Path.FillType.INVERSE_EVEN_ODD);
path.addCircle(canvas.getWidth() / 2, canvas.getHeight() / 2, canvas.getHeight() / 2, Path.Direction.CW);
path.addRect(0, canvas.getHeight() - 70, canvas.getWidth(), canvas.getHeight(), Path.Direction.CW);
canvas.drawPath(path, paint);
// Restore the canvas to the saved state to remove clip
canvas.restore();
// Draw more things on the canvas...
Alternativelly, you can use Canvas.drawArc (documentation)
I assume from you question that you need to assign a fix height for your sector, so you will need to compute startAngle and sweepAngle (parameters of the drawArc method) based on that height (assuming a square image). Here is the sample code (API level 15 compatible):
int sectorHeigh = 70; // The height of your sector in pixels
// Compute the start angle based on your desired sector height
float startAngle = (float) Math.toDegrees(Math.asin((canvas.getHeight() / 2f - sectorHeigh) / (canvas.getHeight() / 2f)));
// Add the arc (calculating the sweepAngle based on startAngle)
canvas.drawArc(new RectF(0, 0, canvas.getWidth(), canvas.getHeight()), startAngle, 2 * (90 - startAngle), false, paint);
Another way to draw your sector using arcs is creating a Path object, add an arc using Path.addArc (documentation) and then use Canvas.drawPath (documentation) to draw it.
Related
I'm trying to use the PorterDuff library to trim a canvas circle and rectangle to form a quarter of a square in my custom view for my app, I managed to get it to work but not fully because it trims the square out but keeps the rest of the circle in, I'm using the SRC_IN mode which seems like the right mode to use from looking at the android documentation for it but it's not working as expected, this is a snippet of the onDraw method in my custom view class:
#Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
int height = getHeight();
int width = getWidth();
canvas.drawCircle(width / 2, height / 2, (width + height) / 10, paint);
paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
Rect rectangle = new Rect(0, 0, width / 2, height / 2);
paint.setColor(Color.RED);
canvas.drawRect(rectangle, paint);
}
I'm drawing the circle in the center of the screen and then drawing the square in the top left of the screen and the PorterDuff mode should basically get the intersected part between the shapes but it just trims non-intersected square part out but doesn't do the same for the circle.
This is what it looks like:
I can't tell what i'm doing wrong here, hopefully someone can point it out.
the issue is with the source, the rectangle is the source in this context, draw the rectangle first then use PorterDuff.Mode.SRC_IN to cut the circle based on it.
#Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
int height = getHeight();
int width = getWidth();
Rect rectangle = new Rect(0, 0, width / 2, height / 2);
paint.setColor(Color.RED);
canvas.drawRect(rectangle, paint);
paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
canvas.drawCircle(width / 2, height / 2, (width + height) / 10, paint);
}
The feature of a bitmap image is that it has a transparent background and usually has a rectangular shape, so when we try to add a border to the image, instead of its content inside there will be a border, its background will have a border. For example, I have a bitmap image of a dog and I want it to have a border but instead, a rectangular background will have a border. I'm using Canvas to draw a bitmap and am having this problem. Can anyone help me?
Block code to create photo
mPaint.setStyle(Paint.Style.STROKE);
mPaint.setStrokeWidth(10); // set stroke width
mPaint.setColor(getResources().getColor(R.color.black)); // set stroke color
mPaint.setAntiAlias(true);
bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.icons8_bus_36_2);
tempBitmap = Bitmap.createBitmap(bitmap.getWidth(), bitmap.getHeight(), Bitmap.Config.ARGB_8888);
Canvas tempCanvas = new Canvas(tempBitmap);
Rect rect = new Rect(
10 / 2,
10 / 2,
tempCanvas.getWidth() - 10 / 2,
tempCanvas.getHeight() - 10 / 2);
tempCanvas.drawRect(rect,mPaint);
tempCanvas.drawBitmap(bitmap, 0, 0, mPaint);
On this part:
Rect rect = new Rect(
10 / 2,
10 / 2,
tempCanvas.getWidth() - 10 / 2,
tempCanvas.getHeight() - 10 / 2);
change to
Rect rect = new Rect(
10 / 2,
10 / 2,
(tempCanvas.getWidth() - 10) / 2,
(tempCanvas.getHeight() - 10) / 2);
Thats because 10 is divided by two first
Also, draw bitmap first before you draw rect
OR
you could draw with this:
Path clipPath = new Path();
RectF rect = new RectF(0, 0, this.getWidth(), this.getHeight());
clipPath.addRoundRect(rect, radius, radius, Path.Direction.CW);
canvas.clipPath(clipPath);
Pulling my hear out over this one. I have a background bitmap that I want to overlay another bitmap on top of that has transparent cutouts. I have no problem doing that if the cutout is a basic shape, but I need the cutout to be the intersection of two circles (sort of a leaf shape). I tried making a third bitmap to produce the a cutout template but I can't even get a clean representation of the cutout let alone get it to work as a cutout template.
Anyone know how to do something like this? Here is my (simplified) attempt:
#Override
public void draw(Canvas canvas) {
float w = canvas.getWidth();
float h = canvas.getHeight();
// just used to set some proportions
float off = 300f;
Paint paint = new Paint();
// make a background bitmap with a yellow to green gradient
Bitmap bitmapBkg = Bitmap.createBitmap((int) w, (int) h, Bitmap.Config.ARGB_8888);
Canvas canvasBkg = new Canvas(bitmapBkg);
paint.reset();
paint.setShader(new LinearGradient(0, h/2 - off, 0, h/2 + off, Color.YELLOW, Color.GREEN, Shader.TileMode.CLAMP));
canvasBkg.drawRect(new RectF(0, 0, w, h), paint);
// make an overlay bitmap with a red to magenta gradient which will have the cutouts
Bitmap bitmapOver = Bitmap.createBitmap((int) w, (int) h, Bitmap.Config.ARGB_8888);
Canvas canvasOver = new Canvas(bitmapOver);
paint.reset();
paint.setShader(new LinearGradient(0, h/2 - off, 0, h/2 + off, Color.RED, Color.MAGENTA, Shader.TileMode.CLAMP));
canvasOver.drawRect(new RectF(0, 0, w, h), paint);
// make a bitmap of intersecting circles to be used as the cutout shape
Bitmap bitmapCut = Bitmap.createBitmap((int) w, (int) h, Bitmap.Config.ARGB_8888);
Canvas canvasCut = new Canvas(bitmapCut);
paint.reset();
paint.setColor(Color.BLACK);
//paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.XOR));
canvasCut.drawCircle(w / 2 - (off / 2 ), h / 2, off, paint);
paint.reset();
paint.setColor(Color.BLACK);
paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.XOR));
canvasCut.drawCircle(w / 2 + (off / 2), h / 2, off, paint);
// apply cutout to overlay
paint.reset();
paint.setColor(Color.BLACK);
paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_ATOP));
canvasOver.drawBitmap(bitmapCut, 0, 0, paint);
// draw background and overlay onto main canvas
paint.reset();
paint.setColor(Color.BLACK);
canvas.drawBitmap(bitmapBkg, 0, 0, paint);
canvas.drawBitmap(bitmapOver, 0, 0, paint);
}
Here is an image of what I am getting:
What I am trying to get would have the outside portion also red-magenta; only the eye-shape in the middle should be yellow-green.
Turns out the trick was adding yet another layer.
// make a secondary overlay that cuts out the whole circles
Bitmap bitmapOver2 = Bitmap.createBitmap((int) w, (int) h, Bitmap.Config.ARGB_8888);
Canvas canvasOver2 = new Canvas(bitmapOver2);
paint.reset();
paint.setShader(new LinearGradient(0, h / 2 - off, 0, h / 2 + off, Color.RED, Color.MAGENTA, Shader.TileMode.CLAMP));
canvasOver2.drawRect(new RectF(0, 0, w, h), paint);
paint.reset();
paint.setColor(Color.BLACK);
paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));
canvasOver2.drawCircle(w / 2 - (off / 2), h / 2, off, paint);
canvasOver2.drawCircle(w / 2 + (off / 2), h / 2, off, paint);
Applying it like so:
// draw background and overlay onto main canvas
paint.reset();
paint.setColor(Color.BLACK);
canvas.drawBitmap(bitmapBkg, 0, 0, paint);
canvas.drawBitmap(bitmapOver2, 0, 0, paint);
canvas.drawBitmap(bitmapOver, 0, 0, paint);
Basically it is a bit of a trick. It draws the mid-tier backdrop twice, once with a full circle cutouts and the other with the eye-shape cutout. The two fit together just right to pull off the desired effect.
Of course #Rotwang, you are probably right. Using Path and arcTo() would be a much better solution. The only reason I avoided that approach is b/c arcTo() is an api 21+ feature. So far I've manged to keep the api to 17+. But if anyone else would like to provide an arcTo() solution for completeness that would be cool to compare.
I want to draw text below circle in canvas. Following is my code but text is drawn above circle.
canvas.drawCircle(getWidth() / 2, getHeight() / 2, radius, paint);
canvas.drawText(text, 0, (radius*2), textPaint);
Looking at it properly you need to set the y value based on height of the canvas, same way you did the circle, then adjust it to be Below based on radius.
canvas.drawCircle(getWidth() / 2, getHeight() / 2, radius, paint);
canvas.drawText(text, 0, (getHeight() / 2) + radius, textPaint);
One thing that may be confusing you is that the origion is the top left. And that increase in Y is downwards
You may need to add a few extra pixels based on text height. so (getHeight() / 2) + radius + 20
I am working on creating a custom view where a user can select an angle. Below is an example of what the end result should look like:
I am achieving this with the following code:
mPaint.setColor(Color.BLACK);
canvas.drawCircle((int) (mSize.right / 2), (int) (mSize.bottom / 2),
mWidthOutside, mPaint);
mPaint.setColor(Color.LTGRAY);
canvas.drawCircle((int) (mSize.right / 2), (int) (mSize.bottom / 2),
mWidthInside, mPaint);
The problem with doing it this way, is the background is a static LTGRAY, which I hope to make Transparent.
How would I go about leaving the center of the circle transparent?
I have tried the following hoping the the drawArc function would only create a line the width of the paint, and not fill the center. It does in face fill the center.
RectF rectF = new RectF(centerX - mRadius, centerY - mRadius, centerX
+ mRadius, centerY + mRadius);
canvas.drawArc(rectF, 0, 360, false, mPaint);
Suggestions on how to keep the center of the circle transparent?
As asked :)
The solution is to set the style to be Paint.Style.STROKE
Hollow Circle in canvas.
Bitmap bitmap=Bitmap.createBitmap(500,500, Bitmap.Config.ARGB_8888);
Canvas canvas=new Canvas(bitmap);
//canvas.clipPath(,Region.Op.DIFFERENCE);
Paint paint=new Paint();
paint.setColor(Color.RED);
paint.setStrokeWidth(140);
paint.setStyle(Paint.Style.STROKE);
canvas.drawCircle(250,250,150,paint);
imageView.setImageBitmap(bitmap);