グラフィックス（５）-Canvasクラスのメソッドを使って図形を描画する

Canvasクラスのメソッドには、図形を描画する様々なメソッドが用意されています。

描画領域を塗りつぶす

描画領域を塗りつぶすCanvasクラスのメソッドには、以下のものがあります。

void drawColor(int color)
Color値で、描画領域を塗りつぶします。
void drawColor(int color, PorterDuff.Mode mode)
２番目の列挙型引数PorterDuff.Modeの意味が理解できず、どのような使い方ができるのか、よくわかりませんでした。
PorterDuff.Modeの引数は「PorterとDuffの12のルール」というものを示しているようで、どうやら、既に塗りつぶされている色の上に新しい色を合成するみたいです。
とりあえず、以下のＵＲＬが参考になりそうなので、載せておきます。
void drawARGB(int a, int r, int g, int b)
RGBとアルファ値で、描画領域を塗りつぶします。
void drawRGB(int r, int g, int b)
RGBを指定して、描画領域を塗りつぶします。
void drawPaint(Paint paint)
Paintに設定された色で、描画領域を塗りつぶします。

Color値についてはColorクラスを参照して下さい。

Viewクラスでは、View#setBackgroundColor(int color)メソッドを使って背景色を塗りつぶして、その上にグラフィックを描画する事もできますが、 SurfaceViewでは、setBackgroundColorを使うと描画されたグラフィックが背景色に邪魔されて、視えなくなってしまうようです。

点の描画

点を描画するCanvasクラスのメソッドには、以下のものがあります。

void drawPoint(float x, float y, Paint paint)
ｘ軸とｙ軸の座標を指定して、点を描画します。
void drawPoints(float[] pts, Paint paint)
ｘ軸とｙ軸の座標のペアの配列を指定して、点を描画します。
void drawPoints(float[] pts, int offset, int count, Paint paint)
ｘ軸とｙ軸の座標のペアの配列と、描画対象となる配列のオフセット位置と、オフセット位置からの描画する点の数を指定して、点を描画します。
引数countには、描画する点の数ｘ２の値を指定します。

次のプログラムでは、5行目～8行目で、座標（10,10）の位置に点の大きさ１２の赤色の点を、 10行目～13行目で、座標（10,10），（20,20），（30,30），（40,40）の位置に大きさ８の緑色の４つの点を、 15行目～18行目で、座標（20,20），（30,30）の位置に大きさ４の青色の２つの点（配列のオフセット位置２からの４つの値（２個の点））を、描画しています。

点を描画するサンプル

01float[] pts = { 10, 10, 20, 20, 30, 30, 40, 40 };
02 
03Paint paint = new Paint();
04 
05// drawPoint(float x, float y, Paint paint)の例
06paint.setColor(Color.RED);
07paint.setStrokeWidth(12);
08canvas.drawPoint(pts[0], pts[1], paint);
09 
10// drawPoint(float x, float y, Paint paint)の例
11paint.setColor(Color.GREEN);
12paint.setStrokeWidth(8);
13canvas.drawPoints(pts, paint);
14 
15// drawPoints(float[] pts, int offset, int count, Paint paint)の例
16paint.setColor(Color.BLUE);
17paint.setStrokeWidth(4);
18canvas.drawPoints(pts, 2, 4, paint);

このプログラムを実行すると、以下のように表示されます。

線の描画

線を描画するCanvasクラスのメソッドには、以下のものがあります。

void drawLine(float startX, float startY, float stopX, float stopY, Paint paint)
startX，startYの座標位置よりstopX，stopYの座標まで、線を描画します。
void drawLines(float[] pts, Paint paint)
ｘ軸とｙ軸の座標のペアの配列で指定された、線を描画します。
void drawLines(float[] pts, int offset, int count, Paint paint)
ｘ軸とｙ軸の座標のペアの配列と、描画対象となる配列のオフセット位置と、オフセット位置からの数を指定して、線を描画します。

線を描画するサンプル

