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