【AndroidのCanvasに向き合おう】線を描こう

Pocket

[`yahoo` not found]

Canvasに線を引こう

Canvasに線を引くには4つの値(始端x座標,始端y座標,終端x座標,終端y座標)を決める必要があります。また、線の種類はPaintを使います。

線を描画する
void	drawLine(float startX, float startY, float stopX, float stopY, Paint paint)	指定した始端座標と終端座標に線を描画する。 float startX:線の始端座標のx座標を指定する。 float startY:線の始端座標のy座標を指定する。 float stopX:線の終端座標のx座標を指定する。 float stopY:線の終端座標のy座標を指定する。 Paint paint:半径や色、形を指定する。
void	drawLines(float[] pts, Paint paint)	指定した座標配列を使い線を描画する。 float[] pts:左上を原点として線の描画に使うx,y座標を指定する。配列は[start_x0,start_y0,stop_x0,stop_y0, start_x1,start_y1,stop_x1,stop_y1,…]のように座標を指定する。 Paint paint:半径や色、形を指定する。
void	drawLines(float[] pts, int offset, int count, Paint paint)	指定した座標配列を使い線を描画する。 float[] pts:左上を原点として線の描画に使うx,y座標を指定する。 int offset:座標配列内の描画に使う開始要素を指定する。 ptsの要素数を超える値や負数を指定するとエラーになります。 int count:座標配列内の描画に使う開始要素からの要素数を指定する。 offsetとの和がptsの要素数を超える値や負数を指定するとエラーになります。 Paint paint:半径や色、形を指定する。

使用例

線を描画するようなカスタムViewを作りました。

public class MyCanvasLines extends View{
public MyCanvasLines(Context context, AttributeSet attrs) {
super(context, attrs);
}
@Override
protected void onDraw(Canvas canvas) {
Paint paint = new Paint();
//直径を50に設定
paint.setStrokeWidth(30);
//形を正方形に設定
paint.setStrokeCap(Paint.Cap.SQUARE);
//色を赤色に設定
paint.setColor(Color.RED);
//始点座標[x:100,y:100]-終点座標[x:200,y:100]まで線を描画
canvas.drawLine(100,100,200,100, paint);
//色を緑色に設定
paint.setColor(Color.GREEN);
//形を丸に設定
paint.setStrokeCap(Paint.Cap.ROUND);
/**
* 2本の線を描画する
* 線1 始点座標[x:200,y:200]-終点座標[x:300,y:200]
* 線2 始点座標[x:200,y:300]-終点座標[x:300,y:300]
*/
canvas.drawLines(new float[]{200f,200f,300f,200f,200f,300f,300f,300f},paint);
/**
* 座標配列を宣言
* 要素番号0~19
*/
float[] pts = new float[]{
300f,400f,900f,400f,
300f,500f,900f,500f,
300f,600f,900f,600f,
300f,700f,900f,700f,
300f,800f,900f,800f
};
//色を青色に設定
paint.setColor(Color.BLUE);
/**
* 座標配列のすべての値を使い線を描画する。
* 5本の線を描画する
* 線1 始点座標[x:300,y:400]-終点座標[x:900,y:400]
* 線2 始点座標[x:300,y:500]-終点座標[x:900,y:500]
* 線3 始点座標[x:300,y:600]-終点座標[x:900,y:600]
* 線4 始点座標[x:300,y:700]-終点座標[x:900,y:700]
* 線5 始点座標[x:300,y:800]-終点座標[x:900,y:800]
*/
canvas.drawLines(pts,0,pts.length,paint);
//色を黒色に設定
paint.setColor(Color.BLACK);
/**
* 座標配列のすべての値を使い線を描画する。
* 5本の線を描画する
* 線1 始点座標[x:400,y:900]-終点座標[x:400,y:300]
* 線2 始点座標[x:500,y:900]-終点座標[x:500,y:300]
* 線3 始点座標[x:600,y:900]-終点座標[x:600,y:300]
* 線4 始点座標[x:700,y:900]-終点座標[x:700,y:300]
* 線5 始点座標[x:800,y:900]-終点座標[x:800,?](*値が不足し座標が作れないため描画されない)
*/
canvas.drawLines(pts,1,pts.length - 1,paint);
}
}