如何在圆弧上绘制文字?

安娜

像这样我正在尝试在创建的圆圈周围添加数字。问题是,一旦我添加了文本,它就会删除圆的一部分,并且我不知道为什么。我之前和之后都包含了代码段和屏幕截图

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

我在圆上添加文本之前和之后的结果的屏幕截图

谢谢

舒邦克

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

这是更新的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);
    }

输出

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何在Matplotlib中绘制实心圆弧

来自分类Dev

如何在createjs中使用圆弧绘制圆?

来自分类Dev

如何在GoogleMap中绘制2个同心圆弧

来自分类Dev

如何绘制不同厚度的圆弧

来自分类Dev

如何绘制不同厚度的圆弧

来自分类Dev

在圆弧上绘制圆形空心拇指

来自分类Dev

如何使用UIBezierPath用线绘制圆弧

来自分类Dev

如何使用UIBezierPath用线绘制圆弧

来自分类Dev

如何在StreamGeometry中绘制具有三个点的圆弧

来自分类Dev

如何在PreviewView上绘制?

来自分类Dev

如何在TTrayIcon上绘制

来自分类Dev

如何在 GLCanvas 上绘制?

来自分类Dev

尝试使用d3在圆上绘制圆弧

来自分类Dev

在屏幕上绘制后,圆弧或圆不是完美的圆

来自分类Dev

如何计算非圆弧上的点的坐标

来自分类Dev

如何在ChartJS中设置圆弧的大小?

来自分类Dev

如何在矩形上画圆弧?

来自分类Dev

如何根据两个给定的点和给定的高度(描述圆弧段)绘制圆弧?

来自分类Dev

如何根据每个圆弧百分比在svg圆中绘制几个圆弧?

来自分类Dev

Cocos2d v3:如何绘制圆弧?

来自分类Dev

如何使用canvas和javascript在图表中绘制实心圆弧?

来自分类Dev

如何使用canvas和javascript在图表中绘制实心圆弧?

来自分类Dev

如何使用canvas和javascript在图表中绘制实心圆弧?

来自分类Dev

如何使用canvas和javascript在图表中绘制实心圆弧?

来自分类Dev

绘制圆弧的y值

来自分类Dev

JavaFX:如何在GraphicsContext上绘制路径?

来自分类Dev

如何在画布上随机绘制对象

来自分类Dev

[WPF]如何在画布上绘制网格?

来自分类Dev

如何在JPanel上绘制SimpleWeightedGraph?