web-dev-qa-db-ja.com

キャンバスにテキストを描画する方法は？

私はAndroid用のシンプルな円グラフクラスを開発しようとしています。今のところ、ラベルと値のマップを取得し、円グラフを描画できます。パイの凡例をまだ追加していません。画面の隅の小さな長方形の近くにテキストを配置する必要があります。 Android dev。

androidcanvasdrawable
31
Karthick

CanvasクラスのdrawTextメソッドを使用する必要があります。

Paint paint = new Paint(); 
canvas.drawPaint(Paint); 
Paint.setColor(Color.BLACK); 
Paint.setTextSize(16); 
canvas.drawText("My Text", x, y, Paint);

関連するドキュメントは次のとおりです。

http://developer.Android.com/reference/Android/graphics/Canvas.html#drawText（Java.lang.String、float、float、Android.graphics.Paint）

51
Jean-Philippe Jodoin

以前は、リンクのみであったため削除された別の回答がありました。元のリンクは here です。コードは基本的に同じですが、テキスト以外の描画部分を削除し、最新の画面密度でより適切に機能するようにサイズを拡大しました。

これは、テキスト描画でできることを示しています。

enter image description here

更新されたコードは次のとおりです。

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

後で試してみたいことは パスに沿ってテキストを描画する です。

こちらのより完全な回答 も参照してください。次の画像が得られます。

enter image description here

8
Suragch

キャンバスにテキストを描画する別の（おそらくより良い）方法は、StaticLayoutを使用することです。これは、必要なときに複数行のテキストを処理します。

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とStaticLayoutは、説明のためにここで使用する直前にインスタンス化されました。ただし、onDrawでこれを行うと、パフォーマンスが低下します。 より良い例です 独自のテキストを描画するカスタムビューのコンテキストでそれらを表示します。

1
Suragch