2010-10-28 21 views
26

Próbuję opracować prostą klasę wykresu kołowego dla Androida. Na razie może wykonać mapę etykiet i wartości oraz narysować wykres kołowy. Mam jeszcze dodać legendy do ciasta, w którym muszę umieścić tekst w pobliżu małych prostokątów na rogu ekranu. Każda pomoc doceniona, ponieważ jestem nowy w systemie Android.Jak narysować tekst na płótnie?

Odpowiedz

1

Innym (zapewne lepiej) sposobem rysowania tekstu na płótnie jest użycie StaticLayout. W razie potrzeby obsługuje tekst wielowierszowy.

String text = "This is some text."; 

TextPaint textPaint = new TextPaint(); 
textPaint.setAntiAlias(true); 
textPaint.setTextSize(16 * getResources().getDisplayMetrics().density); 
textPaint.setColor(0xFF000000); 

int width = (int) textPaint.measureText(text); 
StaticLayout staticLayout = new StaticLayout(text, textPaint, (int) width, Layout.Alignment.ALIGN_NORMAL, 1.0f, 0, false); 
staticLayout.draw(canvas); 

TextPaint i StaticLayout zostały instancja tuż przed wykorzystywane są tutaj ze względu na ilustracji. Jednak zrobienie tego w onDraw może zaszkodzić wydajności. Here is a better example pokazano je w kontekście niestandardowego widoku, który rysuje własny tekst.

6

Nie było innej odpowiedzi tutaj, która została usunięta, ponieważ był tylko link. Oryginalny link to here. Kod jest w zasadzie taki sam, ale wyjąłem nierysujące fragmenty rysunku, a także zwiększyłem rozmiary, aby lepiej działały na nowoczesnych gęstościach ekranu.

To pokazuje tylko kilka rzeczy, które można zrobić z rysowaniem tekstu.

enter image description here

Oto zaktualizowany kod:

public class MainActivity extends AppCompatActivity { 

    DemoView demoview; 

    @Override 
    protected void onCreate(Bundle savedInstanceState) { 
     super.onCreate(savedInstanceState); 
     demoview = new DemoView(this); 
     setContentView(demoview); 
    } 

    private class DemoView extends View { 
     public DemoView(Context context){ 
      super(context); 
     } 

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

      // custom drawing code here 
      // remember: y increases from top to bottom 
      // x increases from left to right 
      int x = 0; 
      int y = 0; 
      Paint paint = new Paint(); 
      paint.setStyle(Paint.Style.FILL); 

      canvas.save(); 
      canvas.translate(100, 200); 

      // make the entire canvas white 
      canvas.drawColor(Color.WHITE); 

      // draw some text using STROKE style 
      paint.setStyle(Paint.Style.STROKE); 
      paint.setStrokeWidth(1); 
      paint.setColor(Color.MAGENTA); 
      paint.setTextSize(100); 
      canvas.drawText("Style.STROKE", 0, 0, paint); 

      canvas.translate(0, 200); 

      // draw some text using FILL style 
      paint.setStyle(Paint.Style.FILL); 
      //turn antialiasing on 
      paint.setAntiAlias(true); 
      //paint.setTextSize(30); 
      canvas.drawText("Style.FILL", 0, 0, paint); 

      canvas.translate(0, 200); 

      // draw some rotated text 
      // get text width and height 
      // set desired drawing location 
      x = 75; 
      y = 185; 
      paint.setColor(Color.GRAY); 
      //paint.setTextSize(25); 
      String str2rotate = "Rotated!"; 

      // draw bounding rect before rotating text 
      Rect rect = new Rect(); 
      paint.getTextBounds(str2rotate, 0, str2rotate.length(), rect); 
      canvas.translate(x, y); 
      paint.setStyle(Paint.Style.FILL); 
      // draw unrotated text 
      canvas.drawText("!Rotated", 0, 0, paint); 
      paint.setStyle(Paint.Style.STROKE); 
      canvas.drawRect(rect, paint); 
      // undo the translate 
      canvas.translate(-x, -y); 

      // rotate the canvas on center of the text to draw 
      canvas.rotate(-45, x + rect.exactCenterX(), 
        y + rect.exactCenterY()); 
      // draw the rotated text 
      paint.setStyle(Paint.Style.FILL); 
      canvas.drawText(str2rotate, x, y, paint); 

      //undo the translation and rotation 
      canvas.restore(); 
     } 
    } 
} 

Coś innego, że chcę spróbować później jest drawing text along a path.

Zobacz także this fuller answer here, który daje następujący obraz.

enter image description here

Powiązane problemy