drawBitmapMesh扭曲图像

Canvas提供了一个drawBitmapMesh(Bitmap bitmap, int meshWidth, int meshHeight, float[] verts, int vertOffset, int[] colors, int colorOffset, Paint paint)方法,该方法可以对bitmap进行扭曲.这个方法非常灵活,如果用好这个方法,可以在Android应用上开发出"水波荡漾","风吹旗帜"等各种扭曲效果.
drawBitmapMesh方法关键参数的说明:

bitmap: 指定需要扭曲的源位图.
meshWidth: 该参数控制在横向上把该源位图划分成多少格.
meshHeight: 该参数控制在纵向上把该源位图划分为多少格.
verts: 该参数是一个长度为(meshWidth + 1)(meshHeight+1) 2 的数组,它记录了扭曲后的位图各"顶点"位置.虽然它是个一维数组,实际上它记录的数据是形如(x0, y0),(x1, y1),(x2, y2)......(xN, yN)格式的数据,这些数组元素控制对bitmap位图的扭曲效果.
vertOffset: 控制verts数组中从第几个数组元素开始才对bitmap进行扭曲(忽略vertOffset之前数据的扭曲效果).
drawBitmapMesh方法对源位图扭曲时最关键的参数是meshWidth, meshHeight, verts,这三个参数对扭曲的控制如下图:

Paste_Image.png

从上图可以看出,当程序希望调用drawBitmapMesh方法对位图进行扭曲是,关键是计算verts数组的值----该数组的值记录了扭曲后的位图上各"顶点"的坐标.

下面是扭曲一张图片的例子

ezgif-2-5fea9c60b1.gif

package WangLi.Graphics.WarpTest;  
  
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.util.AttributeSet;  
import android.view.MotionEvent;  
import android.view.View;  
  
public class WarpTest extends Activity {  
    /** Called when the activity is first created. */  
    private Bitmap bitmap;  
    @Override  
    public void onCreate(Bundle savedInstanceState) {  
        super.onCreate(savedInstanceState);  
        setContentView(new MyView(this,R.drawable.psb));  
    }  
    private class MyView extends View  
    {  
        //定义两个常量,这两个常量指定该图片横向,纵向上都被划分为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];  
        public MyView(Context context, int drawableId) {  
            super(context);  
            setFocusable(true);  
            //根据指定资源加载图片  
            bitmap = BitmapFactory.decodeResource(getResources(), drawableId);  
            //获取图片宽度和高度  
            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两个数组均匀地保存了21 * 21个点的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);  
        }  
        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　上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] + dx * pull;  
                }  
            }  
            //通知View组件重绘  
            invalidate();  
        }  
        public boolean onTouchEvent(MotionEvent event)  
        {  
            //调用warp方法根据触摸屏事件的坐标点来扭曲verts数组  
            warp(event.getX() , event.getY());  
            return true;  
        }  
    }  
}  ```
代码下载：https://github.com/gb0302/drawBitmapMesh