[英]How to draw text on arc?
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 谢谢
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 这是更新的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);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.