Question

我正在尝试在创建的圈子周围添加数字。问题是，只要我添加文本就删除了圆圈的一部分，我不知道为什么。我在

之前和之后都包含了代码段和屏幕截图

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;
    }
}

由于

Answer 1

我能够通过根据角度绘制文本并计算其在圆上的位置来进行输出。

这是更新的onDraw方法

 @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);
    }

如何在弧上绘制文字？

1 个答案: