AndroidのCanvas API詳細解説（その3）MatrixとdrawBitmapMesh

このセクションの概要:

Canvas の API ドキュメントには、次のようなメソッドがあります。drawBitmap (ビットマップビットマップ、 マトリックス マトリックス、ペイントペイント)

このマトリックスには大きな記事があります。ペイント API の ColorFilter の ColorMatrix カラーマトリックス (4 * 5 マトリックス) について説明しました。マトリックスの値を変更することで、色相、彩度などを変更できます。今日説明したマトリックスは、他の API と組み合わせて、グラフィックスやコンポーネントの変換を制御できます。たとえば、Canvas は行列変換の効果を実現するために上記のdrawBitmap を提供します。ゆっくり勉強していきましょう〜

公式 API ドキュメント:マトリックス

1. Matrix で一般的に使用されるいくつかの変換方法

setTranslate (float dx, float dy): 翻訳用の制御行列

setRotate (float 度、float px、float py): 回転、パラメータは次のとおりです: 回転角度、軸 (x、y)

setScale (float sx、float sy、float px、float py): スケーリング、パラメーターは次のとおりです: X 軸と Y 軸のスケーリング比、スケーリングの軸

setSkew (float kx, float ky): チルト (歪み)、パラメータは次のとおりです: X、Y 軸上のスケーリング

実は、Canvasの変形方法も基本的に同じで、Matrixに上記の変形を設定した後、CanvasのdrawBitmap()メソッドを呼び出してMatrixを呼び出すだけです~

2. マトリックスの使用例:

ランニング効果図：

コードの実装:

MyView.java：

/** 
 * 2015/11/11 0011 に Jay によって作成されました。 
 */ 
public class MyView extends View { 

    private Bitmap mBitmap; 
    プライベート行列行列 = new Matrix(); 
    プライベートフロートsx = 0.0f; //設置傾斜度
    private int width,height; //位图宽高
    private floatscale = 1.0f; //缩放率
    private intメソッド = 0; 

