使用畫布在Arc內繪制文本

Question

我正在一個Android應用程序中繪制一個圓圈並將它們平均分開並將文本綁定在圓圈中的分割部分內（如pichart）。 我畫了一個圓圈並將它們平分，但我想將文本綁定在分割部分內。 請查看我的代碼並提供解決方案。 提前致謝。

public class MainActivity extends Activity {
    /** Called when the activity is first created. */
    float values[] = { 130, 130, 130, 130, 130 };

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        LinearLayout linear = (LinearLayout) findViewById(R.id.linearlay);
        values = calculateData(values);
        linear.addView(new MyGraphview(this, values));
    }

    private float[] calculateData(float[] data) {

        float total = 0;
        for (int i = 0; i < data.length; i++) {
            total += data[i];
        }
        for (int i = 0; i < data.length; i++) {
            data[i] = 360 * (data[i] / total);
        }
        return data;

    }

    public class MyGraphview extends View {

        private Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);     
        private float[] value_degree;
        private int[] COLORS = { Color.YELLOW, Color.GREEN, Color.WHITE,
                Color.CYAN, Color.RED };
        RectF rectf = new RectF(10, 10, 300, 300);
        Rect rect = new Rect(10, 10, 300, 300);
        int temp = 0;
        String rotatedtext;
        Path path;

        public MyGraphview(Context context, float[] values) {
            super(context);
            path = new Path();
            value_degree = new float[values.length];
            for (int i = 0; i < values.length; i++) {
                value_degree[i] = values[i];
            }

            paint.setTextSize(16);
            rotatedtext = "Rotated  :)";
        }

        @Override
        protected void onDraw(Canvas canvas) {
            super.onDraw(canvas);

            for (int i = 0; i < value_degree.length; i++) {
                if (i == 0) {

                    paint.setColor(COLORS[i]);
                    canvas.drawArc(rectf, 0, value_degree[i], true, paint);

                } else {

                    temp += (int) value_degree[i - 1];
                    paint.setColor(COLORS[i]);
                    canvas.drawArc(rectf, temp, value_degree[i], true, paint); //

                }
            }

        }

    }
}

Answer 1

試試這個：

private String[] STRINGS = { "Yellow", "GREEN", "WHITE", "CYAN", "RED" }; // Array of strings, just for the sample

    @Override
    protected void onDraw(Canvas canvas) 
    {           
        super.onDraw(canvas);

        temp = 0;

        int centerX = (rect.left + rect.right) / 2;
        int centerY = (rect.top + rect.bottom) / 2;
        int radius = (rect.right - rect.left) / 2;

        radius *= 0.5; // 1 will put the text in the border, 0 will put the text in the center. Play with this to set the distance of your text.

        for (int i = 0; i < data.length; i++) 
        {
            if (i > 0) 
                temp += (int) data[i - 1]; // rewrote your code here a bit, to avoid duplicate code.

            paint.setColor(COLORS[i]);
            canvas.drawArc(rectf, temp, data[i], true, paint);

            paint.setColor(Color.BLACK); // set this to the text color.
            float medianAngle = (temp + (data[i] / 2f)) * (float)Math.PI / 180f; // this angle will place the text in the center of the arc.
            canvas.drawText(STRINGS[i], (float)(centerX + (radius * Math.cos(medianAngle))), (float)(centerY + (radius * Math.sin(medianAngle))), paint);
        }
    }

此外，為了獲得更好的結果，請確保在繪制任何文本之前在繪畫中設置Align.CENTER屬性：

paint.setTextSize(16);
paint.setTextAlign(Align.CENTER);

希望這可以幫助 ：）