2016-06-17 7 views
0

Something like that Я пытаюсь добавить числа вокруг созданного круга. Проблема в том, что как только я добавляю текст, он удаляет части круга, и я не знаю, почему. Я включил фрагмент кода и скриншот до и послеКак нарисовать текст на дуге?

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

Screen shot of the result before and after i added the text on the circle

Благодарности

+0

добавьте скриншот вывода на ваш вопрос, а также. – Shubhank

+0

@Shubhank смотрите выше, пожалуйста, – Anna

+0

вы можете рассказать, как вы передаете данные, чтобы я мог проверить код. в настоящее время он терпит неудачу, когда он равен нулю – Shubhank

ответ

0

Я был в состоянии сделать вывод, делая текст рисовать на основе угла и расчета его положения на круг.

Вот обновленный 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); 
    } 

Output

+0

Спасибо, но как заставить числа быть на центр дуг? – Anna

+0

можете ли вы опубликовать скриншот того, как вы хотели бы, чтобы они были? – Shubhank

+0

Уверен, посмотрим, пожалуйста, я добавил скриншот – Anna

Смежные вопросы