8.3.18 Canvas API详解(Part 3)Matrix和drawBitmapMesh

本节引言：

在Canvas的API文档中，我们看到这样一个方法：drawBitmap(Bitmap bitmap, Matrix matrix, Paint paint)

这个 Matrix 里头，其实大有门道。前面讲 Paint 的 API 里 ColorFilter 时，已经提到过 ColorMatrix 颜色矩阵——一个 4 * 5 的矩阵，通过调整矩阵中的数值，就能改动色调、饱和度等效果。今天要说的这个 Matrix，则是另一条线：它更多是配合其他 API 一起使用，用来控制图形和组件的各种变换。比如 Canvas 就提供了前面提到的这个 drawBitmap，可以直接做出矩阵变换的效果。接下来，就一点点把这个东西拆开来看。

官方API文档：Matrix

1.Matrix中的几个常用的变换方法

• setTranslate(float dx, float dy)：控制Matrix进行平移
• setRotate(float degrees, 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()方法调用矩阵就好~

2.Matrix使用示例：

运行效果图：

代码实现：

MyView.ja va：

/**
 * 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;          //设置倾斜度
    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 < 2.0){
                    scale += 0.1;
                }
                matrix.setScale(scale,scale);
                break;
            case 4:
                if(scale > 0.5){
                    scale -= 0.1;
                }
                matrix.setScale(scale,scale);
                break;
        }
        //根据原始位图与Matrix创建新图片
        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：

MainActivity.ja va：

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 sa vedInstanceState) {
        super.onCreate(sa vedInstanceState);
        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;
        }
    }
}

用法非常简单，就不解释了~

3.drawBitmapMesh扭曲图像

在API文档中还有这样一个方法： drawBitmapMesh(Bitmap bitmap, int meshWidth, int meshHeight, float[] verts, int vertOffset, int[] colors, int colorOffset, Paint paint)

参数依次是：

bitmap：需要扭曲的原位图

meshWidth/meshHeight：在横/纵向上把原位图划分为多少格

verts：长度为(meshWidth+1)*(meshHeight+2)的数组，他记录了扭曲后的位图各顶点(网格线交点) 位置，虽然他是一个一维数组，但是实际上它记录的数据是形如(x0,y0)，(x1,y1)..(xN,Yn)格式的数据， 这些数组元素控制对bitmap位图的扭曲效果

vertOffset：控制verts数组从第几个数组元素开始对bitmap进行扭曲(忽略verOffset之前数据 的扭曲效果)

代码示例：

运行效果图：

代码实现：

/**
 * 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个点
    private final float[] verts = new float[COUNT * 2];    //扭曲前21*21个点的坐标
    private final float[] orig = new float[COUNT * 2];    //扭曲后21*21个点的坐标
    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数组。
        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;
            }
        }
        //设置背景色
        setBackgroundColor(Color.WHITE);
    }
@Override
    protected void onDraw(Canvas canvas) {
        canvas.drawBitmapMesh(mBitmap, WIDTH, HEIGHT, verts
                , 0, null, 0, null);
    }
//工具方法，用于根据触摸事件的位置计算verts数组里各元素的值
    private void warp(float cx, float cy)
    {
        for (int i = 0; i < COUNT * 2; i += 2)
        {
            float dx = cx - orig[i + 0];
            float dy = cy - orig[i + 1];
            float dd = dx * dx + dy * dy;
            //计算每个座标点与当前点（cx、cy）之间的距离
            float d = (float)Math.sqrt(dd);
            //计算扭曲度，距离当前点（cx、cy）越远，扭曲度越小
            float pull = 80000 / ((float) (dd * d));
            //对verts数组（保存bitmap上21 * 21个点经过扭曲后的座标）重新赋值
            if (pull >= 1)
            {
                verts[i + 0] = cx;
                verts[i + 1] = cy;
            }
            else
            {
                //控制各顶点向触摸事件发生点偏移
                verts[i + 0] = orig[i + 0] + dx * pull;
                verts[i + 1] = orig[i + 1] + dy * pull;
            }
        }
        //通知View组件重绘
        invalidate();
    }
@Override
    public boolean onTouchEvent(MotionEvent event)
    {
        //调用warp方法根据触摸屏事件的座标点来扭曲verts数组
        warp(event.getX(), event.getY());
        return true;
    }
}

实现流程分析：

先把一个关键点捋顺：这个verts数组里到底装的是什么？拿最前面的两个相邻元素来说，比如verts[0]和verts[1]，它们其实对应的正是第一个点的x坐标和y坐标。把这一层关系看明白了，为什么会有21 * 21个点、为什么数组长度刚好等于这个数量再乘以2，答案也就顺理成章了。这样一来，初始化这部分自然就不难理解了。

接着我们再来看看根据触摸事件计算verts数组元素的值的实现： 获得触摸点的x,y坐标，拿这个值去减对应点的x,y只，计算出触摸点和每个坐标点的距离 然后计算所谓的扭曲度：80000 / ((float) (dd * d))；扭曲度 >= 1的，直接让该坐标 点指向这个触摸点，< 1的，则让各个顶点向触摸点发生偏移，然后再调用invalidate()重绘~ 大概就这样~多思考思考，如果还是不理解就算了~知道有这东西就好！

4.本节示例下载：

CanvasDemo3.zip

CanvasDemo4.zip

本节小结：

本节内容大部分摘自——李刚《Android》疯狂讲义，可能稍微容易理解一点吧~ Matrix应该大部分的童鞋都能看懂，而drawBitmapMesh扭曲图像则可能需要一点 时间消化消化，看不懂也没什么哈~嗯，本节就到这里，谢谢