使用 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位图的扭曲效果.
   
   1. vertOffset 控制 verts [] 数组中第几个数组元素开始才对Bitmap进行扭曲,(忽略vertOffset 之前数据的扭曲效果).

package com.test.wraptest;

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.support.v7.app.AppCompatActivity;
import android.view.MotionEvent;
import android.view.View;

public class MainActivity extends AppCompatActivity {
    private Bitmap mBitmap;

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

    public class MyView extends View {

        //定义两个常量用来表示该图片横向 纵向上 都被划分为20格
        private  final int WIDTH = 20;
        private  final int HEIGHT = 20;

        //记录该图片上 顶点的总数
        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);

            //根据指定资源加载图片
            mBitmap = BitmapFactory.decodeResource(getResources(), drawableId);

            //获取图片的宽度和高度
            float bitmapWidth = mBitmap.getWidth();
            float bitmapHeight = mBitmap.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 . //两个数组均匀的保存了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);
        }

        @Override
        protected void onDraw(Canvas canvas) {
            //对Bitmap 按 verts 数组进行扭曲
            //从第一个点(由第5个点参数0控制) 开始扭曲
            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));

                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) {

            //调用wrap()方法 根据触摸屏的事件的坐标点来扭曲 verts 数组
            warp(event.getX(),event.getY());

            return true;
        }
    }
}