2013-04-01 2 views
11

나는 안드로이드 응용 프로그램에서 원을 그려 똑같이 나누고 동그라미의 나누어 진 부분 (예 : pichart)에 텍스트를 바인딩하려고합니다. 나는 원을 그려 똑같이 나누었지만, 나누어 진 부분 안에 텍스트를 묶고 싶습니다. 내 코드를 살펴보고 해결책을 제시하십시오. 미리 감사드립니다.캔버스를 사용하여 아크 안쪽에 텍스트 그리기

enter image description here

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

       } 
      } 

     } 

    } 
} 
+0

아래쪽 호만 또는 모든 호를 텍스트로 그리시겠습니까? –

답변

9

이 시도 :

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

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 속성을 설정해야합니다

희망이 있습니다.

+0

대단하군요! 130에서 시작하여 각 문자에 대해 "medianAngle"수식을 어떻게 만들었습니까? – SingularityFuture

+1

그것의 간단한 - 그것은 다음 원호 (data [i]/2)로 이동하기 위해 회전의 반경 (temp) + 반을 구한 다음이를 라디안 (* PI/180)으로 변환합니다. –

+0

좋습니다, 감사합니다. 말이된다. – SingularityFuture

관련 문제