本節(jié)引言：

在Canvas的API文檔中，我們看到這樣一個(gè)方法：drawBitmap(Bitmap bitmap, Matrix matrix, Paint paint)

這個(gè)Matrix可是有大文章的，前面我們?cè)趯W(xué)Paint的API中的ColorFilter中曾講過(guò)ColorMatrix 顏色矩陣，一個(gè)4 * 5 的矩陣，我們可以通過(guò)修改矩陣值來(lái)修改色調(diào)，飽和度等！ 而今天講的這個(gè)Matrix可以結(jié)合其他API來(lái)控制圖形，組件的變換。比如Canvas就提供了上面的 這個(gè)drawBitmap來(lái)實(shí)現(xiàn)矩陣變換的效果！下面我們來(lái)慢慢研究這個(gè)東東~

官方API文檔：Matrix

1.Matrix中的幾個(gè)常用的變換方法

• setTranslate(float dx, float dy)：控制Matrix進(jìn)行平移
• setRotate(float degrees, float px, float py)：旋轉(zhuǎn)，參數(shù)依次是:旋轉(zhuǎn)角度，軸心(x,y)
• setScale(float sx, float sy, float px, float py):縮放， 參數(shù)依次是：X，Y軸上的縮放比例；縮放的軸心
• setSkew(float kx, float ky)：傾斜(扭曲)，參數(shù)依次是：X，Y軸上的縮放比例

其實(shí)和Canvas變換的方法基本一致，在為Matrix設(shè)置了上面的變換后，調(diào)用Canvas的 drawBitmap()方法調(diào)用矩陣就好~

2.Matrix使用示例：

運(yùn)行效果圖：

代碼實(shí)現(xiàn)：

MyView.java：

/**
 * Created by Jay on 2015/11/11 0011.
 */
public class MyView extends View {

    private Bitmap mBitmap;
    private Matrix matrix = new Matrix();
    private float sx = 0.0f;          //設(shè)置傾斜度
    private int width,height;         //位圖寬高
    private float scale = 1.0f;       //縮放比例
    private int method = 0;

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

    public MyView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public MyView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    private void init() {
        mBitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.img_meizi);
        width = mBitmap.getWidth();
        height = mBitmap.getHeight();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        switch (method){
            case 0:
                matrix.reset();
                break;
            case 1:
                sx += 0.1;
                matrix.setSkew(sx,0);
                break;
            case 2:
                sx -= 0.1;
                matrix.setSkew(sx,0);
                break;
            case 3:
                if(scale  0.5){
                    scale -= 0.1;
                }
                matrix.setScale(scale,scale);
                break;
        }
        //根據(jù)原始位圖與Matrix創(chuàng)建新圖片
        Bitmap bitmap = Bitmap.createBitmap(mBitmap,0,0,width,height,matrix,true);
        canvas.drawBitmap(bitmap,matrix,null);    //繪制新位圖
    }

    public void setMethod(int i){
        method = 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">

        <Button
            android:id="@+id/btn_reset"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="重置" />

        <Button
            android:id="@+id/btn_left"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="左傾" />

        <Button
            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="放大" />

        <Button
            android:id="@+id/btn_zoomout"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            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" />

MainActivity.java：

public class MainActivity extends AppCompatActivity implements View.OnClickListener{

    private Button btn_reset;
    private Button btn_left;
    private Button btn_right;
    private Button btn_zoomin;
    private Button btn_zoomout;
    private MyView myView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        bindViews();
    }

    private void bindViews() {
        btn_reset = (Button) findViewById(R.id.btn_reset);
        btn_left = (Button) findViewById(R.id.btn_left);
        btn_right = (Button) findViewById(R.id.btn_right);
        btn_zoomin = (Button) findViewById(R.id.btn_zoomin);
        btn_zoomout = (Button) 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);
                break;
            case R.id.btn_left:
                myView.setMethod(1);
                break;
            case R.id.btn_right:
                myView.setMethod(2);
                break;
            case R.id.btn_zoomin:
                myView.setMethod(3);
                break;
            case R.id.btn_zoomout:
                myView.setMethod(4);
                break;
        }
    }
}

用法非常簡(jiǎn)單，就不解釋了~

3.drawBitmapMash扭曲圖像

在API文檔中還有這樣一個(gè)方法：drawBitmapMesh(Bitmap bitmap, int meshWidth, int meshHeight, float[] verts, int vertOffset, int[] colors, int colorOffset, Paint paint)

參數(shù)依次是：

bitmap：需要扭曲的原位圖

meshWidth/meshHeight：在橫/縱向上把原位圖劃分為多少格

verts：長(zhǎng)度為(meshWidth+1)*(meshHeight+2)的數(shù)組，他記錄了扭曲后的位圖各頂點(diǎn)(網(wǎng)格線交點(diǎn)) 位置，雖然他是一個(gè)一維數(shù)組，但是實(shí)際上它記錄的數(shù)據(jù)是形如(x0,y0)，(x1,y1)..(xN,Yn)格式的數(shù)據(jù)， 這些數(shù)組元素控制對(duì)bitmap位圖的扭曲效果

