转载请注明出处：/coderyue/article/details/51397409
之前写过一篇文章Android TextView 横竖排切换(字方向不变) 是自定义了一个LinearLayout, 实现了当然还不够， 还要对它进行操作， 平移，旋转 and 缩放， 相信很多小伙伴都知道对图片的平移等等操作最好用的就是矩阵了，因为有个方法叫做imageview.setImageMatrix(matrix)， 直接构造一个矩阵对象然后设置到图片上就进行相关操作了, 那我就会想了，其他的View没有这个方法么， 有兴趣的伙伴可以试试，结果是只有getMatrix(), 那对于不是图片的情况呢？下面我们一起一步步的研究吧。
先列一下矩阵的基本方法， 后面也要用到的：
平移操作：matrix.postTranslate(translateX, translateY); 参数为平移的距离，而不是平移到哪！
旋转操作：matrix.postRotate(newRotation, midP.x, midP.y); 参数为旋转的角度以及以midP.x, midP.y 为原点进行旋转
缩放操作：matrix.postScale(scale, scale, midP.x, midP.y); 参数为缩放的倍数以及缩放原点。
先说一下对图片操作的思路：
首先一定要对一个imageview添加一个OnTouchListener监听， 在MotionEvent.ACTION_DOWN(按下), MotionEvent.ACTION_MOVE(移动)，MotionEvent.ACTION_UP(抬起) 主要是这三个事件， 当然还有其他的事件要监听， 比如双指按下然后抬起一个的时候， 如果不监听这个事件的话那一个手指在屏幕的时候就会执行单击事件， 后面代码注释我会写到。
那根据矩阵的方法我会想到 在 手指按下 的时候我记录当前点击的坐标， 在手指移动的时候我计算出移动了多少， 然后matrix.postTranslate(translateX, translateY);执行平移，同理 缩放和旋转也要计算， 然后在不断移动的过程当中 不断的把生成的矩阵对象设置到图片上。我觉得描述出来就是这样了， 接下来看下我的效果图：
下面分析一下主要代码, 我写了详细的注释 方便查看
首先要添加一个view
private void addMyFrame() {//新添加一个view的话要把其他的都设置成未选中， 只有新添加的是选中for (int i = (addFrameHolders.size() - 1); i >= 0; i--) {AddWordFrame addWordFrame = addFrameHolders.get(i).getAddWordFrame();if (addWordFrame.isSelect()) {addWordFrame.setSelect(false);break;}}addWordFrame = new AddWordFrame(this);addWordFrame.setSelect(true);//添加到屏幕上frame.addView(addWordFrame);layout = addWordFrame.getLayout();addWordBitmap = BitmapUtils.convertViewToBitmap(layout);addWordWidth = addWordBitmap.getWidth();addWordHeight = addWordBitmap.getHeight();//这里是想平移到屏幕比较好看的位置addWordx1 = width/2 - addWordWidth /2;addWordy1 = height/3;//这里设置四个角的坐标是为了后续判断是不是点击到了删除或者旋转//原图左上角addWordFrame.leftTop.set(addWordx1, addWordy1);// 原图右上角addWordFrame.rightTop.set(addWordx1 + addWordWidth, addWordy1);// 原图左下角addWordFrame.leftBottom.set(addWordx1, addWordy1 + addWordHeight);// 原图右下角addWordFrame.rightBottom.set(addWordx1 + addWordWidth, addWordy1 + addWordHeight);addWordMatrix = new Matrix();addWordMatrix.postTranslate(addWordx1, addWordy1);addWordFrame.setMatrix(addWordMatrix);//这个类里面主要是存储当前view的区域AddWordFrameState addWordFrameState = new AddWordFrameState();addWordFrameState.setLeft(addWordx1);addWordFrameState.setTop(addWordy1);addWordFrameState.setRight(addWordx1 + addWordWidth);addWordFrameState.setBottom(addWordy1 + addWordHeight);AddFrameHolder addFrameHolder = new AddFrameHolder();addFrameHolder.setAddWordFrame(addWordFrame);addFrameHolder.setState(addWordFrameState);addFrameHolders.add(addFrameHolder);//设置一个监听addWordFrame.setOnTouchListener(new AddWordMyOntouch());AddWordSelectImageCount = addFrameHolders.size() - 1;}
接下来主要看下监听的类： （这里要是做图片缩放代码差不多）, 在action_move里面完成对view的平移旋转和缩放
class AddWordMyOntouch implements View.OnTouchListener {//俩个手指间的距离private float baseValue = 0;//原来的角度private float oldRotation;//旋转和缩放的中点private PointF midP;//点中的要进行缩放的点与图片中点的距离private float imgLengHalf;//保存刚开始按下的点private PointF startPoinF = new PointF();private int NONE = 0; // 无private int DRAG = 1; // 移动private int ZOOM = 2; // 变换@Overridepublic boolean onTouch(View v, MotionEvent event) {int eventaction = event.getAction();float event_x = (int) event.getRawX();float event_y = (int) event.getRawY() - StatusBarHeightUtil.getStatusBarHeight(context);//这里算是一个点击区域值 点中删除或者点中变换的100 * 100 的矩形区域 用这个区域来判断是否点中int tempInt = 100;int addint = 100;switch (eventaction & MotionEvent.ACTION_MASK) {case MotionEvent.ACTION_DOWN: // touch down so check if thestartPoinF.set(event_x, event_y);// 保存刚开始按下的坐标//因为可能要添加多个这样的view 所以要按选中了哪个selectMyFrame(event_x, event_y);//如果有选中状态的额viewif (AddWordSelectImageCount != -1) {addWordFrame = addFrameHolders.get(AddWordSelectImageCount).getAddWordFrame();addWordMatrix = addFrameHolders.get(AddWordSelectImageCount).getAddWordFrame().getMatrix();addWordSavedMatrix.set(addWordMatrix);AddWordMode = DRAG;//构造一个旋转按钮的矩形区域Rect moveRect = new Rect((int) addWordFrame.rightBottom.x - tempInt,(int) addWordFrame.rightBottom.y - tempInt, (int) addWordFrame.rightBottom.x + addint,(int) addWordFrame.rightBottom.y + addint);//删除按钮的矩形区域Rect deleteRect = new Rect((int) addWordFrame.leftTop.x - tempInt,(int) addWordFrame.leftTop.y - tempInt, (int) addWordFrame.leftTop.x + addint,(int) addWordFrame.leftTop.y + addint);//如果点中了变换if(moveRect.contains((int)event_x, (int)event_y)){LogUtils.e("点中了变换");// 点中了变换midP = midPoint(addWordFrame.leftTop, addWordFrame.rightBottom);imgLengHalf = spacing(midP, addWordFrame.rightBottom);oldRotation = rotation(midP, startPoinF);AddWordMode = ZOOM;}else if (deleteRect.contains((int)event_x, (int)event_y)) {// 点中了删除LogUtils.e("点中了删除");deleteMyFrame();}}break;case MotionEvent.ACTION_POINTER_DOWN:midP = midPoint(addWordFrame.leftTop, addWordFrame.rightBottom);imgLengHalf = spacing(midP, addWordFrame.rightBottom);oldRotation = rotationforTwo(event);break;case MotionEvent.ACTION_MOVE: // touch drag with the ball//如果是双指点中if (event.getPointerCount() == 2) {if (AddWordSelectImageCount != -1) {AddWordMode = NONE;float x = event.getX(0) - event.getX(1);float y = event.getY(0) - event.getY(1);float value = (float) Math.sqrt(x * x + y * y);// 计算两点的距离//旋转的角度float newRotation = rotationforTwo(event) - oldRotation;if (baseValue == 0) {baseValue = value;} else {//旋转到一定角度再执行 不能刚点击就执行旋转或者缩放if (value - baseValue >= 10 || value - baseValue <= -10) {float scale = value / baseValue;// 当前两点间的距离除以手指落下时两点间的距离就是需要缩放的比例。addWordMatrix.set(addWordSavedMatrix);addWordMatrix.postScale(scale, scale, midP.x, midP.y);addWordMatrix.postRotate(newRotation, midP.x, midP.y);}}}} else if (event.getPointerCount() == 1) {//单指点击if (AddWordSelectImageCount != -1) {if (AddWordMode == DRAG) {if (event_x < MyApplication.getInstance().getScreenWidth() - 50 && event_x > 50&& event_y > 100&& event_y < MyApplication.getInstance().getScreenHeight() - 100) {addWordMatrix.set(addWordSavedMatrix);// 图片移动的距离float translateX = event_x - startPoinF.x;float translateY = event_y - startPoinF.y;addWordMatrix.postTranslate(translateX, translateY);}} else if (AddWordMode == ZOOM) {//点击到了缩放旋转按钮PointF movePoin = new PointF(event_x, event_y);float moveLeng = spacing(startPoinF, movePoin);float newRotation = rotation(midP, movePoin) - oldRotation;if (moveLeng > 10f) {float moveToMidLeng = spacing(midP, movePoin);float scale = moveToMidLeng / imgLengHalf;addWordMatrix.set(addWordSavedMatrix);addWordMatrix.postScale(scale, scale, midP.x, midP.y);addWordMatrix.postRotate(newRotation, midP.x, midP.y);}}}}if (AddWordSelectImageCount != -1) {//最后在action_move 执行完前设置好矩阵 设置view的位置addWordFrame = addFrameHolders.get(AddWordSelectImageCount).getAddWordFrame();adjustLocation(addWordMatrix, addWordFrame);}break;case MotionEvent.ACTION_POINTER_UP: //一只手指离开屏幕，但还有一只手指在上面会触此事件//什么都没做AddWordMode = NONE;break;case MotionEvent.ACTION_UP:AddWordMode = NONE;break;}return true;}}
那有了添加和相关操作， 那怎么判断选中状态呢，判断是否选中：
private void selectMyFrame(float x, float y) {//选取消所有的选中 后面只有点击到的才是选中状态for (int i = (addFrameHolders.size() - 1); i >= 0; i--) {AddFrameHolder addFrameHolder = addFrameHolders.get(i);if (addFrameHolder.getAddWordFrame().isSelect()) {addFrameHolder.getAddWordFrame().setSelect(false);break;}}for (int i = (addFrameHolders.size() - 1); i >= 0; i--) {AddFrameHolder addFrameHolder = addFrameHolders.get(i);//创建一个矩形区域 这里的getLeft getTop等等的意思是当前view的最左边 最上边 最右边和最下边 只有点击到这个区域里面才是选中Rect rect = new Rect((int)addFrameHolder.getState().getLeft(),(int)addFrameHolder.getState().getTop(),(int)addFrameHolder.getState().getRight(),(int)addFrameHolder.getState().getBottom());if (rect.contains((int) x, (int) y)) {//如果选中 当前view图层提到最上面addFrameHolder.getAddWordFrame().bringToFront();addFrameHolder.getAddWordFrame().setSelect(true);//记录选中了哪个AddWordSelectImageCount = i;LogUtils.e("选中");break;}AddWordSelectImageCount = -1;LogUtils.e("没选中");}}
上述的代码都非常的清晰，那么接下来还有一个难点就是上面的代码已经可以对普通的图片进行平移相关操作了， 那对其他的自定义view呢？ 这里我们用到了Canvas类，大家都知道要自定义一个view里面的内容只需要在Ondraw(Canvas canvas)里面画就可以了， 那我们把当前的matrix对象设置到这里面可不可以呢 ，当然是可以的，在我的AddWordFrame类的ondraw里面，看下代码:
@Overrideprotected void onDraw(Canvas canvas) {super.onDraw(canvas);this.setLayerType(View.LAYER_TYPE_HARDWARE, null);canvas.concat(matrix);this.setLayerType(View.LAYER_TYPE_NONE, null);}
特别注意，首先canvas.concat方法， canvas还有canvas.setMatrix()方法， 当然这俩个是有区别的， concat会和之前的matrix进行计算操作，有一种叠加的感觉， 而setMatrix会替换掉之前的matrix。
另外更要注意这俩句：
this.setLayerType(View.LAYER_TYPE_HARDWARE, null);
和this.setLayerType(View.LAYER_TYPE_NONE, null);
如果不加这俩句的话平移的时候大部分几率会出现重影想过， 小伙伴们可以注释掉试试哈。这里我的理解是做了一部缓存， 这个setLayerType一定要慎用！ 感兴趣的可以深入的研究它。
这里其实我是对当前view所在的画布(Canvas)进行了平移， 旋转和缩放的动作 ， 实际上是画布在动，而不是view在动， 而图片的矩阵缩放是imageview本身在动
如果有小伙伴有类似的需求可以留言或者在我的github上提出来：
源代码github地址：
/jinguangyue/AddwordDemo
关注我的 Google Play 独立开发公众号
通过从零到一在 Google Play 开发出下载量 300万 APP 的经历，我将把很多精彩的故事分享到公众号，扫描下方二维码和我一起开发 APP 赚美元吧！
