[Android SDK] 描画の基礎

Androidの描画の基礎として、Canvas、Paintクラスの使い方をまとめました。

座標系

描画では描画する位置を決めるために座標を使います。
画面内の座標は、右方向にX、下方向にYとなっていて、学校で習う数学とは違いY方向が上下反対になっているので気をつけよう。
円や弧を描画するときの角度指定も反対方向になっています。

描画パターン

Padintクラスで描画設定を行い、Canvasクラスで描画を行います。
Viewクラスの"onDraw"メソッドをオーバーライドしてView内を描画する。

@Override
protected void onDraw(Canvas c) {
 /* ここに描画命令を書く */
}

画面全体を塗る

Canvasクラスの"drawColor"メソッドを使う。

@Override
protected void onDraw(Canvas c) {
 c.drawColor(Color.WHITE);
}

四角形を描画する

Paintで描画する際の色を変更し、Canvasクラスの"drawRect"メソッドで2点の座標を指定して四角形の描画を行う。

@Override
protected void onDraw(Canvas c) {
 c.drawColor(Color.WHITE);
 
 Paint p = new Paint();
 // 描画色を指定する
 p.setColor(Color.BLUE);
 // 描画する領域を指定する
 RectF rect = new RectF();
 rect.left   = 100.0f;
 rect.top    = 200.0f;
 rect.right  = 300.0f;
 rect.bottom = 400.0f;
 // 四角形を描画する
 c.drawRect(rect, p);
}

他の引数指定の方法として次がある。

void drawRect(float left, float top, float right, float bottom, Paint paint)
void drawRect(RectF rect, Paint paint)
void drawRect(Rect r, Paint paint)

楕円を描画する

Paintで描画する際の色を変更し、Canvasクラスの"drawOval"メソッドで2点の座標を指定して楕円の描画を行う。

@Override
protected void onDraw(Canvas c) {
 c.drawColor(Color.WHITE);
 
 Paint p = new Paint();
 // 描画色を指定する
 p.setColor(Color.BLUE);
 // 描画する領域を指定する
 RectF rect = new RectF();
 rect.left   = 100.0f;
 rect.top    = 200.0f;
 rect.right  = 300.0f;
 rect.bottom = 400.0f;
 // 楕円を描画する
 c.drawOval(rect, p);
}

角丸の四角形を描画する

Paintで描画する際の色を変更し、Canvasクラスの"drawRoundRect"メソッドで2点の座標を指定して、あと角丸の大きさを幅、高さも指定して描画する。

@Override
protected void onDraw(Canvas c) {
 c.drawColor(Color.WHITE);
 
 Paint p = new Paint();
 // 描画色を指定する
 p.setColor(Color.BLUE);
 // 描画する座標を指定する
 RectF rect = new RectF();
 rect.left   = 100.0f;
 rect.top    = 200.0f;
 rect.right  = 400.0f;
 rect.bottom = 300.0f;
 // 角丸の四角形を描画する
 float rx = 40.0f, ry = 80.0f;
 c.drawRoundRect(rect, rx, ry, p);
}

円を描画する

Paintで描画する際の色を変更し、Canvasクラスの"drawCircle"メソッドで中心座標、半径を指定して描画する。

@Override
protected void onDraw(Canvas c) {
 c.drawColor(Color.WHITE);
 
 Paint p = new Paint();
 // 描画色を指定する
 p.setColor(Color.BLUE);
 // 円を描画する
 float cx = 200.0f, cy = 200.0f, radius = 150.0f;
 c.drawCircle(cx, cy, raius, p);
}

扇形を描画する

Paintで描画する際の色を変更し、Canvasクラスの"drawArc"メソッドで描画領域、扇形の基点角度、描画する大きさ(角度)を指定して描画する。
※角度はラジアン角ではなく、360角度で指定する。

@Override
protected void onDraw(Canvas c) {
 c.drawColor(Color.WHITE);
 
 Paint p = new Paint();
 // 描画色を指定する
 p.setColor(Color.BLUE);
 // 描画する領域を指定する
 RectF rect = new RectF();
 rect.left   = 100.0f;
 rect.top    = 200.0f;
 rect.right  = 300.0f;
 rect.bottom = 400.0f;
 // 扇形を描画する
 float startAngle = 45.0f, sweepAngle = 90.0f;
 boolean useCenter = false;
 c.drawArc(rect, startAngle, sweepAngle, useCenter, p);
}