前言

最近有需求要做一个画布，这个画布以一个图片为背景，可以实现缩放，涂鸦以及贴纸的功能，缩放和涂鸦要兼顾，于是就想到了可以加入手势和多点触控，大致就是两只手指头可以拖动或者旋转或者放大，单只手指可以涂鸦画东西之类的，恩，具体的需求在这里先描述了，然后看下大致的实现。

效果展示

自定义view.gif

思路

思考一
通过继承ImageView，类似PhotoView 的实现，因为photoivew 已经实现了旋转和缩放的功能，在其基础上继承拓展，只需要复写onDraw方法，将触摸的轨迹转化为Path 直接draw到canvas上即可。可以实现的，但是要注意一点，那就是坐标转化：你的单个手指移动的轨迹坐标点们是相对于这个view的位置的，当你旋转或者缩放这个view 的时候，结果是先前保存的坐标轨迹是无法匹配到当前旋转或缩放处理后的view，这个时候就需要你将坐标轨迹进行映射处理。
思考二
则是直接复写View控件，通过将图片直接转换为bitmap后，draw到view 的画布上。整个过程就是先在bitmap上新建一个画布，然后将轨迹坐标draw到这个bitmap的canvas上，也就是这个bitmap上，最后在onDraw的回调里面，将这个bitmap 画到整个View 的canvas上，当然，最后要自行实现bitmap的缩放，旋转等坐标转换功能，好处是先前的涂鸦会一直保持。

预先准备

这个时候就必须要提一下Martix,Andorid 贴心的给我们提供了这样一个工具类，我们完全可以摆脱坐标点计算之苦啦。
在这里强烈推荐大家看下 android matrix 最全方法详解与进阶（完整篇），原理以及api介绍的相当详细。

实现

考虑到要有贴图，并且贴图支持大小缩放的功能，拖动功能，采用了第二种方式，其实感觉采用第一种方式应该会更简单点（微笑脸），好了，下面介绍下具体实现
首先要处理这个view 的touch事件:

 if (actionMode == ACTION_DRAG) {
      onDragAction(curX - preX, curY - preY, event);//拖动监听
  } else if (actionMode == ACTION_ROTATE) {
      onRotateAction(curPhotoRecord);//旋转监听
  } else if (actionMode == ACTION_SCALE) {
      mScaleGestureDetector.onTouchEvent(event); //缩放监听
  }

涂鸦
就是将拇指略过之处的所以坐标连接起来，而这个坐标id呢，不是绝对坐标，而是对于这个view 的相对坐标（毕竟还要支持缩放和撤销操作的），单是缩放则不用过多约束，只要将path画到bitmap Canvas上，显示出来即可，但是需要支持撤销，这就要求必须要保持每一个笔画的坐标点组啦，缩放或者旋转时，相对于这个view 的坐标肯定会发生变化，大致给下代码：

//缩放处理描点位置
 private void convertDrawedPoiontsPosition(float scaleX, float scaleY, float x, float y) {
     curTextSize = curTextSize * scaleX;
     textPaint.setTextSize(curTextSize);

     Matrix pointsMatrix = new Matrix();
     pointsMatrix.postScale(scaleX,scaleY,x,y); //scaleX 为 x方向缩放参数，scaleY为y轴缩放参数，(x,y)为缩放中心点坐标
     for( Object object :curSketchData.drawPathList){//drawPathList为存放坐标的数组
         if(object instanceof SketchData.Angle){
             SketchData.Angle angle = (SketchData.Angle)object;
             float[] photoCornersSrc = new float[6];
             float[] photoCorners = new float[6];
             photoCornersSrc[0] = angle.start.x;
             photoCornersSrc[1] = angle.start.y;
             photoCornersSrc[2] = angle.middle.x;
             photoCornersSrc[3] = angle.middle.y;
             photoCornersSrc[4] = angle.end.x;
             photoCornersSrc[5] = angle.end.y;
             //angle.matrix.mapPoints(photoCorners, photoCornersSrc);
             pointsMatrix.mapPoints(photoCorners, photoCornersSrc);
             angle.start.x = photoCorners[0];
             angle.start.y = photoCorners[1];
             angle.middle.x = photoCorners[2];
             angle.middle.y = photoCorners[3];
             angle.end.x = photoCorners[4];
             angle.end.y = photoCorners[5];
         }else if(object instanceof SketchData.Length){
             SketchData.Length length = (SketchData.Length)object;
             float[] photoCornersSrc = new float[4];
             float[] photoCorners = new float[4];
             photoCornersSrc[0] = length.start.x;
             photoCornersSrc[1] = length.start.y;
             photoCornersSrc[2] = length.end.x;
             photoCornersSrc[3] = length.end.y;
             //angle.matrix.mapPoints(photoCorners, photoCornersSrc);
             pointsMatrix.mapPoints(photoCorners, photoCornersSrc);
             length.start.x = photoCorners[0];
             length.start.y = photoCorners[1];
             length.end.x = photoCorners[2];
             length.end.y = photoCorners[3];
         }

     }

     drawDrawedPosition();

 }

缩放
那么如何得到缩放的中心点呢？实现ScaleGestureDetector 实例，调用onTouchEvent,此时会回调onScale(ScaleGestureDetector detector)，我们来看下使用这个detector 的具体逻辑

private void onScaleAction(ScaleGestureDetector detector) {
        Log.e("shang", "onscale :" + detector.getScaleFactor());
        float[] photoCorners = calculateBgCorners(backgroundSrcRect);//获取现阶段底图的标志坐标点
        //目前图片对角线长度
        float len = (float) Math.sqrt(Math.pow(photoCorners[0] - photoCorners[4], 2) + Math.pow(photoCorners[1] - photoCorners[5], 2));
        double photoLen = Math.sqrt(Math.pow(backgroundSrcRect.width(), 2) + Math.pow(backgroundSrcRect.height(), 2));
        float scaleFactor = detector.getScaleFactor();
        //设置Matrix缩放参数
        if ((scaleFactor < 1 && len >= photoLen * SCALE_MIN && len >= SCALE_MIN_LEN) || (scaleFactor > 1 && len <= photoLen * SCALE_MAX)) {
            Log.e(scaleFactor + "", scaleFactor + "");
            convertDrawedPoiontsPosition(scaleFactor, scaleFactor, photoCorners[8], photoCorners[9]);//涂鸦点坐标转换
            currentDrawedBgM.postScale(scaleFactor, scaleFactor, photoCorners[8], photoCorners[9]);//底图矩阵缩放
            apply2DrawedCanvas();
            mScaleValue = scaleFactor * mScaleValue;
            Log.e("shang", "scale :" + mScaleValue);
            drawDrawedPosition();
        }

}

其中

private float[] calculateBgCorners(RectF rectF) {
    float[] photoCornersSrc = new float[10];//0,1代表左上角点XY，2,3代表右上角点XY，4,5代表右下角点XY，6,7代表左下角点XY，8,9代表中心点XY
    float[] photoCorners = new float[10];//0,1代表左上角点XY，2,3代表右上角点XY，4,5代表右下角点XY，6,7代表左下角点XY，8,9代表中心点XY
    photoCornersSrc[0] = rectF.left;
    photoCornersSrc[1] = rectF.top;
    photoCornersSrc[2] = rectF.right;
    photoCornersSrc[3] = rectF.top;
    photoCornersSrc[4] = rectF.right;
    photoCornersSrc[5] = rectF.bottom;
    photoCornersSrc[6] = rectF.left;
    photoCornersSrc[7] = rectF.bottom;
    photoCornersSrc[8] = rectF.centerX();
    photoCornersSrc[9] = rectF.centerY();
    currentDrawedBgM.mapPoints(photoCorners, photoCornersSrc);//现阶段的底图的矩阵
    return photoCorners;
}

其中