    public MyView(Context context) { 
        this(context, null); 
    public 

    MyView(Context context, AttributeSet attrs) { 
        super(context, attrs); 
        初期化（）; 
    super 
 
    MyView(Context context, AttributeSet attrs, int defStyleAttr) {
        (context, attrs, defStyleAttr); 
    プライベート

    void init() { 
        = BitmapFactory.decodeResource(getResources(), R.mipmap.img_meizi); 
        幅 = mBitmap.getWidth(); 
        高さ = mBitmap.getHeight(); 
    @Override 
    protected void onDraw(Canvas Canvas) { super.onDraw 

    ( 
        canvas); 
        スイッチ（メソッド）{
            ケース0：
                matrix.reset（）; 
                壊す; 
            ケース 1: 
                sx += 0.1; 
                マトリックス.setSkew(sx,0); 
                壊す; 
            ケース 2: 
                sx -= 0.1; 
                マトリックス.setSkew(sx,0);
                壊す; 
            ケース 3: 
                if(スケール < 2.0){
                    スケール += 0.1; 
                }
                マトリックス.setScale(スケール,スケール);
                ブレーク;
            ケース 4: 
                if(スケール > 0.5){
                    スケール -= 0.1; 
                }
                マトリックス.setScale(スケール,スケール);
                ブレーク; 
        } 
        //に従って元のビットマップとマトリックスに変換して新しい画像を作成します
        Bitmap bitmap = Bitmap.createBitmap(mBitmap,0,0,width,height,matrix,true); 
        Canvas.drawBitmap(bitmap,matrix,null); // 新しいビットマップを描画
    } 

    public void setMethod(int i){
        メソッド = i; 
        postInvalidate(); 
    }
}

レイアウトコード: activity_main.xml :

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent"> 

    <LinearLayout 
        android:id="@+id/ly_bar" " 
        android:layout_width="match_parent" 
        android:layout_height="64dp" 
        android:layout_alignParentBottom="true"> 

        <ボタン
            android:id="@+id/btn_reset" 
            android:layout_width="0dp" 
            android:layout_height="match_parent"
            アンドロイド:layout_weight="1"
            アンドロイド:text="重置" /> 
text="重置" /> 
        <Button 
            android:id="@+id/btn_left"
            android:layout_width="0dp" 
            android:layout_height="match_parent"
            android:layout_weight="1" 
            android:text="左倾" /> 

        <ボタン
            android:id="@+id/btn_right" 
            android:layout_width="0dp" 
            android:layout_height="match_parent" 
            android:layout_weight="1" 
            android:text="右倾" /> 

        <Button 
            android:id="@+id/btn_zoomin" 
            android:layout_width="0dp" 
            android:layout_height="match_parent" 
            android:layout_weight="1" 
            android:text="放大" /> 
            android:layout_weight="1"
text="ズームアウト" /> 
        <Button 
            android:id="@+id/btn_zoomout"
            android:layout_width="0dp" 
            android:layout_height="match_parent" 
            android:text="缩小" /> 
    </LinearLayout> 


    <com.jay.canvasdemo3.MyView 
        android:id="@+id/myView" 
        android:layout_width= "match_parent" 
        android:layout_height="match_parent" 
        android:layout_above="@id/ly_bar" /> 

</RelativeLayout>

MainActivity.java：

public class MainActivity extends AppCompatActivityimplemented View.OnClickListener{ 

    private Button btn_reset; 
    プライベートボタン btn_left; 
    プライベートボタン btn_right; 
    プライベートボタン btn_zoomin; 
    プライベートボタン btn_zoomout; 
    プライベート MyView myView; 

    @Override 
    protected void onCreate(Bundle SavedInstanceState) { 
        super.onCreate(savedInstanceState); 
        setContentView(R.layout.activity_main); 
        バインドビュー(); 
    private void 

    bindingViews() { 
        btn_reset = (ボタン) findViewById(R.id.btn_reset); 
        btn_left = (ボタン) findViewById(R.id.btn_left); 
        btn_right = (ボタン) findViewById(R.id.btn_right); 
        btn_zoomin = (ボタン) findViewById(R.id.btn_zoomin);
        btn_zoomout = (ボタン) findViewById(R.id.btn_zoomout); 
        myView = (MyView) findViewById(R.id.myView); 


        btn_reset.setOnClickListener(this); 
        btn_left.setOnClickListener(this); 
        btn_right.setOnClickListener(this); 
        btn_zoomin.setOnClickListener(this); 
        btn_zoomout.setOnClickListener(this); 

    @Override 
    public void onClick(View v) { 
        switch (v.getId()){ 
            case R.id.btn_reset: myView.setMethod 

    ( 
                0); 
                myView.setMethod(1); 
                壊す; 
            case R.id.btn_right: 
                myView.setMethod(2);
                壊す; 
            ケース R.id.btn_left:
                ブレーク; 
            case R.id.btn_zoomin: 
                myView.setMethod(3); 
                壊す; 
            case R.id.btn_zoomout: 
                myView.setMethod(4); 
                壊す; 
        } 
} 
    }

使い方はとても簡単なので説明は省きます〜

3.drawBitmapMesh により画像が歪む

API ドキュメントにもそのようなメソッドがあります: drawBitmapMesh (Bitmap bitmap, int MeshWidth, int MeshHeight, float[] verts, int vertOffset, int[] Colors, int colorOffset, Paint ペイント)

パラメータは順番に次のとおりです。

bitmap : 変形する必要がある元のビットマップ

MeshWidth / MeshHeight : 元のビットマップを水平/垂直に分割するグリッドの数

verts : (meshWidth+1)*(meshHeight+2) の長さの配列で、歪んだビットマップの各頂点 (グリッド線の交点) の位置を記録します。これは 1 次元の配列ですが、実際にはデータは (x0,y0)、(x1,y1)..(xN,Yn) の形式のデータであり、これらの配列要素はビットマップの歪み効果を制御します。

vertOffset : どの配列要素からビットマップを変形するかを制御します (verOffset 前のデータの歪み効果を無視します)。

コード例: