Android アプリ開発 「MATRIX」

Androidアプリの開発に役立つサンプル集



Matrix の基本「Translate」の使い方を知ろう(その2)

Matrix の Translate を知る

Matrix 関数の中に 「Translate」 というメソッドがあります。Translate を利用すると画像を任意の場所に移動することができますが、その使い方や使い道がよくわかりませんので、今回からその「Translate」について少しずつ調べてみることにします。

Translate は3種類ある

Translate には「setTranslate」「preTranslate」「postTranslate」の3種類があり、「移動する」という基本動作は同じですが、それぞれ微妙に動きが違います。

  • setTranslate・・・指定場所に移動する
  • preTranslate・・・あらかじめ移動する
  • postTranslate・・・現状に続けて移動する

と、簡単に説明するとこんな感じになるかとは思います。 

サンプルコード(MyView)

今回使うサンプルコード(オリジナルのView)です。動きは「画像を読み込んで表示する」だけの単純なものです。このコードを MainActivity で読み込んで表示させますので、レイアウトXMLは使いません。※Matrix の命令を記述するのはコード中の赤文字の部分になります。

public class MyView extends View {

//各オブジェクト・変数を準備
private Bitmap bitmap;
private BitmapFactory.Options options;
private Matrix matrix;
private Resources resources;

public MyView(Context context) {
super(context);

//リソース(drawable にある画像)にアクセスするための準備
resources = context.getResources();

//ビットマップを読み込む際のオプションを準備
options = new BitmapFactory.Options();
//スケーリングを無効にセット(原寸大表示にする)
options.inScaled = false;

//リソース(drawable)から画像を読み込んで、同時にオプションを適用
bitmap = BitmapFactory.decodeResource(resources, R.drawable.image, options);

//背景色をライトグレーにする
setBackgroundColor(Color.LTGRAY);
}

@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);

//matrix に新規のマトリックスを準備
matrix = new Matrix();

//ここに matrix の命令を記述
matrix.postTranslate(100,100);

//matrix を適用し画像を表示
canvas.drawBitmap(bitmap, matrix, null);
}

サンプルコード(MainActivity)

セットする View をレイアウトXML(activity_main)からオリジナルの「MyView」に書き換えますが、この時必ず頭に new を付けなければなりません。

public class MainActivity extends AppCompatActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);

//オリジナルの ViewMyView.class)をセットして使用
setContentView(new MyView(getBaseContext()));
}
}

調査 「複合パターンの動作」

まずは「setTranslate」と「preTranslate」を組み合わせた場合の動作です。

matrix.setTranslate(100,100);
matrix.preTranslate(200,200);

<結果>

どん兵衛の画像が左上の角から X方向に300px、Y方向に300px 移動しました。「preTranslate」は、”あらかじめ移動する”という命令なので、preTranslate であらかじめ X方向に100px、Y方向に100px 移動した後、そこを基準点にして setTranslate が実行され、最終的に、X方向に300px、Y方向に300px の位置に移動したと考えられます。 

f:id:vw-dsg:20171218103513p:plain

次に「setTranslate」と「postTranslate」を組み合わせた場合の動作です。

matrix.setTranslate(100,100);
matrix.postTranslate(200,200);

<結果>

「setTranslate」と「preTranslate」の組み合わせと同じように、どん兵衛の画像が左上の角から X方向に300px、Y方向に300px 移動しました。

f:id:vw-dsg:20171218103513p:plain

次に「preTranslate」と「postTranslate」を組み合わせた場合の動作です

matrix.preTranslate(100,100);
matrix.postTranslate(200,200);

<結果>

こちらも前の例と同じ結果になりました。preTranslate と postTranslate の組み合わせは、どちらが先でも継続して移動するようです。

f:id:vw-dsg:20171218103513p:plain

次は「setTranslate」と「preTranslate」を逆の順番で組み合わせた場合の動作です。

matrix.preTranslate(100,100);
matrix.setTranslate(200,200);

<結果>

今度は、どん兵衛の画像が「setTranslate」で指定した左上の角から X方向に200px、Y方向に200px の位置に移動しました。これは、あらかじめ移動する preTranslate でX方向に100px、Y方向に100px 移動した後に、setTranslate で置き換えられてしまったと考えられます。

f:id:vw-dsg:20171220231133p:plain

次は「postTranslate」と「setTranslate」の組み合わせです。

matrix.postTranslate(100,100);
matrix.setTranslate(200,200); 

<結果>

結果は、前回同様「setTranslate」で指定した左上の角から X方向に200px、Y方向に200px の位置に移動しました。 

f:id:vw-dsg:20171220231133p:plain

最後は「postTranslate」と「preTranslate」の組み合わせです。

matrix.postTranslate(100,100);
matrix.preTranslate(200,200); 

<結果>

どん兵衛の画像が「postTranslate」と「preTranslate」の数値を足した、左上の角から X方向に300px、Y方向に300px の位置に移動しました。 preTranslate と postTranslate の組み合わせは、どちらが先でも継続して移動するようです。

f:id:vw-dsg:20171218103513p:plain

今回のまとめ

今回は「setTranslate」「preTranslate」「postTranslate」をそれぞれ一つずつ組み合わせてみましたが、これだけでは Matrix の正しい使い方や使い道を知ることはできないようです。

次回「その3」ではこの3つの命令をもう少し複雑に組み合わせて、その動きを調べてみたいと思います。

END