Vẽ văn bản bên trong Arc bằng canvas

Question

Tôi đang làm việc trong một ứng dụng Android để vẽ một hình tròn và chia chúng bằng nhau và liên kết văn bản bên trong phần được chia trong vòng tròn (như pichart). Tôi đã vẽ một vòng tròn và chia chúng bằng nhau, nhưng tôi muốn ràng buộc văn bản bên trong phần được chia. Hãy nhìn vào mã của tôi và đưa ra một giải pháp. Cảm ơn trước.

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

Hãy thử điều này:

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

Ngoài ra, cho kết quả đẹp hơn, hãy chắc chắn để thiết lập thuộc tính Align.CENTER trong sơn trước khi rút ra bất kỳ văn bản:

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

Hy vọng điều này sẽ giúp :)