使用 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 之前数据的扭曲效果).

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;
}
}
}