Draw a circle partially filled dynamically

Question

I'm trying to play with canvas. I could draw some triangles and fill it partially drawing a path and paint it.I used Path, Points and Line. It was a great exercise to remember trigonometry. For now I would like to do the same with a circle, as you can see below. I want set a percentage and to fill this circle until the circle's height * percentage. How could me draw a circle like that with canvas or some lib?

enter image description here

You can use `drawArc()` and set `paint.setStyle(Paint.Style.FILL);` — Phantômaxx, May 23 '15 at 07:40
Unlike forum sites, we don't use "Thanks", or "Any help appreciated", or signatures on [so]. See "[Should 'Hi', 'thanks,' taglines, and salutations be removed from posts?](http://meta.stackexchange.com/questions/2950/should-hi-thanks-taglines-and-salutations-be-removed-from-posts). BTW, it's "Thanks in advance", not "Thanks in advanced". — John Saunders, May 24 '15 at 22:53

score 2 · Answer 1 · edited May 23 '17 at 12:14

2

You should think about it a little differently. The way I'd do it is to draw a coloured rectangle (where the height is a percentage of the circle's intended height) and then crop it with a circle. This answer explains how to crop an image in a circular shape (I'd rather link than retype the code here).

edited May 23 '17 at 12:14

Community

1
1

answered May 23 '15 at 01:12

roarster

4,058
2
25
38

Esdras · Answer 2 · 2015-05-26T19:07:58.863

I finally got do it. I created two methods. As roarster suggested, I created a white rectangle as mask where the height is a percentage of the circle's intended height.

private Bitmap drawWithPorterDuff(Bitmap original, Bitmap mask, PorterDuff.Mode mode) {
    Bitmap bitmap = Bitmap.createBitmap(original.getWidth(), original.getHeight(), Bitmap.Config.ARGB_8888);
    Canvas canvas = new Canvas(bitmap);
    Paint maskPaint = new Paint();
    maskPaint.setAntiAlias(true);
    canvas.drawBitmap(original, 0, 0, null);
    maskPaint.setXfermode(new PorterDuffXfermode(mode));
    canvas.drawBitmap(mask, 0, 0, maskPaint);
    Bitmap edge = BitmapFactory.decodeResource(getResources(), R.drawable.edge);
    maskPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.ADD));
    canvas.drawBitmap(edge, 0, 0, maskPaint);
    return bitmap;
}

public Bitmap createMask(int width, int height) {
    Paint paint = new Paint();
    paint.setStyle(Paint.Style.FILL);
    paint.setColor(Color.WHITE);
    paint.setAntiAlias(true);
    Bitmap bitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
    Canvas canvas = new Canvas(bitmap);
    canvas.drawRect(0, 0, width, height, paint);
    return bitmap;
}

At view's constructor I created a init() method with the folling code

    PorterDuff.Mode mode = PorterDuff.Mode.SRC_IN;
    Bitmap original = BitmapFactory.decodeResource(getResources(), R.drawable.blue_graph);
    Bitmap mask = createMask(original.getWidth(), (int) ((original.getHeight()) * (1 - percentage)));
    Bitmap result = drawWithPorterDuff(original, mask, mode);
    imageView.setImageBitmap(result);

Draw a circle partially filled dynamically

2 Answers2

Linked