二十五、图形特效处理—drawBitmapMesh

Canvas提供了一个

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

方法，该方法可以对Bitmap进行扭曲。这个方法非常灵活，如果用好这个方法，开发者可以在 Android应用上开发出“水波荡漾”、“风吹旗帜”等各种扭曲效果。

drawbitmapmesh方法关键参数的说明如下。

1.bitmap：指定需要扭曲的源位图。

2.meshwidth：该参数控制在横向上把该源位图划分成多少格。

3.meshheight：该参数控制在纵向上把该源位图划分成多少格。

4.verts：该参数是一个长度为( meshwidth+1)(meshheight+1)2的数组，它记录了扭曲后的位图各“顶点”(网格线的交点)位置。虽然它是个一维数组，实际上它记录的数据是形如(x0,y0)、(x1,y1)、(x2，y2)、(xN,yN)格式的数据，这些数组元素控制对 bitmap位图的扭曲效果。

5.vertOffset:控制verts数组中从第几个数组元素开始才对 bitmap进行扭曲(忽略veroffset之前数据的扭曲效果)。

drawBitmapMesh方法对源位图扭曲时最关键的参数是 mesh Width、 meshHeight、verts。

下面的示例程序将会通过drawBitmapMesh方法来控制图片的扭曲，当用户“触摸”图片的指定点时，该图片会在这个点被用户“按”下去一一就像这张图片铺在“极软的床上”一样。

为了实现这个效果，程序要在用户触摸图片的指定点时，动态地改变vers数组里每个元素的位置（控制扭曲后每个顶点的坐标）一一这种改变也简单：程序计算图片上每个触摸点的距离，顶点与触摸点的距离越小，该顶点向触摸点移动的距离越大。

    //定义两个常量，这两个常量指定该图片横向、纵向上都被划分为20格
    private final int WIDTH = 20;
    private final int HEIGHT = 20;
    //记录该图片上包含441个顶点
    private final int COUNT = (WIDTH + 1) * (HEIGHT + 1);
    //定义一个数组，保存Bitmap上的21 * 21个点坐标
    private final float[] verts = new float[COUNT * 2];
    //定义一个数组，记录Bitmap上的21 * 21个点经过扭曲后的坐标
    //对图片进行扭曲的关键就是修改该数组里的值
    private final float[] orig = new float[COUNT * 2];

    private Bitmap bitmap;

    public MeshView(Context context) {
        super(context);
        init();
    }

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

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

    private void init() {
        setFocusable(true);
        bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.timg);
        //获取图片宽高
        float bitmapWidth = bitmap.getWidth();
        float bitmapHeight = bitmap.getHeight();
        int index = 0;
        for (int y = 0; y <= HEIGHT; y++) {
            float fy = bitmapHeight * y / HEIGHT;
            for (int x = 0; x <= WIDTH; x++) {
                float fx = bitmapWidth * x / WIDTH;
                //初始化verts、orig数组
                //初始化后，verts、orig两个数组均匀地保存了21 * 21 个点x、y坐标
                verts[index * 2] = orig[index * 2] = fx;
                verts[index * 2 + 1] = orig[index * 2 + 1] = fy;
                index += 1;
            }
        }
        //设置背景色
        setBackgroundColor(Color.WHITE);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        //对Bitmap按verts数组进行扭曲
        canvas.drawBitmapMesh(bitmap, 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];
            float dy = cy - orig[i + 1];
            float dd = dx * dx + dy * dy;
            //计算每个坐标点与当前点（cx, cy）之间的距离
            float d = (float) Math.sqrt(dd);
            //计算扭曲系数，距离当前点（cx, cy）越远，扭曲度越小
            //8000000越大变化越明显
            float pull = 8000000 / ((float) (dd * d));
            //对verts数组重新赋值
            if (pull >= 1) {
                verts[i] = cx;
                verts[i + 1] = cy;
            } else {
                //控制各顶点向触摸点偏移
                verts[i] = orig[i] + dx * pull;
                verts[i + 1] = orig[i + 1] + dy * pull;
            }
        }
        invalidate();
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        warp(event.getX(), event.getY());
        Log.d("TAG", "onTouchEvent: " + event.getX() + ":" + event.getY());
        return true;
    }