01float[] pts = { 10, 10, 110, 110, 110, 110, 210, 10, 210, 10, 310, 110 };
02Paint paint = new Paint();
03 
04// drawLine(float startX, float startY, float stopX, float stopY, Paint paint)の例
05paint.setColor(Color.RED);
06paint.setStrokeWidth(12);
07canvas.drawPoint(pts[0], pts[1], paint);
08 
09// drawLines(float[] pts, Paint paint)の例
10paint.setColor(Color.GREEN);
11paint.setStrokeWidth(8);
12canvas.drawPoints(pts, paint);
13 
14// drawLines(float[] pts, int offset, int count, Paint paint)の例
15paint.setColor(Color.BLUE);
16paint.setStrokeWidth(4);
17canvas.drawPoints(pts, 2, 4, paint);

このプログラムを実行すると、以下のように表示されます。

矩形の描画

矩形を描画するCanvasクラスのメソッドには、以下のものがあります。

void drawRect(float left, float top, float right, float bottom, Paint paint)
左，上，右，下の４隅の位置を指定して、矩形の描画を描画します。
void drawRect(Rect r, Paint paint)
Rectクラスの左，上，右，下の４隅の位置を指定して、矩形の描画を描画します。
void drawRect(RectF rect, Paint paint)
RectFクラスの左，上，右，下の４隅の位置を指定して、矩形の描画を描画します。

矩形を描画するサンプル

01Paint paint = new Paint();
02paint.setStrokeWidth(4);
03 
04// drawRect(float left, float top, float right, float bottom, Paint paint)の例
05paint.setColor(Color.RED);
06canvas.drawRect(10, 10, 100, 100, paint);
07 
08// drawRect(Rect r, Paint paint)の例
09paint.setColor(Color.GREEN);
10paint.setStyle(Paint.Style.STROKE);
11canvas.drawRect(new Rect(110, 10, 200, 100), paint);
12 
13// drawRect(RectF rect, Paint paint)の例
14paint.setStyle(Paint.Style.FILL);
15paint.setColor(Color.BLUE);
16canvas.drawRect(new RectF(210.0f, 10.0f, 300.0f, 100.0f), paint);

このプログラムを実行すると、以下のように表示されます。

角の丸い矩形の描画

角の丸い矩形を描画するCanvasクラスのメソッドには、以下のものがあります。

void drawRoundRect(RectF rect, float rx, float ry, Paint paint)
RectFで指定された矩形領域に角の丸い矩形を描画します。
rxとryはそれぞれ角の丸い部分のｘ軸とy軸の値を示します。

角の丸い矩形を描画するサンプル

1Paint paint = new Paint();
2paint.setColor(Color.GREEN);
3 
4canvas.drawRoundRect(new RectF(10, 10, 200, 100),20,10, paint);

このプログラムを実行すると、以下のように表示されます。

頂点座標の配列による図形の描画

drawVerticesというメソッドがるのですが、使い方はよくわかりませんでした。

多分、頂点座標の配列による図形の描画をするらしい。

一応、メソッドの書式のみを載せておきます。

void drawVertices(Canvas.VertexMode mode, int vertexCount, float[] verts, int vertOffset, float[] texs, int texOffset, int[] colors, int colorOffset, short[] indices, int indexOffset, int indexCount, Paint paint)

ApiDemosのVertices.javaに、サンプルプログラムが載っています。

円の描画

円を描画するCanvasクラスのメソッドには、以下のものがあります。

void drawCircle(float cx, float cy, float radius, Paint paint)
座標が（cx, cy）を中心として、半径 radiusの円を、描画します。

円を描画するサンプル

1Paint paint = new Paint();
2paint.setColor(Color.GREEN);
3 
4canvas.drawCircle(60, 60, 50, paint);

このプログラムを実行すると、以下のように表示されます。

楕円の描画

楕円を描画するCanvasクラスのメソッドには、以下のものがあります。

void drawOval(RectF oval, Paint paint)
RectFクラスで指定された矩形領域に、楕円を描画します。

