Canvasに画像を描画しよう
|
画像を表示する
|
|
void
|
drawBitmap(Bitmap bitmap, float left, float top, Paint paint)
|
画像の左上を指定して画像を描画する。
|
|
void
|
drawBitmap(Bitmap bitmap, Rect src, Rect dst, Paint paint)
|
Bitmapから描画する範囲を指定し、Canvas上に描画する。
|
|
void
|
drawBitmap(Bitmap bitmap, Rect src, RectF dst, Paint paint)
|
Bitmapから描画する範囲を指定し、Canvas上に描画する。
|
|
void
|
drawBitmap(int[] colors, int offset, int stride, int x, int y, int width, int height, boolean hasAlpha, Paint paint)
|
色配列を指定し、Canvas上に描画する。
API level 21で非推奨になりました。
-
int[] colors:描画する色配列、一要素が1ピクセルになります。
-
int offset:colorsの開始要素を指定する。
-
int stride:colorsの中で一行に何個の要素が使われるかを指定する。
widthよりも大きい値を指定する必要があります。
-
int x:color配列の描画開始x座標を指定する。
-
int y:color配列の描画開始y座標を指定する。
-
int width:color配列の描画する幅を指定する。
-
int height:color配列の描画する高さを指定する。
-
boolean hasAlpha:color配列の値がalpha値を持つかを指定する。
falseの場合はalpha値は無視され0xFFがalpha値として使用される。
-
Paint paint:nullを指定する。
|
|
void
|
drawBitmap(int[] colors, int offset, int stride, float x, float y, int width, int height, boolean hasAlpha, Paint paint)
|
色配列を指定し、Canvas上に描画する。
API level 21で非推奨になりました。
-
int[] colors:描画する色配列、一要素が1ピクセルになります。
-
int offset:colorsの開始要素を指定する。
-
int stride:colorsの中で一行に何個の要素が使われるかを指定する。
widthよりも大きい値を指定する必要があります。
-
float x:color配列の描画開始x座標を指定する。
-
float y:color配列の描画開始y座標を指定する。
-
int width:color配列の描画する幅を指定する。
-
int height:color配列の描画する高さを指定する。
-
boolean hasAlpha:color配列の値がalpha値を持つかを指定する。
falseの場合はalpha値は無視され0xFFがalpha値として使用される。
-
Paint paint:nullを指定する。
|
|
void
|
drawBitmap(Bitmap bitmap, Matrix matrix, Paint paint)
|
Bitmapを描画する方法を行列で指定し、Canvas上に描画する。
|
|
void
|
drawBitmapMesh(Bitmap bitmap, int meshWidth, int meshHeight, float[] verts, int vertOffset, int[] colors, int colorOffset, Paint paint)
|
Bitmapを任意の縦線(左右端を含む)と横線(左右端を含む)で分割し、その縦横の線の交点座標を決めます。
交点座標に対応するCanvas上の任意の座標を配列(メッシュ座標)で指定してCanvas上に描画する。
-
Bitmap bitmap:Canvasに描画する画像
-
int meshWidth:横方向の分割数を指定する。
-
int meshHeight:縦方向の分割数を指定する。
-
float[] verts:Canvas上の座標配列を指定する、 要素数は(meshWidth+1) * (meshHeight+1) * 2 + vertOffsetになる。
-
int vertOffset:vertsで使用する開始要素を指定する。
-
int[] colors:bitmapの色に乗算する色配列を指定する、大抵の場合はnullを指定する。
要素数は(meshWidth+1) * (meshHeight+1) + colorOffsetになる。
-
int colorOffset:色配列の使用開始要素を指定する。
-
Paint paint:nullを指定する。
|
使用例
実際にcanvasを描画してみましょう。
今回も独自Viewを定義しました。
public class MyCanvasBitmap extends View{
public MyCanvasBitmap(Context context, AttributeSet attrs) {
super(context, attrs);
}
@Override
protected void onDraw(Canvas canvas) {
//描画に使用するBitmapを読み込む
Bitmap icLauncherBitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.ic_launcher);
//座標[x:0,y:0]の位置に画像を描画する
canvas.drawBitmap(icLauncherBitmap,0,0,null);
int width = icLauncherBitmap.getWidth();
int height = icLauncherBitmap.getHeight();
/**
* Bitmapを下記の条件で切り取る。
* 左上座標[x:Bitmapの幅の1/4,y:Bitmapの高さの1/4]
* 右下座標[幅:Bitmapの幅の3/4,y:高さ:Bitmapの高さの3/4
*/
Rect src = new Rect(width/4,height/4,width/4*3,height/4*3);
/**
* Bitmapを描画先をRectを使って指定をする。
* 左上座標[x:0,y:200]
* 右下座標[x:200,y:400]
*/
Rect dst = new Rect(0,200,200,400);
canvas.drawBitmap(icLauncherBitmap,src,dst,null);
/**
* Bitmapを描画先をRectFを使って指定をする。
* 左上座標[x:0.5f,y:500.5f]
* 右下座標[x:500.5f,y:1000.5f]
*/
RectF dstF = new RectF(0.5f,500.5f,500.5f,1000.5f);
canvas.drawBitmap(icLauncherBitmap,src,dstF,null);
/**
* 幅:100
* 高さ:100
* 一行に使用する色配列内の要素数:200
*/
int widthBitmap = 100;
int heightBitmap = 100;
int stride = 200;
/**
* 色配列:要素数stide*heightBitmap
* 要素の前半分は赤色、後半分は青色とする。
*/
int[] colors = new int[stride * heightBitmap];
Random random = new Random();
for (int i = 0 ; i < colors.length ; i++) {
if( i > colors.length / 2) {
colors[i] = Color.BLUE;
} else {
colors[i] = Color.RED;
}
}
/**
* 下記の位置に描画する。
* 左上座標[x:0,y:1200]
* 幅:100
* 高さ:100
*/
canvas.drawBitmap(colors,0,stride,0,1200,widthBitmap,heightBitmap,true,null);
canvas.drawBitmap(colors,0,stride,0,1300.5f,widthBitmap,heightBitmap,true,null);
//行列を作成する。
Matrix matrix = new Matrix();
//x方向に2倍拡大する,y方向に0.5倍に縮小する。
matrix.postScale(2,0.5f);
//Bitmapの中央を起点に90度回転する。
matrix.postRotate(90,icLauncherBitmap.getWidth() /2 , icLauncherBitmap.getHeight()/2);
//x方向に50,y方向に1500移動する。
matrix.postTranslate(50,1500);
/**
* 下記の内容でBitmapを描画する。
* x方向に2倍拡大する,y方向に0.5倍に縮小する。
* Bitmapの中央を起点に90度回転する。
* x方向に50,y方向に1500移動する。
*/
canvas.drawBitmap(icLauncherBitmap , matrix , null);
/**
* メッシュ座標配列を作成する。
* [x:600,y:0]//Bitmapの左上の描画座標
* [x:800,y:0]//Bitmapの上端中心の描画座標
* [x:1000,y:0]//Bitmapの右上の描画座標
* [x:800,y:200]//Bitmapの左端中心の描画座標
* [x:1000,y:200]//Bitmapの中心の描画座標
* [x:1200,y:200]//Bitmapの右端中心の描画座標
* [x:1000,y:400]//Bitmapの左下の描画座標
* [x:1200,y:400]//Bitmapの下端中心の描画座標
* [x:1400,y:400]//Bitmapの右下の描画座標
*/
final int MESH_WIDTH = 2;
final int MESH_HEIGHT = 2;
float[] verts = new float[]{
600,0,//x0,y0
800,0,//x1,y0
1000,0,//x2,y0
800,200,//x0,y1
1000,200,//x1,y1
1200,200,//x2,y1
1000,400,//x0,y2
1200,400,//x1,y2
1400,400,//x2,y2
};
/**
* Bitmapをメッシュ配列座標に合わせて描画する。
* また、同時に色を乗算する色を指定する。
*/
canvas.drawBitmapMesh(
icLauncherBitmap,
MESH_WIDTH, MESH_HEIGHT,
verts,
0,
colors,
0,
null
);
}
}
