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