楕円を描画するサンプル

1Paint paint = new Paint();
2 
3paint.setColor(Color.GREEN);
4canvas.drawOval(new RectF(10.0f, 10.0f, 150.0f, 100.0f), paint);

このプログラムを実行すると、以下のように表示されます。

円弧の描画

円弧を描画するCanvasクラスのメソッドには、以下のものがあります。

void drawArc(RectF oval, float startAngle, float sweepAngle, boolean useCenter, Paint paint)
RectFクラスで指定された矩形領域に、角度startAngleを起点に時計回りに、角度sweepAngle幅の円弧を引きます。
useCenterをtrueに指定すると、楕円の中心を含めて描画します。
startAngleが0で時計針の短針が3時の位置に、180で9時の位置が開始位置になります。
sweepAngleの値に負の値を指定すると、反時計回りの角度になります。

円弧を描画するサンプル

01Paint paint = new Paint();
02 
03paint.setStyle(Paint.Style.STROKE);
04paint.setColor(Color.GREEN);
05canvas.drawArc(new RectF(10.0f, 10.0f, 150.0f, 100.0f), 180, 90, true, paint);
06canvas.drawArc(new RectF(160.0f, 10.0f, 300.0f, 100.0f), 180, -90, false, paint);
07 
08paint.setStyle(Paint.Style.FILL);
09paint.setColor(Color.BLUE);
10canvas.drawArc(new RectF(10.0f, 110.0f, 150.0f, 200.0f), 180, 90, true, paint);
11canvas.drawArc(new RectF(160.0f, 110.0f, 300.0f, 200.0f), 180, -90, false, paint);

このプログラムを実行すると、以下のように表示されます。

sweepAngle幅が正の場合と負の場合、およびuseCenterの値がtrueの場合とfalseの場合の、違いがわかると思います。

テキストの描画

テキストを描画するCanvasクラスのメソッドには、以下のものがあります。

void drawText(String text, float x, float y, Paint paint)
座標(x,y)の位置を基点に文字列textを描画します。
void drawText(String text, int start, int end, float x, float y, Paint paint)
座標(x,y)の位置を基点に文字列textのstart+1文字目からend+１文字目までのテキストの描画します。
void drawText(CharSequence text, int start, int end, float x, float y, Paint paint)
座標(x,y)の位置を基点にCharSequence型文字列textのstart+1文字目からend+１文字目までのテキストの描画します。
void drawText(char[] text, int index, int count, float x, float y, Paint paint)
座標(x,y)の位置を基点にchar型配列textのindex要素位置から文字数count分のテキストの描画します。
void drawTextOnPath(String text, Path path, float hOffset, float vOffset, Paint paint)
Pathオブジェクト（後述）で指定されて位置にそってテキストを描画します。
Pathオブジェクトの位置よりhOffsetとvOffset分だけ移動した位置を基点に描画されます。
void drawTextOnPath(char[] text, int index, int count, Path path, float hOffset, float vOffset, Paint paint)
Pathオブジェクトで指定されて位置にそってchar型配列textのindex要素位置から文字数count分のテキストの描画します。
void drawPosText(String text, float[] pos, Paint paint)
float型配列 posで指定された位置に沿って文字列textを描画します。
void drawPosText(char[] text, int index, int count, float[] pos, Paint paint)
float型配列 posで指定された位置に沿ってchar型配列textのindex要素位置から文字数count分のテキストの描画します。

テキストを描画するサンプル

