Question

I'm having some issues with drawArc. When I have 4 wedges, it seems to be fine, but when I don't ahve 4 wedges (like 10), then the wedges don't align properly. You can see in the pictures, there is a slight mis-alignment. Any thoughts?

    int wedgeNum = 10;

    for (int i = 0; i < wedgeNum; i++) {

        canvas.drawArc(bounds, 0, 360.0f / wedgeNum,
                true, paints[i % 2]);
        canvas.rotate(360.0f / wedgeNum, bounds.centerX(), bounds.centerY());

    }

enter image description here enter image description here

Was it helpful?

Solution

In this case of two colors, to fix the problem we can draw a whole circle of a first color, and then draw wedges of the second color on it. Like this:

int wedgeNum = 10;

float wedgeSweepAngle = 360f / wedgeNum;
// draw a round gray background
canvas.drawCircle(bounds.centerX(), bounds.centerY(), bounds.width() / 2f, paints[1]);
// draw only green wedges
for (int i = 0; i < wedgeNum; i += 2) {
    canvas.drawArc(bounds, i * wedgeSweepAngle, wedgeSweepAngle, true, paints[0]);
}

In general, we can draw wedges in reverse order. Besides, start angle of all wedges will be 0, and end angle will have old value. First, we draw the last sector from 0 to 360 degrees, i.e. whole circle. Then draw wedge with number (n - 1) from 0 to (360 - sweep angle of the last wedge) degrees. And so on.

int wedgeNum = 10;

float wedgeSweepAngle = 360f / wedgeNum;
// end angle, we will decrease this value on each iteration
float endAngle = 360f;
// start angle, always 0
final float startAngle = 0f;
// reverse order
for (int i = wedgeNum - 1; i >= 0; i--) {
    // draw wedge from 0 to endAngle
    canvas.drawArc(bounds, startAngle, endAngle, true, paints[i % 2]);
    // calculate the next wedge's end angle
    endAngle -= wedgeSweepAngle;
}

Hope it will help.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top