private void apply2DrawedCanvas() {
    Matrix matrix = new Matrix();
    currentDrawedBgM.invert(matrix);
    mBGCanvas.setMatrix(matrix);//mBGCanvas为底图bitmap所在的canvas
}

拖动
拖动和缩放类似，都是对当前涂鸦坐标做转换，另对底图矩阵做变换

private void onDragAction(float distanceX, float distanceY, MotionEvent event) {
     //底图变化
      currentDrawedBgM.postTranslate((int) distanceX, (int) distanceY);
      apply2DrawedCanvas();
     //涂鸦坐标转换
      convertDrawedPointPosition(distanceX,distanceY);
      drawDrawedPosition();

 }

旋转

 private void onRotateAction(PhotoRecord record) {
     float[] corners = calculateCorners(record);
     //放大
     //目前触摸点与图片显示中心距离
     float a = (float) Math.sqrt(Math.pow(curX - corners[8], 2) + Math.pow(curY - corners[9], 2));
     //目前上次旋转图标与图片显示中心距离
     float b = (float) Math.sqrt(Math.pow(corners[4] - corners[0], 2) + Math.pow(corners[5] - corners[1], 2)) / 2;
     //旋转
     //根据移动坐标的变化构建两个向量，以便计算两个向量角度.
     PointF preVector = new PointF();
     PointF curVector = new PointF();
     preVector.set(preX - corners[8], preY - corners[9]);//旋转后向量
     curVector.set(curX - corners[8], curY - corners[9]);//旋转前向量
     //计算向量长度
     double preVectorLen = getVectorLength(preVector);
     double curVectorLen = getVectorLength(curVector);
     //计算两个向量的夹角.
     double cosAlpha = (preVector.x * curVector.x + preVector.y * curVector.y)
             / (preVectorLen * curVectorLen);
     //由于计算误差，可能会带来略大于1的cos，例如
     if (cosAlpha > 1.0f) {
         cosAlpha = 1.0f;
     }
     //本次的角度已经计算出来。
     double dAngle = Math.acos(cosAlpha) * 180.0 / Math.PI;
     // 判断顺时针和逆时针.
     //判断方法其实很简单，这里的v1v2其实相差角度很小的。
     //先转换成单位向量
     preVector.x /= preVectorLen;
     preVector.y /= preVectorLen;
     curVector.x /= curVectorLen;
     curVector.y /= curVectorLen;
     //作curVector的逆时针垂直向量。
     PointF verticalVec = new PointF(curVector.y, -curVector.x);

     //判断这个垂直向量和v1的点积，点积>0表示俩向量夹角锐角。=0表示垂直，<0表示钝角
     float vDot = preVector.x * verticalVec.x + preVector.y * verticalVec.y;
     if (vDot > 0) {
         //v2的逆时针垂直向量和v1是锐角关系，说明v1在v2的逆时针方向。
     } else {
         dAngle = -dAngle;
     }
     currentDrawedBgM.postRotate((float) dAngle, corners[8], corners[9]);
 }

撤销
撤销就是你首先保存了涂鸦的坐标组，和原始的底图，将坐标组坐标减一，重新画到原始底图上。
恢复类似，代码我就不贴出来了。
```
mBGCanvas.drawBitmap(curSketchData.backgroundBMOrigin, currentDrawedBgM, null);
mBGCanvas.drawPath(mPath)；
```
贴纸
其实贴纸的逻辑，和增加第一个底图的逻辑是一直的，只不过要加一个flag来标志操作的是贴纸还是底图。这里推荐大家看下这篇文章Android贴纸。

总结

在做图片处理时，首要理解坐标的转换，矩阵有着非常重要的地位，理解好android提供的Martix，很多类似的问题都会事倍功半。

参考链接

Android贴纸

android matrix 最全方法详解与进阶（完整篇）

android 画板 --- 涂鸦, 缩放，旋转，贴纸实现

前言

效果展示

思路

预先准备

实现

总结

参考链接