Android自定义控件之可平移、缩放、旋转图片控件

Posted 2023-03-07

参考技术A

先上效果图

源码

单点拖动图片对图片进行平移操作。双手缩放图片大小和旋转图片到一定的角度。图片缩放的时候 不能大于最大的缩放因子和小于最小的缩放因子。大于最大缩放因子或者小于最小缩放因子需要对图像进行回弹。图片旋转的角度只能为90度的倍数，不满足90度要进行回弹。图片回弹要一个渐变的效果。

大体思路： 首先，android中提供了Matrix类可以对图像进行处理。其次，要显示一张图片最容易想到的就是ImageView。回弹要求渐变的过程，可以通过属性动画进行设置。所以大体的思路是：继承ImageView，重写onTouchEvent()方法，判断事件类型，在对应的事件使用Matrix对图像进行变换。
Matrix是一个已经封装好的矩阵，最重要的作用就是对坐标点进行变换。
举个栗子：
1.某个点(x0，y0，1)通过单位矩阵E映射得到的点还是(x0,y0,1)。

3.点(x0，y0，1)通过矩阵T映射得到的点就会做如下的变换

可以看到点(x0，y0，1)经过T矩阵在x轴方向上平移了dx，在y轴方向上平移了dy。

通过以上的变换可以得到具体的思路： 我们维护一个图像对应的矩阵mCurrentMatrix，该矩阵主要是对ImageView中的图像的各个点进行映射。ImageView在容器位置摆放完成之后，置mCurrentMatrix矩阵为单位矩阵。当onTouchEvent()方法中触发单点触控并且手指进行平移的时候，调用矩阵mCurrentMatrix的postTranslate(dx,dy)，对mCurrentMatrix进行变换。当手指抬起，利用变换结束后的矩阵对图像的各个点进行映射，从而得到平移变换后的图像。同理可得，在两只手指进行缩放旋转的时候，我们对矩阵mCurrentMatrix进行各种变换，当缩放旋转的事件结束再利用变换完的矩阵去映射图像的各个点，从而得到缩放、旋转后的图像。

安卓自定义View进阶 - Matrix原理
安卓自定义View进阶 - Matrix详解

首先理清事件的逻辑：

初始化图像大小和位置

缩放图像大小和控件大小自适应，平移图像中心和控件中心重合

onTouchEvent()函数

平移操作

将图像对应的矩阵进行变换。

缩放操作

mBoundRectF为记录图像边界的矩形。缩放的时候选取图像的中心进行缩放。

旋转操作

旋转的时候旋转的旋转中心也是图像的中心

图像中各个点的映射

调用ImageView的setImageMatrix(Matrix matrix)会让ImageView根据设置的matrix去重新绘制图像。

更新图像的矩形边界

获得图像的矩形，并根据矩阵映射矩形各个点的坐标。

缩放回弹

旋转回弹

一些计算方法

要求图像的变换是一个渐变的过程，很容易想到的就是属性动画。因为属性动画本身就是对值进行不断set的过程。而我们维护的矩阵也是一个值，所以很自然可以想到，如果得到回弹之前的矩阵的值以及回弹之后矩阵的值，就可以根据动画监听器中动画当前的系数值去改变矩阵的值。

对animator对象设置完监听器之后，就可以在手指抬起的时候调用属性动画的start()方法开启动画。

自定义可平移、缩放、旋转的控件主要点有两个方面：一是onTouchEvent()中判断平移、旋转、缩放的触发条件，平移位移量、缩放比例因子、旋转角度的计算。二是Matrix矩阵的应用。