Canvasを変形させる
Canvas自体を変形させることで描画内容を変形します。
複数の変形を同時に行う場合、行列操作のように順番によって結果が異なるので注意をしてください。
|
変形する
|
|
void
|
translate(float dx, float dy)
|
Canvasを移動させる。
-
float dx:x方向の移動量を指定する。
-
float dy:y方向の移動量を指定する。
|
|
void
|
scale(float sx, float sy)
|
画面左上を基点としてCanvasを拡大・縮小させる。
-
float sx:x方向の拡大・縮小量を指定する。
-
float sy:y方向の拡大・縮小量を指定する。
|
|
void
|
scale(float sx, float sy, float px, float py)
|
任意の座標を基点としてCanvasを拡大・縮小させる。
-
float sx:x方向の拡大・縮小量を指定する。
-
float sy:y方向の拡大・縮小量を指定する。
-
float px:拡大・縮小の基点座標のxを指定する。
-
float py:拡大・縮小の基点座標のyを指定する。
|
|
void
|
rotate(float degrees)
|
画面左上を基点としてCanvasを回転させる。
-
float degrees:回転量を指定する。正の値を指定すると時計周り、負の値を指定すると反時計回りに回転する。
|
|
final void
|
rotate(float degrees, float px, float py)
|
任意の座標を基点としてCanvasを回転させる。
-
float degrees:回転量を指定する。正の値を指定すると時計周り、負の値を指定すると反時計回りに回転する。
-
float px:回転の基点座標のxを指定する。
-
float py:回転の基点座標のyを指定する。
|
|
void
|
skew(float sx, float sy)
|
Canvasを歪曲させる。
-
float sx:x軸の傾きを[x:0,y:0]と[x:0 ,sx*Canvasの高さ]を結ぶ傾きにする。
-
float sy:y軸の傾きを[x:0,y:0]と[x:0 ,sy*Canvasの幅]を結ぶ傾きにする。
|
使用例
実際にCanvasを変形してみましょう。
今回は独自Viewを定義しました。
確認するメソッドのコメントアウトを外して実行してください。
public class MyCanvasTransform extends View{
public MyCanvasTransform(Context context, AttributeSet attrs) {
super(context, attrs);
}
@Override
protected void onDraw(Canvas canvas) {
//描画に使用するBitmapを読み込む
Bitmap icLauncherBitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.ic_launcher);
int right = canvas.getWidth() - icLauncherBitmap.getWidth();
int bottom = canvas.getHeight() - icLauncherBitmap.getHeight();
/**
* x軸方向に100、y軸方向に100移動させる。
*/
canvas.translate(100 ,100);
/**
* x軸方向に2倍、y軸方向に0.5倍拡大させる。
*/
// canvas.scale(2,0.5f);
/**
* Canvas中心を基点として
* x軸方向に2倍、y軸方向に0.5倍拡大させる。
*/
//canvas.scale(2,0.5f,canvas.getWidth()/2 , canvas.getHeight()/2);
/**
* Canvas左上を基点に時計周りに5度回転する
*/
//canvas.rotate(5);
/**
* Canvas中心を基点に反時計周りに15度回転する
*/
//canvas.rotate(-15,right/2 , bottom/2);
/**
* Canvasのx軸とy軸の傾きを変更する。
*/
//canvas.skew(0f,0.5f);
canvas.drawColor(Color.BLACK);
/** 左上に画像を表示する。*/
canvas.drawBitmap(icLauncherBitmap,0,0, null);
/** 右上に画像を表示する。*/
canvas.drawBitmap(icLauncherBitmap , right,0, null);
/** 左下に画像を表示する。*/
canvas.drawBitmap(icLauncherBitmap,0, bottom, null);
/** 右下に画像を表示する。*/
canvas.drawBitmap(icLauncherBitmap,right,bottom, null);
/** 中心に画像を表示する。 */
canvas.drawBitmap(icLauncherBitmap,right/2,bottom/2, null);
}
}
