円でテキストを描画するには？

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