Android Demos 示例BitmapMesh中部分方法的理解

 

package practice.com;

import android.os.Bundle;
import android.view.*;
import android.content.Context;
import android.util.FloatMath;
import android.graphics.*;

public class BitmapMesh extends GraphicsActivity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(new SampleView(this));
    }
    
    private static class SampleView extends View {
    	private static final int WIDTH = 20;
    	private static final int HEIGHT = 20;
    	private static final int COUNT = (WIDTH + 1)*(HEIGHT +1);
    	
    	private final Bitmap mBitmap;
    	private final Bitmap mBitmap1;
    	private final float[] mVerts = new float[COUNT*2];
    	private final float[] mOrig = new float[COUNT*2];
    	
    	private final Matrix mMatrix = new Matrix();
    	private final Matrix mInverse = new Matrix();
    	
    	private static void setXY(float[] array , int index , float x, float y){
    		array[index*2 + 0] = x;
    		array[index*2 + 1] = y;
    	}
    	
    	public SampleView(Context context){
    		
    		super(context);
    		setFocusable(true);
    	
    		mBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.beach);
    		mBitmap1 = Bitmap.createBitmap(mBitmap.getWidth(), 
    				mBitmap.getHeight(), Bitmap.Config.ARGB_8888);
    		drawImageWithGrid(mBitmap);
    		float w = mBitmap.getWidth();
    		float h = mBitmap.getHeight();
    		
    		int index = 0;
    		for(int y = 0; y <= HEIGHT; y++) {
    			float fy = h * y / HEIGHT; 
    			for(int x = 0; x <= WIDTH; x++){
    				float fx = w * x / WIDTH;
    				setXY(mVerts, index, fx, fy);
    				setXY(mOrig, index, fx, fy);
    				index += 1;
    			}
    		}
    		
    		mMatrix.setTranslate(10, 10);
    		mMatrix.invert(mInverse);
    		
    	}
    	// 此处借鉴自引路蜂
    	private void drawImageWithGrid(Bitmap image){
    		
    		Canvas canvas = new Canvas(mBitmap1);
    		float w = mBitmap1.getWidth();
    		float h = mBitmap1.getHeight();
    		int xCount = (int)w/WIDTH;
    		int yCount = (int)h/HEIGHT;
    		Paint paint = new Paint();
    		canvas.drawBitmap(image, 0, 0, paint);
    		paint.setStyle(Paint.Style.STROKE);
    		paint.setStrokeWidth(1);
    		paint.setColor(0x8000FF00);
    		for(int i = 0; i < xCount;i++){
    			for(int j = 0; j < yCount; j++){
    				canvas.drawRect(i*WIDTH, j*HEIGHT,i*WIDTH+WIDTH,j*HEIGHT+HEIGHT, paint);
    				
    			}
    		}
    	}

		@Override
		protected void onDraw(Canvas canvas) {
			// TODO Auto-generated method stub
			canvas.drawColor(0xFFCCCCCC);
			
			canvas.concat(mMatrix);
		    canvas.drawBitmapMesh(mBitmap1, WIDTH, HEIGHT, mVerts, 0, null, 0, null);
		}
		
		private void warp(float cx, float cy){
			final float K = 100000;
			float[] src = mOrig;
			float[] dst = mVerts;
			
			for(int i = 0; i < COUNT*2; i += 2){
				float x = src[i+0];
				float y = src[i+1];
				float dx = cx - x;
				float dy = cy - y;
				float dd = dx*dx + dy*dy;
				float d = FloatMath.sqrt(dd);
				float pull = K / (dd + 0.000001f);
				
				pull /= (d + 0.000001f);
				
				if(pull >= 1){
					dst[i+0] = cx;
					dst[i+1] = cy;
				}else{
					dst[i+0] = x + dx * pull;
					dst[i+1] = y + dy * pull;
				}
			}
		}
    	
    	private int mLastWarpX = -9999;
    	private int mLastWarpY;
    	
    	public boolean onTouchEvent (MotionEvent event){
    		float[] pt = {event.getX(), event.getY()};
    		mInverse.mapPoints(pt);
    		
    		int x = (int)pt[0];
    		int y = (int)pt[1];
    		
    		if(mLastWarpX != x || mLastWarpY != y){
    			mLastWarpX = x;
    			mLastWarpY = y;
    			warp(pt[0], pt[1]);
    			invalidate();
    		}
    		return true;
    	}
    }
}

 

上面为Android　Demos 中BitmapMesh示例的代码（本人借鉴引路蜂Android ApiDemos示例解析(55)示例解析，为图像添加了绿色格线，方便清楚观察桌布扭曲情况），其中部分代码理解如下：

 

1　本例涉及到的矩阵算法

　　mMatrix.invert(mInverse)　

　　这个是把给定矩阵(本代码中指mMatrix)取逆矩阵，并将结果写入参数矩阵中(本代码指mInverse).

     mInverse.mapPoints(pt)

  　这个方法是将指定的点集(pt)按照矩阵参数(mInverse)进行图形平移，旋转，放大，缩小等操作后再写入点集(pt)中去.

　在本例中，因为图片相对于屏幕已经按照矩阵mMatrix进行了平移(mMatrix.setTranslate(10, 10)),因此触摸屏幕所取得的点坐标(pt)实际以屏幕左上角为原点的坐标值，需要把此点坐标变换为以图片左上角为原点的坐标值．第一个方法是取得mMatrix矩阵的逆操作(矩阵mInverse)，第二个方法是将触摸屏幕所取得的屏幕点坐标按照矩阵mInverse变换为图片(本例图片beach)中的点坐标，然后方能按照算法进行图片扭曲处理．

 

 

2　图片扭曲算法

 

　　本例中的扭曲算法是以触摸点(float[] pt = {event.getX(), event.getY()})为目标点，其它网格点

 

float[] src = mOrig;
float x = src[i+0];
float y = src[i+1];

 　距目标点(pt)的直线距离的远近为考量

 

float dx = cx - x;
float dy = cy - y;
float dd = dx*dx + dy*dy;
float d = FloatMath.sqrt(dd);
float pull = K / (dd + 0.000001f);
				
pull /= (d + 0.000001f);

 

 

　较近处，向目标点塌缩

if(pull >= 1){
dst[i+0] = cx;
dst[i+1] = cy;

 

 

　较远处，修正数值，向目标点靠近，与目标点越远，修改值越小

else{
　　dst[i+0] = x + dx * pull;
　　dst[i+1] = y + dy * pull;

 

 

本例运行结果如下：