Android扭曲图像（水面落叶壁纸初步实现）

Canvas提供了一个drawBitmapMesh(bitmap, meshWidth, meshHeight, verts, vertOffset, colors, colorOffset, paint)方法，该方法可以 对bitmap进行扭曲。用好这个方法，开发者可以在Android应用上开发出“水波震荡”、“风吹旗帜”等各种扭曲效果。

假想在一张图片上有很多网格，如下图。

在这张图上，每个网格上的像素与图片上的像素是一一对应的，也就是网格怎么扭动，图像就会怎么动。比如把网格扭成下面这样，图像就跟着扭曲了。

但是如何把网格扭成这样呢？在Android中很简单，设置网格顶点所在位置就可以了。但是顶点之间的线不是扭曲的么？不需要自己计算弯曲的方式吗？
不需要。

在DrawBitmapMesh中，只需要定义好这个顶点将要扭曲到哪个坐标点上，然后将顶点扭曲后的坐标告诉DrawBitmapMesh，便会自动计算出周边的线条扭曲形式，并根据结果扭曲图像。

总结上面的，需要做的就是三步：
1、根据图片，生成原始的、四四方方的网格
2、根据上面生成的网格，算出将要扭曲的网格
3、将网格传入drawBitmapMesh

而生成网格的方式，就是定义网格中，每个顶点的X，Y坐标。

回到方法定义上来。Canvas的drawBitmapMesh定义如下：

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

关键参数主要下面四个：
-bitmap: 就是将要扭曲的图像
-meshWidth: 需要的横向网格数目
-meshHeight: 需要的纵向网格数目
-verts: 网格顶点坐标数组。
-vertOffset: verts数组中开始跳过的(x,y)对的数目。

其中，verts是个一维数组，保存所有顶点坐标信息。偶数项保存x坐标，奇数项保存y坐标。比如有有meshWidth*meshHeight个网格，如果vertOffset为0，那么算上两端就有(meshWidth+1)*(meshHeight+1)个顶点，verts数组就应该至少长度为(meshWidth+1)*(meshHeight+1)。

 

看效果图：                     

 

 

 

代码：

package com.example.mymeshtest;

import android.app.Activity;
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Color;
import android.os.Bundle;
import android.view.MotionEvent;
import android.view.View;

public class MyMeshTest extends Activity
{
    
    private Bitmap bitmap;
    

    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(new MyView(this,R.drawable.test));
    }

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

        public MyView(Context context,int drawable_id)
        {
            super(context);
            // TODO Auto-generated constructor stub
            setFocusable(true);
            
            //根据指定资源加载图片
            bitmap = BitmapFactory.decodeResource(getResources(), drawable_id);
            
            //获取图片的宽和高
            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;
                    /*初始化orig、verts数组。
                    初始化后，orig、verts两个数组均匀地保存了
                    41*41个点得x、y坐标*/
                    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)
        {
            /*对bitmap按verts数组进行扭曲
            从第一个点(由第5个参数0开始)开始扭曲*/
            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 +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上41*41个点经过扭曲后的坐标）重新辅助
                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;
        }
        
    }

}