`

Android中图像变换Matrix的原理、代码验证和应用

 
阅读更多

第一部分 Matrix的数学原理

在Android中，如果你用Matrix进行过图像处理，那么一定知道Matrix这个类。Android中的Matrix是一个3 x 3的矩阵，其内容如下：

 

Matrix的对图像的处理可分为四类基本变换：

Translate           平移变换

Rotate                旋转变换

Scale                  缩放变换

Skew                  错切变换

 

从字面上理解，矩阵中的MSCALE用于处理缩放变换，MSKEW用于处理错切变换，MTRANS用于处理平移变换，MPERSP用于处理透视变换。实际中当然不能完全按照字面上的说法去理解Matrix。同时，在Android的文档中，未见到用Matrix进行透视变换的相关说明，所以本文也不讨论这方面的问题。

 

针对每种变换，Android提供了pre、set和post三种操作方式。其中

set用于设置Matrix中的值。

pre是先乘，因为矩阵的乘法不满足交换律，因此先乘、后乘必须要严格区分。先乘相当于矩阵运算中的右乘。

post是后乘，因为矩阵的乘法不满足交换律，因此先乘、后乘必须要严格区分。后乘相当于矩阵运算中的左乘。

 

除平移变换(Translate)外，旋转变换(Rotate)、缩放变换(Scale)和错切变换(Skew)都可以围绕一个中心点来进行，如果不指定，在默认情况下是围绕(0, 0)来进行相应的变换的。

 

下面我们来看看四种变换的具体情形。由于所有的图形都是有点组成，因此我们只需要考察一个点相关变换即可。

 

一、 平移变换

假定有一个点的坐标是 ，将其移动到 ，再假定在x轴和y轴方向移动的大小分别为：


如下图所示：


不难知道：


如果用矩阵来表示的话，就可以写成：

 


二、 旋转变换

 

2.1    围绕坐标原点旋转：

假定有一个点 ，相对坐标原点顺时针旋转后的情形，同时假定P点离坐标原点的距离为r，如下图：


那么，


如果用矩阵，就可以表示为：


 

2.2    围绕某个点旋转

如果是围绕某个点顺时针旋转，那么可以用矩阵表示为：


可以化为：


很显然，

1.   

  是将坐标原点移动到点后， 的新坐标。

2.     


是将上一步变换后的，围绕新的坐标原点顺时针旋转 。

3.     


经过上一步旋转变换后，再将坐标原点移回到原来的坐标原点。

 

所以，围绕某一点进行旋转变换，可以分成3个步骤，即首先将坐标原点移至该点，然后围绕新的坐标原点进行旋转变换，再然后将坐标原点移回到原先的坐标原点。

 

三、 缩放变换

理论上而言，一个点是不存在什么缩放变换的，但考虑到所有图像都是由点组成，因此，如果图像在x轴和y轴方向分别放大k1和k2倍的话，那么图像中的所有点的x坐标和y坐标均会分别放大k1和k2倍，即


用矩阵表示就是：


缩放变换比较好理解，就不多说了。

 

四、 错切变换

错切变换(skew)在数学上又称为Shear mapping(可译为“剪切变换”)或者Transvection(缩并)，它是一种比较特殊的线性变换。错切变换的效果就是让所有点的x坐标(或者y坐标)保持不变，而对应的y坐标(或者x坐标)则按比例发生平移，且平移的大小和该点到x轴(或y轴)的垂直距离成正比。错切变换，属于等面积变换，即一个形状在错切变换的前后，其面积是相等的。

比如下图，各点的y坐标保持不变，但其x坐标则按比例发生了平移。这种情况将水平错切。


下图各点的x坐标保持不变，但其y坐标则按比例发生了平移。这种情况叫垂直错切。

 

假定一个点经过错切变换后得到，对于水平错切而言，应该有如下关系：


用矩阵表示就是：


扩展到3 x 3的矩阵就是下面这样的形式：

 

同理，对于垂直错切，可以有：


在数学上严格的错切变换就是上面这样的。在Android中除了有上面说到的情况外，还可以同时进行水平、垂直错切，那么形式上就是：


 

五、 对称变换

除了上面讲到的4中基本变换外，事实上，我们还可以利用Matrix，进行对称变换。所谓对称变换，就是经过变化后的图像和原图像是关于某个对称轴是对称的。比如，某点 经过对称变换后得到，

如果对称轴是x轴，难么，


用矩阵表示就是：


如果对称轴是y轴，那么，


用矩阵表示就是：


如果对称轴是y = x，如图：


那么，


很容易可以解得：


用矩阵表示就是：


同样的道理，如果对称轴是y = -x，那么用矩阵表示就是：

 

特殊地，如果对称轴是y = kx，如下图：


那么，


很容易可解得：


用矩阵表示就是：


当k = 0时，即y = 0，也就是对称轴为x轴的情况；当k趋于无穷大时，即x = 0，也就是对称轴为y轴的情况；当k =1时，即y = x，也就是对称轴为y = x的情况；当k = -1时，即y = -x，也就是对称轴为y = -x的情况。不难验证，这和我们前面说到的4中具体情况是相吻合的。

 

如果对称轴是y = kx + b这样的情况，只需要在上面的基础上增加两次平移变换即可，即先将坐标原点移动到(0, b)，然后做上面的关于y = kx的对称变换，再然后将坐标原点移回到原来的坐标原点即可。用矩阵表示大致是这样的：


需要特别注意：在实际编程中，我们知道屏幕的y坐标的正向和数学中y坐标的正向刚好是相反的，所以在数学上y = x和屏幕上的y = -x才是真正的同一个东西，反之亦然。也就是说，如果要使图片在屏幕上看起来像按照数学意义上y = x对称，那么需使用这种转换：


要使图片在屏幕上看起来像按照数学意义上y = -x对称，那么需使用这种转换：
 

关于对称轴为y = kx 或y = kx + b的情况，同样需要考虑这方面的问题。

 

 

第二部分 代码验证

在第一部分中讲到的各种图像变换的验证代码如下，一共列出了10种情况。如果要验证其中的某一种情况，只需将相应的代码反注释即可。试验中用到的图片：


其尺寸为162 x 251。

 

每种变换的结果，请见代码之后的说明。

<span style="font-size:13px;"></span><pre name="code" class="java">package com.pat.testtransformmatrix;

import android.app.Activity;
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Matrix;
import android.os.Bundle;
import android.util.Log;
import android.view.MotionEvent;
import android.view.View;
import android.view.Window;
import android.view.WindowManager;
import android.view.View.OnTouchListener;
import android.widget.ImageView;

public class TestTransformMatrixActivity extends Activity
implements
OnTouchListener
{
	private TransformMatrixView view;
    @Override
    public void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        this.getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);

        view = new TransformMatrixView(this);
        view.setScaleType(ImageView.ScaleType.MATRIX);
        view.setOnTouchListener(this);
        
        setContentView(view);
    }
    
    class TransformMatrixView extends ImageView
    {
    	private Bitmap bitmap;
    	private Matrix matrix;
		public TransformMatrixView(Context context)
		{
			super(context);
			bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.sophie);
			matrix = new Matrix();
		}

		@Override
		protected void onDraw(Canvas canvas)
		{
			// 画出原图像
			canvas.drawBitmap(bitmap, 0, 0, null);
			// 画出变换后的图像
			canvas.drawBitmap(bitmap, matrix, null);
			super.onDraw(canvas);
		}

		@Override
		public void setImageMatrix(Matrix matrix)
		{
			this.matrix.set(matrix);
			super.setImageMatrix(matrix);
		}
		
		public Bitmap getImageBitmap()
		{
			return bitmap;
		}
    }

	public boolean onTouch(View v, MotionEvent e)
	{
		if(e.getAction() == MotionEvent.ACTION_UP)
		{
			Matrix matrix = new Matrix();
			// 输出图像的宽度和高度(162 x 251)
			Log.e("TestTransformMatrixActivity", "image size: width x height = " +  view.getImageBitmap().getWidth() + " x " + view.getImageBitmap().getHeight());
			// 1. 平移
			matrix.postTranslate(view.getImageBitmap().getWidth(), view.getImageBitmap().getHeight());
			// 在x方向平移view.getImageBitmap().getWidth()，在y轴方向view.getImageBitmap().getHeight()
			view.setImageMatrix(matrix);
			
			// 下面的代码是为了查看matrix中的元素
			float[] matrixValues = new float[9];
			matrix.getValues(matrixValues);
			for(int i = 0; i < 3; ++i)
			{
				String temp = new String();
				for(int j = 0; j < 3; ++j)
				{
					temp += matrixValues[3 * i + j ] + "\t";
				}
				Log.e("TestTransformMatrixActivity", temp);
			}
			

//			// 2. 旋转(围绕图像的中心点)
//			matrix.setRotate(45f, view.getImageBitmap().getWidth() / 2f, view.getImageBitmap().getHeight() / 2f);
//			
//			// 做下面的平移变换，纯粹是为了让变换后的图像和原图像不重叠
//			matrix.postTranslate(view.getImageBitmap().getWidth() * 1.5f, 0f);
//			view.setImageMatrix(matrix);
//
//			// 下面的代码是为了查看matrix中的元素
//			float[] matrixValues = new float[9];
//			matrix.getValues(matrixValues);
//			for(int i = 0; i < 3; ++i)
//			{
//				String temp = new String();
//				for(int j = 0; j < 3; ++j)
//				{
//					temp += matrixValues[3 * i + j ] + "\t";
//				}
//				Log.e("TestTransformMatrixActivity", temp);
//			}
			
			
//			// 3. 旋转(围绕坐标原点) + 平移(效果同2)
//			matrix.setRotate(45f);
//			matrix.preTranslate(-1f * view.getImageBitmap().getWidth() / 2f, -1f * view.getImageBitmap().getHeight() / 2f);
//			matrix.postTranslate((float)view.getImageBitmap().getWidth() / 2f, (float)view.getImageBitmap().getHeight() / 2f);
//			
//			// 做下面的平移变换，纯粹是为了让变换后的图像和原图像不重叠
//			matrix.postTranslate((float)view.getImageBitmap().getWidth() * 1.5f, 0f);
//			view.setImageMatrix(matrix);
//			
//			// 下面的代码是为了查看matrix中的元素
//			float[] matrixValues = new float[9];
//			matrix.getValues(matrixValues);
//			for(int i = 0; i < 3; ++i)
//			{
//				String temp = new String();
//				for(int j = 0; j < 3; ++j)
//				{
//					temp += matrixValues[3 * i + j ] + "\t";
//				}
//				Log.e("TestTransformMatrixActivity", temp);
//			}			
			
//			// 4. 缩放
//			matrix.setScale(2f, 2f);
//			// 下面的代码是为了查看matrix中的元素
//			float[] matrixValues = new float[9];
//			matrix.getValues(matrixValues);
//			for(int i = 0; i < 3; ++i)
//			{
//				String temp = new String();
//				for(int j = 0; j < 3; ++j)
//				{
//					temp += matrixValues[3 * i + j ] + "\t";
//				}
//				Log.e("TestTransformMatrixActivity", temp);
//			}
//			
//			// 做下面的平移变换，纯粹是为了让变换后的图像和原图像不重叠
//			matrix.postTranslate(view.getImageBitmap().getWidth(), view.getImageBitmap().getHeight());
//			view.setImageMatrix(matrix);
//			
//			// 下面的代码是为了查看matrix中的元素
//			matrixValues = new float[9];
//			matrix.getValues(matrixValues);
//			for(int i = 0; i < 3; ++i)
//			{
//				String temp = new String();
//				for(int j = 0; j < 3; ++j)
//				{
//					temp += matrixValues[3 * i + j ] + "\t";
//				}
//				Log.e("TestTransformMatrixActivity", temp);
//			}

			
//			// 5. 错切 - 水平
//			matrix.setSkew(0.5f, 0f);
//			// 下面的代码是为了查看matrix中的元素
//			float[] matrixValues = new float[9];
//			matrix.getValues(matrixValues);
//			for(int i = 0; i < 3; ++i)
//			{
//				String temp = new String();
//				for(int j = 0; j < 3; ++j)
//				{
//					temp += matrixValues[3 * i + j ] + "\t";
//				}
//				Log.e("TestTransformMatrixActivity", temp);
//			}
//			
//			// 做下面的平移变换，纯粹是为了让变换后的图像和原图像不重叠			
//			matrix.postTranslate(view.getImageBitmap().getWidth(), 0f);
//			view.setImageMatrix(matrix);
//			
//			// 下面的代码是为了查看matrix中的元素
//			matrixValues = new float[9];
//			matrix.getValues(matrixValues);
//			for(int i = 0; i < 3; ++i)
//			{
//				String temp = new String();
//				for(int j = 0; j < 3; ++j)
//				{
//					temp += matrixValues[3 * i + j ] + "\t";
//				}
//				Log.e("TestTransformMatrixActivity", temp);
//			}
			
//			// 6. 错切 - 垂直
//			matrix.setSkew(0f, 0.5f);
//			// 下面的代码是为了查看matrix中的元素
//			float[] matrixValues = new float[9];
//			matrix.getValues(matrixValues);
//			for(int i = 0; i < 3; ++i)
//			{
//				String temp = new String();
//				for(int j = 0; j < 3; ++j)
//				{
//					temp += matrixValues[3 * i + j ] + "\t";
//				}
//				Log.e("TestTransformMatrixActivity", temp);
//			}
//			
//			// 做下面的平移变换，纯粹是为了让变换后的图像和原图像不重叠				
//			matrix.postTranslate(0f, view.getImageBitmap().getHeight());
//			view.setImageMatrix(matrix);
//			
//			// 下面的代码是为了查看matrix中的元素
//			matrixValues = new float[9];
//			matrix.getValues(matrixValues);
//			for(int i = 0; i < 3; ++i)
//			{
//				String temp = new String();
//				for(int j = 0; j < 3; ++j)
//				{
//					temp += matrixValues[3 * i + j ] + "\t";
//				}
//				Log.e("TestTransformMatrixActivity", temp);
//			}			
			
//			7. 错切 - 水平 + 垂直
//			matrix.setSkew(0.5f, 0.5f);
//			// 下面的代码是为了查看matrix中的元素
//			float[] matrixValues = new float[9];
//			matrix.getValues(matrixValues);
//			for(int i = 0; i < 3; ++i)
//			{
//				String temp = new String();
//				for(int j = 0; j < 3; ++j)
//				{
//					temp += matrixValues[3 * i + j ] + "\t";
//				}
//				Log.e("TestTransformMatrixActivity", temp);
//			}
//			
//			// 做下面的平移变换，纯粹是为了让变换后的图像和原图像不重叠				
//			matrix.postTranslate(0f, view.getImageBitmap().getHeight());
//			view.setImageMatrix(matrix);
//			
//			// 下面的代码是为了查看matrix中的元素
//			matrixValues = new float[9];
//			matrix.getValues(matrixValues);
//			for(int i = 0; i < 3; ++i)
//			{
//				String temp = new String();
//				for(int j = 0; j < 3; ++j)
//				{
//					temp += matrixValues[3 * i + j ] + "\t";
//				}
//				Log.e("TestTransformMatrixActivity", temp);
//			}
			
//			// 8. 对称 (水平对称)
//			float matrix_values[] = {1f, 0f, 0f, 0f, -1f, 0f, 0f, 0f, 1f};
//			matrix.setValues(matrix_values);
//			// 下面的代码是为了查看matrix中的元素
//			float[] matrixValues = new float[9];
//			matrix.getValues(matrixValues);
//			for(int i = 0; i < 3; ++i)
//			{
//				String temp = new String();
//				for(int j = 0; j < 3; ++j)
//				{
//					temp += matrixValues[3 * i + j ] + "\t";
//				}
//				Log.e("TestTransformMatrixActivity", temp);
//			}
//			
//			// 做下面的平移变换，纯粹是为了让变换后的图像和原图像不重叠	
//			matrix.postTranslate(0f, view.getImageBitmap().getHeight() * 2f);
//			view.setImageMatrix(matrix);
//			
//			// 下面的代码是为了查看matrix中的元素
//			matrixValues = new float[9];
//			matrix.getValues(matrixValues);
//			for(int i = 0; i < 3; ++i)
//			{
//				String temp = new String();
//				for(int j = 0; j < 3; ++j)
//				{
//					temp += matrixValues[3 * i + j ] + "\t";
//				}
//				Log.e("TestTransformMatrixActivity", temp);
//			}			
			
//			// 9. 对称 - 垂直
//			float matrix_values[] = {-1f, 0f, 0f, 0f, 1f, 0f, 0f, 0f, 1f};
//			matrix.setValues(matrix_values);
//			// 下面的代码是为了查看matrix中的元素
//			float[] matrixValues = new float[9];
//			matrix.getValues(matrixValues);
//			for(int i = 0; i < 3; ++i)
//			{
//				String temp = new String();
//				for(int j = 0; j < 3; ++j)
//				{
//					temp += matrixValues[3 * i + j ] + "\t";
//				}
//				Log.e("TestTransformMatrixActivity", temp);
//			}	
//			
//			// 做下面的平移变换，纯粹是为了让变换后的图像和原图像不重叠	
//			matrix.postTranslate(view.getImageBitmap().getWidth() * 2f, 0f);
//			view.setImageMatrix(matrix);
//			
//			// 下面的代码是为了查看matrix中的元素
//			matrixValues = new float[9];
//			matrix.getValues(matrixValues);
//			for(int i = 0; i < 3; ++i)
//			{
//				String temp = new String();
//				for(int j = 0; j < 3; ++j)
//				{
//					temp += matrixValues[3 * i + j ] + "\t";
//				}
//				Log.e("TestTransformMatrixActivity", temp);
//			}

			
//			// 10. 对称(对称轴为直线y = x)
//			float matrix_values[] = {0f, -1f, 0f, -1f, 0f, 0f, 0f, 0f, 1f};
//			matrix.setValues(matrix_values);
//			// 下面的代码是为了查看matrix中的元素
//			float[] matrixValues = new float[9];
//			matrix.getValues(matrixValues);
//			for(int i = 0; i < 3; ++i)
//			{
//				String temp = new String();
//				for(int j = 0; j < 3; ++j)
//				{
//					temp += matrixValues[3 * i + j ] + "\t";
//				}
//				Log.e("TestTransformMatrixActivity", temp);
//			}
//			
//			// 做下面的平移变换，纯粹是为了让变换后的图像和原图像不重叠				
//			matrix.postTranslate(view.getImageBitmap().getHeight() + view.getImageBitmap().getWidth(), 
//					view.getImageBitmap().getHeight() + view.getImageBitmap().getWidth());
//			view.setImageMatrix(matrix);
//			
//			// 下面的代码是为了查看matrix中的元素
//			matrixValues = new float[9];
//			matrix.getValues(matrixValues);
//			for(int i = 0; i < 3; ++i)
//			{
//				String temp = new String();
//				for(int j = 0; j < 3; ++j)
//				{
//					temp += matrixValues[3 * i + j ] + "\t";
//				}
//				Log.e("TestTransformMatrixActivity", temp);
//			}
			
			view.invalidate();
		}
		return true;
	}
}

 

下面给出上述代码中，各种变换的具体结果及其对应的相关变换矩阵

1.     平移

输出的结果：

请对照第一部分中的“一、平移变换”所讲的情形，考察上述矩阵的正确性。

 

2.     旋转(围绕图像的中心点)

输出的结果：

它实际上是

matrix.setRotate(45f,view.getImageBitmap().getWidth() / 2f, view.getImageBitmap().getHeight() / 2f);

matrix.postTranslate(view.getImageBitmap().getWidth()* 1.5f, 0f);

这两条语句综合作用的结果。根据第一部分中“二、旋转变换”里面关于围绕某点旋转的公式，

matrix.setRotate(45f,view.getImageBitmap().getWidth() / 2f, view.getImageBitmap().getHeight() / 2f);

所产生的转换矩阵就是：

而matrix.postTranslate(view.getImageBitmap().getWidth()* 1.5f, 0f);的意思就是在上述矩阵的左边再乘以下面的矩阵：

关于post是左乘这一点，我们在前面的理论部分曾经提及过，后面我们还会专门讨论这个问题。

 

所以它实际上就是：

出去计算上的精度误差，我们可以看到我们计算出来的结果，和程序直接输出的结果是一致的。

 

3.     旋转(围绕坐标原点旋转，在加上两次平移，效果同2)

根据第一部分中“二、旋转变换”里面关于围绕某点旋转的解释，不难知道：

matrix.setRotate(45f,view.getImageBitmap().getWidth() / 2f, view.getImageBitmap().getHeight() / 2f);

等价于

matrix.setRotate(45f);

matrix.preTranslate(-1f* view.getImageBitmap().getWidth() / 2f, -1f *view.getImageBitmap().getHeight() / 2f);

matrix.postTranslate((float)view.getImageBitmap().getWidth()/ 2f, (float)view.getImageBitmap().getHeight() / 2f);

 

其中matrix.setRotate(45f)对应的矩阵是：

matrix.preTranslate(-1f* view.getImageBitmap().getWidth() / 2f, -1f * view.getImageBitmap().getHeight()/ 2f)对应的矩阵是：

由于是preTranslate，是先乘，也就是右乘，即它应该出现在matrix.setRotate(45f)所对应矩阵的右侧。

 

matrix.postTranslate((float)view.getImageBitmap().getWidth()/ 2f, (float)view.getImageBitmap().getHeight() / 2f)对应的矩阵是：

这次由于是postTranslate，是后乘，也就是左乘，即它应该出现在matrix.setRotate(45f)所对应矩阵的左侧。

 

所以综合起来，

matrix.setRotate(45f);

matrix.preTranslate(-1f* view.getImageBitmap().getWidth() / 2f, -1f *view.getImageBitmap().getHeight() / 2f);

matrix.postTranslate((float)view.getImageBitmap().getWidth()/ 2f, (float)view.getImageBitmap().getHeight() / 2f);

对应的矩阵就是：

这和下面这个矩阵(围绕图像中心顺时针旋转45度)其实是一样的：

因此，此处变换后的图像和2中变换后的图像时一样的。

 

4.     缩放变换

程序所输出的两个矩阵分别是：

其中第二个矩阵，其实是下面两个矩阵相乘的结果：

 

大家可以对照第一部分中的“三、缩放变换”和“一、平移变换”说法，自行验证结果。

 

5.     错切变换(水平错切)

代码所输出的两个矩阵分别是：

其中，第二个矩阵其实是下面两个矩阵相乘的结果：

 

大家可以对照第一部分中的“四、错切变换”和“一、平移变换”的相关说法，自行验证结果。

 

6.     错切变换(垂直错切)

代码所输出的两个矩阵分别是：

其中，第二个矩阵其实是下面两个矩阵相乘的结果：

大家可以对照第一部分中的“四、错切变换”和“一、平移变换”的相关说法，自行验证结果。

 

7.     错切变换(水平+垂直错切)

代码所输出的两个矩阵分别是：

其中，后者是下面两个矩阵相乘的结果：

大家可以对照第一部分中的“四、错切变换”和“一、平移变换”的相关说法，自行验证结果。

 

8.     对称变换(水平对称)

代码所输出的两个各矩阵分别是：

其中，后者是下面两个矩阵相乘的结果：

 

大家可以对照第一部分中的“五、对称变换”和“一、平移变换”的相关说法，自行验证结果。

 

9.     对称变换(垂直对称)

代码所输出的两个矩阵分别是：

其中，后者是下面两个矩阵相乘的结果：

 

大家可以对照第一部分中的“五、对称变换”和“一、平移变换”的相关说法，自行验证结果。

 

10.   对称变换(对称轴为直线y = x)

代码所输出的两个矩阵分别是：

其中，后者是下面两个矩阵相乘的结果：

 

大家可以对照第一部分中的“五、对称变换”和“一、平移变换”的相关说法，自行验证结果。

 

11.   关于先乘和后乘的问题

由于矩阵的乘法运算不满足交换律，我们在前面曾经多次提及先乘、后乘的问题，即先乘就是矩阵运算中右乘，后乘就是矩阵运算中的左乘。其实先乘、后乘的概念是针对变换操作的时间先后而言的，左乘、右乘是针对矩阵运算的左右位置而言的。以第一部分“二、旋转变换”中围绕某点旋转的情况为例：

 

越靠近原图像中像素的矩阵，越先乘，越远离原图像中像素的矩阵，越后乘。事实上，图像处理时，矩阵的运算是从右边往左边方向进行运算的。这就形成了越在右边的矩阵(右乘)，越先运算(先乘)，反之亦然。

 

当然，在实际中，如果首先指定了一个matrix，比如我们先setRotate()，即指定了上面变换矩阵中，中间的那个矩阵，那么后续的矩阵到底是pre还是post运算，都是相对这个中间矩阵而言的。

 

所有这些，其实都是很自然的事情。

 

第三部分 应用

在这一部分，我们会将前面两部分所了解到的内容和Android手势结合起来，利用各种不同的手势对图像进行平移、缩放和旋转，前面两项都是在实践中经常需要用到的功能，后一项据说苹果也是最近才加上的，而实际上在Android中，咱们通过自己的双手，也可以很轻松地实现之。

 

首先创建一个Android项目PatImageView，同时创建一个Activity：PatImageViewActivity。完成这一步后， 记得在AndroidManifest.xml中增加如下许可：

<uses-permissionandroid:name="android.permission.VIBRATE"/>

因为我们将要通过短按还是长按，来确定将图片到底是缩放还是旋转。

 

现在来创建一个ImageView的派生类：PatImageView，其代码(PatImageView.java)如下(2011-11-22 revised)：

 

[java] view plaincopy
  1. package com.pat.imageview;  
  2.   
  3. import android.app.Service;  
  4. import android.content.Context;  
  5. import android.graphics.Matrix;  
  6. import android.graphics.PointF;  
  7. import android.os.Vibrator;  
  8. import android.util.FloatMath;  
  9. import android.view.GestureDetector;  
  10. import android.view.MotionEvent;  
  11. import android.view.View;  
  12. import android.widget.ImageView;  
  13.   
  14. public class PatImageView extends ImageView  
  15. {  
  16.     private Matrix matrix;  
  17.     private Matrix savedMatrix;  
  18.       
  19.     private boolean long_touch = false;  
  20.     private static int NONE = 0;  
  21.     private static int DRAG = 1;    // 拖动  
  22.     private static int ZOOM = 2;    // 缩放  
  23.     private static int ROTA = 3;    // 旋转  
  24.     private int mode = NONE;  
  25.       
  26.     private PointF startPoint;  
  27.     private PointF middlePoint;  
  28.       
  29.     private float oldDistance;  
  30.     private float oldAngle;  
  31.   
  32.     private Vibrator vibrator;  
  33.       
  34.     private GestureDetector gdetector;  
  35.       
  36.     public PatImageView(final Context context)  
  37.     {  
  38.         super(context);  
  39.   
  40.         matrix = new Matrix();  
  41.         savedMatrix = new Matrix();  
  42.           
  43.         matrix.setTranslate(0f, 0f);  
  44.         setScaleType(ScaleType.MATRIX);  
  45.         setImageMatrix(matrix);  
  46.           
  47.         startPoint = new PointF();  
  48.         middlePoint = new PointF();  
  49.           
  50.         oldDistance = 1f;  
  51.           
  52.         gdetector = new GestureDetector(context, new GestureDetector.OnGestureListener()  
  53.         {  
  54.             @Override  
  55.             public boolean onSingleTapUp(MotionEvent e)  
  56.             {  
  57.                 return true;  
  58.             }  
  59.               
  60.             @Override  
  61.             public void onShowPress(MotionEvent e)  
  62.             {  
  63.             }  
  64.               
  65.             @Override  
  66.             public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY)  
  67.             {  
  68.                 return true;  
  69.             }  
  70.               
  71.             @Override  
  72.             public void onLongPress(MotionEvent e)  
  73.             {  
  74.                 long_touch = true;  
  75.                 vibrator = (Vibrator) context.getSystemService(Service.VIBRATOR_SERVICE);  
  76.                 // 振动50ms，提示后续的操作将是旋转图片，而非缩放图片  
  77.                 vibrator.vibrate(50);  
  78.             }  
  79.               
  80.             @Override  
  81.             public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY)  
  82.             {  
  83.                 return true;  
  84.             }  
  85.               
  86.             @Override  
  87.             public boolean onDown(MotionEvent e)  
  88.             {  
  89.                 return true;  
  90.             }  
  91.         });  
  92.           
  93.         setOnTouchListener(new OnTouchListener()  
  94.         {  
  95.             public boolean onTouch(View view, MotionEvent event)  
  96.             {  
  97.                 switch(event.getAction() & MotionEvent.ACTION_MASK)  
  98.                 {  
  99.                 case MotionEvent.ACTION_DOWN:           // 第一个手指touch  
  100.                     savedMatrix.set(matrix);  
  101.                     startPoint.set(event.getX(), event.getY());  
  102.                     mode = DRAG;  
  103.                     long_touch = false;  
  104.                     break;  
  105.                 case MotionEvent.ACTION_POINTER_DOWN:   // 第二个手指touch  
  106.                     oldDistance = getDistance(event);   // 计算第二个手指touch时，两指之间的距离  
  107.                     oldAngle = getDegree(event);        // 计算第二个手指touch时，两指所形成的直线和x轴的角度  
  108.                     if(oldDistance > 10f)  
  109.                     {  
  110.                         savedMatrix.set(matrix);  
  111.                         middlePoint = midPoint(event);  
  112.                         if(!long_touch)  
  113.                         {  
  114.                             mode = ZOOM;  
  115.                         }  
  116.                         else  
  117.                         {  
  118.                             mode = ROTA;  
  119.                         }  
  120.                     }  
  121.                     break;  
  122.                 case MotionEvent.ACTION_UP:  
  123.                     mode = NONE;  
  124.                     break;  
  125.                 case MotionEvent.ACTION_POINTER_UP:  
  126.                     mode = NONE;  
  127.                     break;  
  128.                 case MotionEvent.ACTION_MOVE:  
  129.                     if(vibrator != null)    vibrator.cancel();  
  130.                     if(mode == DRAG)  
  131.                     {  
  132.                         matrix.set(savedMatrix);  
  133.                         matrix.postTranslate(event.getX() - startPoint.x, event.getY() - startPoint.y);  
  134.                     }  
  135.                       
  136.                     if(mode == ZOOM)  
  137.                     {  
  138.                         float newDistance = getDistance(event);  
  139.                           
  140.                         if(newDistance > 10f)  
  141.                         {  
  142.                             matrix.set(savedMatrix);  
  143.                             float scale = newDistance / oldDistance;  
  144.                             matrix.postScale(scale, scale, middlePoint.x, middlePoint.y);  
  145.                         }  
  146.                     }  
  147.                       
  148.                     if(mode == ROTA)  
  149.                     {  
  150.                         float newAngle = getDegree(event);  
  151.                         matrix.set(savedMatrix);  
  152.                         float degrees = newAngle - oldAngle;  
  153.                         matrix.postRotate(degrees, middlePoint.x, middlePoint.y);  
  154.                     }  
  155.                     break;  
  156.                 }  
  157.                 setImageMatrix(matrix);  
  158.                 invalidate();  
  159.                 gdetector.onTouchEvent(event);  
  160.                 return true;  
  161.             }  
  162.         });  
  163.     }  
  164.   
  165.     // 计算两个手指之间的距离  
  166.         private float getDistance(MotionEvent event)  
  167.         {  
  168.             float x = event.getX(0) - event.getX(1);  
  169.             float y = event.getY(0) - event.getY(1);  
  170.             return FloatMath.sqrt(x * x + y * y);  
  171.         }  
  172.       
  173.         // 计算两个手指所形成的直线和x轴的角度  
  174.         private float getDegree(MotionEvent event)  
  175.         {  
  176.             return (float)(Math.atan((event.getY(1) - event.getY(0)) / (event.getX(1) - event.getX(0))) * 180f);  
  177.         }  
  178.   
  179.         // 计算两个手指之间，中间点的坐标  
  180.         private PointF midPoint( MotionEvent event)  
  181.         {  
  182.             PointF point = new PointF();  
  183.             float x = event.getX(0) + event.getX(1);  
  184.             float y = event.getY(0) + event.getY(1);  
  185.             point.set(x / 2, y / 2);  
  186.           
  187.             return point;  
  188.         }  
  189. }  


 

 

下面完善PatImageViewActivity.java的代码，使之如下：

[java] view plaincopy
  1. package com.pat.imageview;  
  2.   
  3. import android.app.Activity;  
  4. import android.graphics.Bitmap;  
  5. import android.graphics.BitmapFactory;  
  6. import android.os.Bundle;  
  7. import android.view.Window;  
  8. import android.view.WindowManager;  
  9.   
  10. public class PatImageViewActivity extends Activity  
  11. {  
  12.     @Override  
  13.     public void onCreate(Bundle savedInstanceState)  
  14.     {  
  15.         super.onCreate(savedInstanceState);  
  16.           
  17.         requestWindowFeature(Window.FEATURE_NO_TITLE);  
  18.         this.getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,   
  19.                 WindowManager.LayoutParams.FLAG_FULLSCREEN);  
  20.           
  21.         PatImageView piv = new PatImageView(this);  
  22.         Bitmap bmp = BitmapFactory.decodeResource(getResources(), R.drawable.sophie);  
  23.   
  24.         piv.setImageBitmap(bmp);  
  25.           
  26.         setContentView(piv);  
  27.     }  
  28. }  


 

由于有些手势在模拟器上无法模拟，所以就不上运行结果的图片了。本人在真机上运行后(照片就不拍了，有点累啦)，可以轻松做到：

1.     很方便地拖动图片(比如，单指按住屏幕进行拖动)

2.     很方便地缩放图片(比如，双指按住屏幕进行分开或者并拢操作，可分别实现放大或者缩小图片的功能)

3.     长按出现振动后，可以很方便地旋转图片(一个手指固定，另外一个手指围绕那个固定的手指运动)。
分享到：
| Video三种播放方式
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    2011.10.12（3）——— android Matrix学习02

    在Android开发中，Matrix类是处理图像变换的重要工具，它允许开发者对位图进行旋转、缩放、平移等操作。这篇博客“2011.10.12（3）——— android Matrix学习02”可能深入探讨了Matrix类的使用方法，虽然具体的细节...

    安卓图片加载缓存相关-android相册系统(用Matrix实现).zip

    综上所述，这个项目提供了关于Android图片加载和缓存的实践经验，特别是使用Matrix进行图像变换。开发者可以从中学习到如何自定义图片加载策略以及如何有效利用Matrix进行图片处理。不过，实际应用时，建议结合成熟...

    android缩放组件源码

    3. **Matrix变换**：在Android中，`Matrix`类是进行图像变换的核心工具。在缩放操作中，`Matrix.postScale()`或`Matrix.preScale()`方法会被调用来改变图像的大小。源码会展示如何根据缩放比例更新`Matrix`对象，并...

    Android仿斗鱼领取鱼丸文字验证(二)源码

    【Android仿斗鱼领取鱼丸文字验证(二)源码】是一个关于在Android平台上实现类似斗鱼直播平台的文字验证码功能的代码示例。这个项目主要关注的是如何创建一个中文验证码系统，以确保用户在领取虚拟物品（如鱼丸）时的...

    Android应用源码之MyImageView1.zip

    通过分析这个压缩包中的源码，我们可以深入理解Android图像显示机制，以及如何自定义视图来满足特定需求。 Android中的ImageView是用于显示图像的基本控件，它可以从资源、网络或者内存中加载图片。然而，有时系统...

    Android美女拼图.zip

    【Android美女拼图】是一款基于Android平台的拼图游戏应用，源码的提供为我们揭示了其内部的工作原理和实现方式。下面将详细解读这个项目中涉及的重要知识点。 1. **Android开发环境**：`.classpath` 和 `.project`...

    Android应用源码之通过手势对图片进行任意放大绽放旋转.zip

    在Android开发中，手势识别是实现用户交互的重要一环，特别是在图像处理和界面操作中。本项目"Android应用源码之通过手势对图片进行任意放大绽放旋转.zip"提供了一个实例，教你如何通过手势来实现对图片的自由缩放、...

    [数字图像处理-Java语言算法描述-源码].Wilhelm Burger.(译)黄华.清华大学出版社.2010

    3. **图像变换**：了解傅里叶变换、离散余弦变换在图像处理中的应用，以及如何通过这些变换进行频域分析和图像压缩。 4. **图像分割**：掌握阈值分割、区域生长、水平集等分割方法，以及如何评估分割效果。 5. **...

    Android高级应用源码-Android图片的旋转，缩放，剪切，存储.zip

    这份"Android高级应用源码-Android图片的旋转，缩放，剪切，存储.zip"提供了对Android图片进行各种操作的源码示例，包括旋转、缩放、剪切和存储等关键功能。下面我们将详细探讨这些知识点。 1. 图片旋转： 在...

    android自学总结

    位图操作在Android中很常见，Matrix类提供了对图像变换的支持，包括translate（平移）、rotate（旋转）、scale（缩放）和skew（倾斜）四种基本操作。每种变换都有set、post和pre三种方式，set直接修改Matrix，post是...

    图片缩放和多点触摸(1).zip安卓程序源码资源下载

    开发者可能会使用Matrix进行图像变换，实现图片的放大缩小功能。 3. **多点触摸(Multi-Touch)**：Android支持多点触摸事件处理，用户可以通过两个或更多的手指进行操作。在源码中，开发者可能会监听MotionEvent事件...

    Google Android sdk 开发范例大全 部分章节代码

    8.5 将网络图像网址放入Gallery中显示——URL.URLConnection.BaseAdapter 8.6 即时访问网络图文件展示——HttpURLConnection 8.7 手机气象局,实时卫星云图——HttpURLConnection与URLConnection和运行线程 8.8 通过...

    Android开发图片验证码的实现

    在Android应用开发中，图片验证码（CAPTCHA）是一种常见的安全机制，用于防止自动化脚本或机器人进行恶意操作，如注册、登录等。本教程将详细讲解如何在Android项目中实现图片验证码的功能。 首先，理解图片验证码...

    开发者网址

    1. **Matrix与ColorMatrix的应用**：`Matrix`类用于操作图像的几何变换，如缩放、旋转和平移；`ColorMatrix`则用于颜色变换，可以实现色彩校正和特效。 2. **9-patch图像资源**：这是一种特殊的PNG图像格式，允许...

    Google Android SDK开发范例大全(PDF高清完整版1)（4-1）

    8.5 将网络图像网址放入Gallery中显示——URL.URLConnection.BaseAdapter 8.6 即时访问网络图文件展示——HttpURLConnection 8.7 手机气象局,实时卫星云图——HttpURLConnection与URLConnection和运行线程 8.8 通过...

    Google Android SDK开发范例大全(PDF完整版4)（4-4）

    8.5 将网络图像网址放入Gallery中显示——URL.URLConnection.BaseAdapter 8.6 即时访问网络图文件展示——HttpURLConnection 8.7 手机气象局,实时卫星云图——HttpURLConnection与URLConnection和运行线程 8.8 通过...

    author-chrp.zip_Author_ Author

    【标题】"author-chrp.zip_Author_...总的来说，这个压缩包提供了学习和实践Android图像处理，特别是图片缩放功能的宝贵资源。无论是对Android开发者还是想要提升图像处理技能的学习者来说，都是一份有价值的参考资料。

    android 3D相册完美实现

    在Android平台上，开发一款具有3D效果的相册应用是一项技术挑战，但通过巧妙的编程技巧和利用Android SDK中的特定组件，可以实现令人惊叹的视觉体验。本项目名为"android 3D相册完美实现"，它展示了如何将普通的相册...

    Google Android SDK开发范例大全(PDF高清完整版3)（4-3）

    8.5 将网络图像网址放入Gallery中显示——URL.URLConnection.BaseAdapter 8.6 即时访问网络图文件展示——HttpURLConnection 8.7 手机气象局,实时卫星云图——HttpURLConnection与URLConnection和运行线程 8.8 通过...

Magicbox
Global site tag (gtag.js) - Google Analytics