01Paint paint = new Paint();
02paint.setTextSize(20);
03 
04// drawText(String text, float x, float y, Paint paint)の例
05paint.setColor(Color.RED);
06canvas.drawText("あいうえお", 10, 20, paint);
07 
08// drawText(String text, int start, int end, float x, float y, Paint
09// paint)の例
10paint.setColor(Color.GREEN);
11canvas.drawText("かきくけこ", 1, 4, 10, 40, paint);
12 
13// drawText(CharSequence text, int start, int end, float x, float y, Paint paint)の例
14paint.setColor(Color.CYAN);
15canvas.drawText(new StringBuffer("さしすせそ"), 1, 4, 10, 60, paint);
16 
17// drawText(char[] text, int index, int count, float x, float y, Paint paint)の例
18paint.setColor(Color.MAGENTA);
19canvas.drawText(new char[] { 'た', 'ち', 'つ', 'て', 'と' }, 1, 3, 10, 80, paint);
20 
21// drawTextOnPath(String text, Path path, float hOffset, float vOffset, Paint paint)の例
22paint.setColor(Color.WHITE);
23Path path = new Path();
24path.addCircle(70, 160, 50, Direction.CCW);
25canvas.drawTextOnPath("なにぬねの", path, 10, 20, paint);
26 
27// drawTextOnPath(char[] text, int index, int count, Path path, float hOffset, float vOffset, Paint paint)の例
28paint.setColor(Color.YELLOW);
29Path path2 = new Path();
30path2.addCircle(170, 70, 50, Direction.CW);
31canvas.drawTextOnPath(new char[] { 'ア', 'イ', 'ウ', 'エ', 'オ' }, 1, 3,
32        path2, 20, 10, paint);
33 
34// drawPosText(String text, float[] pos, Paint paint)の例
35paint.setColor(Color.GRAY);
36canvas.drawPosText("ｱｲｳｴｵ", new float[] { 10, 180, 30, 200, 50, 180,
37        70, 200, 90, 180 }, paint);
38 
39// drawPosText(char[] text, int index, int count, float[] pos, Paint paint)の例
40paint.setColor(Color.LTGRAY);
41canvas.drawPosText(new char[] { 'I', '・', '餓', '男' }, 1, 3,
42        new float[] { 180, 180, 200, 200, 220, 220 }, paint);

このプログラムを実行すると、以下のように表示されます。

テキストの描画(FontMetrics)

FontMetricsについては調べていませんが、FontMetricsを使う事で、いろいろなテキストを描画できるようです。

テキストの描画(FontMetrics) - Android Wiki-が参考になるようです。

Pathによる描画

Pathオブジェクトを使うと、複数の描画処理をPathオブジェクトに追加して、まとめて描画する事ができます。

Pathを描画するCanvasクラスのメソッドには、以下のものがあります。

void drawPath(Path path, Paint paint)

以下に、Pathオブジェクトを使った描画の例を示します。

Pathを描画するサンプル

01canvas.drawColor(Color.BLUE);
02 
03Path path = new Path();
04 
05path.addRect(new RectF(10, 40, 110, 140), Direction.CW);
06path.moveTo(10, 40);
07path.lineTo(40, 10);
08path.lineTo(140, 10);
09path.lineTo(140, 110);
10path.lineTo(110, 140);
11path.moveTo(110, 40);
12path.lineTo(140, 10);
13 
14Paint paint = new Paint();
15paint.setStrokeWidth(4);
16paint.setStyle(Paint.Style.STROKE);
17 
18paint.setColor(Color.GREEN);
19canvas.drawPath(path, paint);
20 
21path.offset(150, 0);
22paint.setColor(Color.RED);
23canvas.drawPath(path, paint);

このプログラムを実行すると、以下のように表示されます。

同じPathオブジェクトを、色と位置をかえて描画しています。

5行目のDirection.CWは、時計回りで描画する事を示し、Direction.CCWを指定すると、反時計回りとなります。

ここでは、どちらを指定しても、結果は同じです。

Pathには、他にもベジェ曲線などいろいろな処理をおこなうができます。

Pathについては、まだまだいろいろな機能がありそうなのだが、もう息切れしてしまったので、ここいら辺で打ち止めです。

参考URL

Android Developers
- リファレンス
  - Canvasクラス
  - Pathクラス
テキストの描画(FontMetrics) - Android Wiki-

Javaの参考書 ／ androidの参考書 ／ Android(ハードウエア)

Amazon.co.jp ウィジェット