Canvas 有一个方法 drawBitmapMash() 用于扭曲图像，效果类似于 PhotoShop 中的 滤镜-扭曲-挤压

drawBitmapMash()

drawBitmapMesh(Bitmap bitmap, int meshWidth, int meshHeight, float[] verts,
int vertOffset, int[] colors, int colorOffset, Paint paint)

范例

下面我们写一个范例实现图片的扭曲效果

1. 创建一个 空的 Android 项目 cn.twle.android.BitmapMash

2. 下载 /static/i/meimei_rect.jpg，并放到 res/drawable 目录下

3. 自定义一个 View 类 MsView.java

   package cn.twle.android.bitmapmash;
   
   import android.content.Context;
   import android.graphics.Bitmap;
   import android.graphics.BitmapFactory;
   import android.graphics.Canvas;
   import android.graphics.Color;
   import android.util.AttributeSet;
   import android.view.MotionEvent;
   import android.view.View;
   
   public class MsView 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 MsView(Context context) {
           this(context, null);
       }
   
       public MsView(Context context, AttributeSet attrs) {
           super(context, attrs);
           init();
       }
   
       public MsView(Context context, AttributeSet attrs, int defStyleAttr) {
           super(context, attrs, defStyleAttr);
       }
   
       private void init() {
           mBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.meimei_rect);
           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;
       }
   
   }
   

4. 修改 MainActivity.java 设置 setContentView(new MsView(MainActivity.this))

   package cn.twle.android.bitmapmash;
   
   import android.support.v7.app.AppCompatActivity;
   import android.os.Bundle;
   
   public class MainActivity extends AppCompatActivity {
   
       @Override
       protected void onCreate(Bundle savedInstanceState) {
           super.onCreate(savedInstanceState);
   
           setContentView(new MsView(MainActivity.this));
       }
   }
   

对于这个函数，我们要知晓 verts 数组存储的是什么？

比如 verts[0] 和 verts [1] ，这两个相邻的元素其实表示的就是我们第一个点的 x 坐标和 y 坐标

知道这一点，你就知道为什么有 21 * 21 个点，以及为什么数组长度等于这个值 * 2

然后是根据触摸事件计算 verts 数组元素的值的实现

获得触摸点的 x,y 坐标，拿这个值去减对应点的 x,y 值，计算出触摸点和每个坐标点的距离然后计算所谓的扭曲度：`80000 / ((float) (dd * d))` 扭曲度 `>= 1` 的，直接让该坐标点指向这个触摸点，`< 1` 的，则让各个顶点向触摸点发生偏移，然后再调用 `invalidate()` 重绘