【AndroidのCanvasに向き合おう】 描画範囲を制限する
Canvasの描画範囲を制限しよう
Canvasの描画範囲を制限することで余分な領域に描画が行われなくなります。また、下記のメソッドを使用して狭くした描画範囲は下記のメソッドで広げることはできません。
| クリッピングして描画範囲を制限する | ||
| boolean | clipRect(int left, int top, int right, int bottom) |
四角形の左上と右下の座標を指定してクリッピングする。 座標は対象のオリジナルCanvasの左上を原点とします。 ただし、クリップは現在のクリップされた範囲内で行われる。
|
| boolean | clipRect(float left, float top, float right, float bottom) |
四角形の左上と右下の座標を指定してクリッピングする。 座標は対象のオリジナルCanvasの左上を原点とします。 ただし、クリップは現在のクリップされた範囲内で行われる。
|
| boolean | clipRect(Rect rect) |
Rectを使用してクリッピングする。 座標は対象のオリジナルCanvasの左上を原点とします。 ただし、クリップは現在のクリップされた範囲内で行われる。
|
| boolean | clipRect(RectF rect) |
RectFを使用してクリッピングする。 座標は対象のオリジナルCanvasの左上を原点とします。 ただし、クリップは現在のクリップされた範囲内で行われる。
|
| boolean | clipPath(Path path) |
Pathを使用してクリッピングする。 座標は対象のオリジナルCanvasの左上を原点とします。 ただし、クリップは現在のクリップされた範囲内で行われる。
|
| boolean | clipRegion(Region region) |
Regionを使用してクリッピングする。 座標は対象のオリジナルCanvasの左上を原点とします。 ただし、クリップは現在のクリップされた範囲内で行われる。 API level 21で非推奨になりました。 clipRect(Rect)を代わりに使用しましょう。
|
使用例
実際にcanvasをクリッピングしてみましょう。今回は独自Viewを定義しました。
public class MyCanvasClip extends View{
public MyCanvasClip(Context context, AttributeSet attrs) {
super(context, attrs);
}
@Override
protected void onDraw(Canvas canvas) {
/**
* canvasの描画範囲を下記の矩形に制限する。
* 左上座標 [x:0,y:0]
* 右下座標 [x:canvas.getWidth(),y:canvas.getHeight()]
*/
int top = 0;
int left = 0;
int bottom = canvas.getHeight();
int right = canvas.getWidth();
final int DIFF = 100;
canvas.clipRect(0,0,right,bottom);
/**
* 黒色に塗りつぶす
*/
canvas.drawColor(Color.BLACK);
/**
* canvasの描画範囲を下記の矩形に制限する。
* 左上座標 [x:100,y:100]
* 右下座標 [x:canvas.getWidth()-100,y:canvas.getHeight()-100]
*/
top += DIFF;
left += DIFF;
right -= DIFF;
bottom -= DIFF;
canvas.clipRect(top,left,right,bottom);
/**
* 赤色に塗りつぶす
*/
canvas.drawColor(Color.RED);
/**
* canvasの描画範囲を下記の矩形に制限する。
* 左上座標 [x:200.5f,y:200.5f]
* 右下座標 [x:canvas.getWidth()-200.5f,y:canvas.getHeight()-200.5f]
*/
top += DIFF;
left += DIFF;
right -= DIFF;
bottom -= DIFF;
canvas.clipRect(top+0.5f,left+0.5f,right-0.5f,bottom-0.5f);
/**
* マゼンダ色に塗りつぶす
*/
canvas.drawColor(Color.MAGENTA);
/**
* canvasの描画範囲を下記の矩形に制限する。
* 左上座標 [x:300,y:300]
* 右下座標 [x:canvas.getWidth()-300,y:canvas.getHeight()-300]
*/
top += DIFF;
left += DIFF;
right -= DIFF;
bottom -= DIFF;
Rect rect = new Rect(top,left,right,bottom);
canvas.clipRect(rect);
/**
* 緑色に塗りつぶす
*/
canvas.drawColor(Color.GREEN);
/**
* canvasの描画範囲を下記の矩形に制限する。
* 左上座標 [x:400.5f,y:400.5f]
* 右下座標 [x:canvas.getWidth()-400.5f,y:canvas.getHeight()-400.5f]
*/
top += DIFF;
left += DIFF;
right -= DIFF;
bottom -= DIFF;
RectF rectF = new RectF(top+0.5f,left+0.5f,right-0.5f,bottom-0.5f);
canvas.clipRect(rectF);
/**
* 青色に塗りつぶす
*/
canvas.drawColor(Color.BLUE);
/**
* canvasの描画範囲を下記の矩形に制限する。
* 左上座標 [x:500,y:500]
* 右下座標 [x:canvas.getWidth()-500,y:canvas.getHeight()-500]
*/
top += DIFF;
left += DIFF;
right -= DIFF;
bottom -= DIFF;
Region region = new Region();
region.set(top,left,right,bottom);
canvas.clipRegion(region);
/**
* 黄色に塗りつぶす
*/
canvas.drawColor(Color.YELLOW);
/**
* canvasの描画範囲を下記の円に制限する。
* 中心座標 [x:canvas.getWidth()/2,y:canvas.getHeight()/2]
* 半径 100
*/
Path path = new Path();
path.addCircle(canvas.getWidth()/2 , canvas.getHeight()/2 , 100 ,Path.Direction.CW);
canvas.clipPath(path);
/**
* 白色に塗りつぶす
*/
canvas.drawColor(Color.WHITE);
}
}