How to draw text on arc?

Question

I am trying to add numbers around the circle created. The problem is that as soon as I add the text it deletes parts of the circle, and I do not know why. I've included the code snippet and screenshot before and after

public class PieChartView extends View {
    private Paint slicePaint;
    private int[] sliceClrs = { Color.RED, Color.WHITE,
            Color.CYAN, Color.WHITE,
            Color.CYAN, Color.WHITE,
            Color.CYAN, Color.WHITE,
            Color.CYAN, Color.WHITE};
    private RectF rectf; // Our box
    private float[] datapoints; // Our values
    Canvas canvas;
    Paint textColor;
    Path path = new Path();
    int colorCounterIndex = 0;
    public PieChartView(Context context, AttributeSet attrs) {
        super(context, attrs);

        slicePaint = new Paint();
        slicePaint.setAntiAlias(true);
        slicePaint.setDither(true);
        slicePaint.setStyle(Paint.Style.FILL);

        textColor = new Paint();
        textColor.setColor(Color.BLACK);
        textColor.setTextSize(50);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        this.canvas = canvas;
        if (this.datapoints != null) {
            int startTop = 0;
            int startLeft = 0;
            int endBottom = getWidth();
            int endRight = endBottom; // To make this an equal square
            // Create the box
            rectf = new RectF(startLeft, startTop, endRight, endBottom); // Creating the box

            float[] scaledValues = scale(); // Get the scaled values
            float sliceStartPoint = 0;
            for (int i = 0; i < scaledValues.length; i++) {
                slicePaint.setColor(sliceClrs[i]);
                canvas.drawArc(rectf, sliceStartPoint, scaledValues[i], true, slicePaint); // Draw slice

                canvas.rotate(36, getWidth() / 2, getHeight()/2);
                path.addCircle(getWidth() / 2, getHeight() / 2, 180, Path.Direction.CW);
                canvas.drawTextOnPath("(" + i + ")", path, 0, 5, textColor);

                sliceStartPoint += scaledValues[i]; // Update starting point of the next slice

            }
            setLayerType(View.LAYER_TYPE_SOFTWARE, null);
        }
    }

    public Canvas getCanvas() {
        return canvas;
    }

    public void setDataPoints(float[] datapoints) {
        this.datapoints = datapoints;
        invalidate(); // Tells the chart to redraw itself
    }

    private float[] scale() {
        float[] scaledValues = new float[this.datapoints.length];
        float total = getTotal(); // Total all values supplied to the chart
        for (int i = 0; i < this.datapoints.length; i++) {
            scaledValues[i] = (this.datapoints[i] / total) * 360; // Scale each value
        }
        return scaledValues;
    }

    private float getTotal() {
        float total = 0;
        for (float val : this.datapoints)
            total += val;
        return total;
    }
}

Thanks

Answer 1

I was able to make the output by making the text draw based on angle and calculating its position on the circle.

Here is the updated onDraw method

 @Override
    protected void onDraw(Canvas canvas) {
        this.canvas = canvas;
            int startTop = 0;
            int startLeft = 0;
            int endBottom = getWidth();
            int endRight = endBottom; // To make this an equal square
            // Create the box
            rectf = new RectF(startLeft, startTop, endRight, endBottom); // Creating the box

            float[] scaledValues = scale(); // Get the scaled values
            float sliceStartPoint = 0;
            for (int i = 0; i < scaledValues.length; i++) {
                slicePaint.setColor(sliceClrs[i]);
                canvas.drawArc(rectf, sliceStartPoint, scaledValues[i], true, slicePaint); // Draw slice
                sliceStartPoint += scaledValues[i]; // Update starting point of the next slice

            }

            sliceStartPoint = 0;
            for (int i = 0; i < scaledValues.length; i++) {
              sliceStartPoint += scaledValues[i]; // Update starting point of the next slice
              float radius = 300;
              float x = (float)(radius * Math.cos(sliceStartPoint * Math.PI / 180F)) + getWidth()/2 - 10;
              float y = (float)(radius * Math.sin(sliceStartPoint * Math.PI / 180F)) + getHeight()/2 - 20;
              canvas.drawText("(" + i + ")", x, y , textColor);

            }
          setLayerType(View.LAYER_TYPE_SOFTWARE, null);
    }