vertOffset：控制verts數(shù)組從第幾個(gè)數(shù)組元素開(kāi)始對(duì)bitmap進(jìn)行扭曲(忽略verOffset之前數(shù)據(jù) 的扭曲效果)

代碼示例：

運(yùn)行效果圖：

代碼實(shí)現(xiàn)：

/**
 * Created by Jay on 2015/11/11 0011.
 */
public class MyView extends View {

    //將水平和豎直方向上都劃分為20格
    private final int WIDTH = 20;
    private final int HEIGHT = 20;
    private final int COUNT = (WIDTH + 1) * (HEIGHT + 1);  //記錄該圖片包含21*21個(gè)點(diǎn)
    private final float[] verts = new float[COUNT * 2];    //扭曲前21*21個(gè)點(diǎn)的坐標(biāo)
    private final float[] orig = new float[COUNT * 2];    //扭曲后21*21個(gè)點(diǎn)的坐標(biāo)
    private Bitmap mBitmap;
    private float bH,bW;


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

    public MyView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public MyView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    private void init() {
        mBitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.img_wuliao);
        bH = mBitmap.getWidth();
        bW = mBitmap.getHeight();
        int index = 0;
        //初始化orig和verts數(shù)組。
        for (int y = 0; y <= HEIGHT; y++)
        {
            float fy = bH * y / HEIGHT;
            for (int x = 0; x <= WIDTH; x++)
            {
                float fx = bW * x / WIDTH;
                orig[index * 2 + 0] = verts[index * 2 + 0] = fx;
                orig[index * 2 + 1] = verts[index * 2 + 1] = fy;
                index += 1;
            }
        }
        //設(shè)置背景色
        setBackgroundColor(Color.WHITE);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        canvas.drawBitmapMesh(mBitmap, WIDTH, HEIGHT, verts
                , 0, null, 0, null);
    }

    //工具方法，用于根據(jù)觸摸事件的位置計(jì)算verts數(shù)組里各元素的值
    private void warp(float cx, float cy)
    {
        for (int i = 0; i = 1)
            {
                verts[i + 0] = cx;
                verts[i + 1] = cy;
            }
            else
            {
                //控制各頂點(diǎn)向觸摸事件發(fā)生點(diǎn)偏移
                verts[i + 0] = orig[i + 0] + dx * pull;
                verts[i + 1] = orig[i + 1] + dy * pull;
            }
        }
        //通知View組件重繪
        invalidate();
    }

    @Override
    public boolean onTouchEvent(MotionEvent event)
    {
        //調(diào)用warp方法根據(jù)觸摸屏事件的座標(biāo)點(diǎn)來(lái)扭曲verts數(shù)組
        warp(event.getX(), event.getY());
        return true;
    }

}

實(shí)現(xiàn)流程分析：

首先你要弄清楚，這個(gè)verts數(shù)組存儲(chǔ)的是什么？比如 verts[0]和verts1，這兩個(gè)相鄰的元素其實(shí)表示的就是我們第一個(gè)點(diǎn)的x坐標(biāo)和y坐標(biāo)！ 知道這一點(diǎn)，你就知道為什么有21 * 21個(gè)點(diǎn)，以及為什么數(shù)組長(zhǎng)度等于這個(gè)值 * 2！ 初始化部分也就懂了！

接著我們?cè)賮?lái)看看根據(jù)觸摸事件計(jì)算verts數(shù)組元素的值的實(shí)現(xiàn)： 獲得觸摸點(diǎn)的x,y坐標(biāo)，拿這個(gè)值去減對(duì)應(yīng)點(diǎn)的x,y只，計(jì)算出觸摸點(diǎn)和每個(gè)坐標(biāo)點(diǎn)的距離 然后計(jì)算所謂的扭曲度：80000 / ((float) (dd * d))；扭曲度 >= 1的，直接讓該坐標(biāo) 點(diǎn)指向這個(gè)觸摸點(diǎn)，< 1的，則讓各個(gè)頂點(diǎn)向觸摸點(diǎn)發(fā)生偏移，然后再調(diào)用invalidate()重繪~ 大概就這樣~多思考思考，如果還是不理解就算了~知道有這東西就好！

4.本節(jié)示例下載：

CanvasDemo3.zip

CanvasDemo4.zip

本節(jié)小結(jié)：

本節(jié)內(nèi)容大部分摘自——李剛《Android》瘋狂講義，可能稍微容易理解一點(diǎn)吧~ Matrix應(yīng)該大部分的童鞋都能看懂，而drawBitmapMash扭曲圖像則可能需要一點(diǎn) 時(shí)間消化消化，看不懂也沒(méi)什么哈~嗯，本節(jié)就到這里，謝謝