使用 drawBitmapMesh 扭曲图片

来源：互联网发布：淘宝金酷娃玩具吊车编辑：程序博客网时间：2024/04/30 02:42

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位图的扭曲效果.
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;        }    }}

0 0