Canvasに四角、角丸四角を描こう
四角形を書きましょう。
| 四角形を描画する |
| void |
drawRect(float left, float top, float right, float bottom, Paint paint) |
四角形の左上と右下の座標を指定して描画する。
- float left:四角形の左上のx座標を指定する。
- float top:四角形の左上のy座標を指定する。
- float right:四角形の右下のx座標を指定する。
- float bottom:四角形の右下のy座標を指定する。
- Paint paint:色、塗りつぶし方法を指定する。
|
| void |
drawRect(Rect rect, Paint paint) |
Rectを使って位置と幅高さを指定し四角形を描画する。
|
| void |
drawRect(RectF rect, Paint paint) |
RectFを使って位置と幅高さを指定し四角形を描画する。
|
| void |
drawRoundRect(float left, float top, float right, float bottom, float rx, float ry, Paint paint) |
角丸四角形の左上と右下の座標を指定し、x軸方向の径とy軸方向の径を指定して描画する。
- float left:四角形の左上のx座標を指定する。
- float top:四角形の左上のy座標を指定する。
- float right:四角形の右下のx座標を指定する。
- float bottom:四角形の右下のy座標を指定する。
- float rx:角のx軸方向の径を指定する。
- float ry:角のy軸方向の径を指定する。
- Paint paint:色、塗りつぶし方法を指定する。
|
| void |
drawRoundRect(RectF rect, float rx, float ry, Paint paint) |
RectFを使って位置と幅高さを指定しx軸方向の径とy軸方向の径を指定し角丸四角形を描画する。
|
使用例
四角形・角丸四角形を描画するようなカスタムViewを作りました。
public class MyCanvasRects extends View{
public MyCanvasRects(Context context, AttributeSet attrs) {
super(context, attrs);
}
@Override
protected void onDraw(Canvas canvas) {
Paint paint = new Paint();
//直径を10に設定
paint.setStrokeWidth(10);
//枠線だけを描画する
paint.setStyle(Paint.Style.STROKE);
//色を赤色に設定
paint.setColor(Color.RED);
/**
* 四角形を定義する
* ・左上座標[x:100,y:100]
* ・右下座標[x:200,y:200]
*/
canvas.drawRect(100,100,200,200, paint);
//枠内を塗りつぶすを描画する
paint.setStyle(Paint.Style.FILL);
//色を緑色に設定
paint.setColor(Color.GREEN);
/**
* 四角形を定義する
* ・左上座標[x:300,y:100]
* ・右下座標[x:400,y:200]
*/
Rect rect = new Rect(300,100,400,200);
canvas.drawRect(rect , paint);
//色を青色に設定
paint.setColor(Color.BLUE);
/**
* 四角形を定義する
* ・左上座標[x:500,y:100]
* ・右下座標[x:600,y:200]
*/
RectF rectF = new RectF(500,100,600,200);
canvas.drawRect(rectF , paint);
//色を黄色に設定
paint.setColor(Color.YELLOW);
/**
* 四角形を定義する
* ・左上座標[x:100,y:300]
* ・右下座標[x:200,y:400]
* ・x軸方向の半径を20
* ・y軸方向の半径を20
*/
canvas.drawRoundRect(100,300,200,400,20,20,paint);
//色を青色に設定
paint.setColor(Color.BLACK);
/**
* 四角形を定義する
* ・左上座標[x:300,y:300]
* ・右下座標[x:400,y:400]
*/
RectF roundRectF = new RectF(300,300,400,400);
/**
* ・x軸方向の半径を50
* ・y軸方向の半径を20
*/
canvas.drawRoundRect(roundRectF , 50 , 20 ,paint);
}
}
