canvas实现拖动、旋转、缩放和删除功能

1、这一块主要在前面功能上增加下图红色框的html代码和css样式，主要用于显示包住图片的边框，且有三个图标（删除图标、旋转图标和缩放图标）。

1、声明变量和初始化数据，详细代码如下图，基于前面功能声明修改了红色框的数据，变量的作用都已经做了详细备注，可自行查看代码，后面也会对相关的计算公式进行详细分析。

2、分析实现过程中关联的函数（如下图）：

       由于canvas没办法直接点击画布中的图片，但是div却可以点击、拖动等，所以创建了一个等大于图片且旋转度跟图片一样的div覆盖在上面，通过对div的操作重新绘制图片到画布；activeBox函数就是用于创建一个等大于图片且旋转度跟图片一样的div；

       calcDistance函数用于计算两点之间的距离。

3、分析前面功能修改了的代码（如下图），图2和图3都只是在函数drawImageToCanvas的基础上做了相应的修改，这一块比较简单；主要来分析图1（函数drawImageToCanvas），原来只是单纯处理滤镜，这次加上了拖动、旋转和缩放功能，这一块改动还是比较大，分析如下：

       获取原始图片的宽高（initImgWidth和initImgHeight），用于后面计算对角线的值，后面分析缩放会说明；

       计算旋转参照点（initRotateCoordinate）和计算图片中心点（centerCoordinate），后面分析旋转会说明；

       实现缩放的原理就是在原图的宽高乘以scaleValue，然后用计算出来的新宽高（imgWidth和imgHeight）重新绘制图片，该值的计算后面缩放会说明；

       实现拖动的原理就是在原来的绘制坐标上加上moveDistance（从最开始点到最终点的移动距离），该值的计算后面移动会说明；

       实现旋转的原理就是增加ctx.rotate(rotateValue)，且为了使图片中心旋转，需前面增加偏移坐标点到画布中心ctx.translate(canvas.width / 2 + moveDistance.x, canvas.height / 2 + moveDistance.y)，后面为了画布能显示到正确位置，还需要把坐标点偏移到原位ctx.translate(-(canvas.width / 2 + moveDistance.x), -(canvas.height / 2 + moveDistance.y))；最后一点注意，使用了translate或rotate等，需要加上ctx.save()和ctx.restore()，不然会产生不可预期的效果；

       获取图片坐标和宽高的数据（boxObject），传值给函数activeBox显示覆盖图片大小的div。

1、实现过程前面分析函数drawImageToCanvas时，已经大概说了一下，主要就是计算移动距离、旋转值和缩放值，把这三个值更改到绘制函数drawImageToCanvas相应位置，然后根据修改值重新绘制图片到画布，从而实现拖动、旋转和缩放的效果，三个值的计算原理如下：

2、移动距离计算原理，记录点击坐标点（lastCoordinate），移动过程中记录坐标点curCoordinate，然后把两者的差值moveDistance（存储了两者x轴和y轴各自的差值）传值给函数drawImageToCanvas，更改里面绘制图片坐标点位置（x, y），从而实现移动，计算过程有两点需要注意（代码如下图）：

       松开点击时候，需要移除事件touchmove，不然第二次会跳动；

       松开点击时候，需要把moveDistance赋值给initDistance，而前面点击时候传的差值moveDistance需加上initDistance，不然会因为前面缺失一段距离，导致移动跳动。

3、缩放值计算原理，移动过程中记录坐标点curCoordinate，然后计算该坐标点到图片中心点（centerCoordinate）的距离（scaleWidth），除以对角线一半的长度（diagonalWidth）得出缩放的比例（scaleValue）；最后该值传给函数drawImageToCanvas，更改里面绘制图片的宽高（原来基础上乘以scaleValue），从而实现缩放，计算过程有两点需要注意（代码如下图）：

       scaleValue不能等于0，不然会导致getImage报错；

       松开点击时候，需要移除事件touchmove，不然第二次会跳动。

4、旋转值计算原理，因为图片是根据中心点旋转，需要把整个旋转过程分为5部分，如下图1；为了判断属于那个部分，首先需要记录移动过程中的坐标点curCoordinate，用来跟图片中心点centerCoordinate比较大小（x y大于0和小于0会影响属于那个象限），然后比较参照点角度（lastAngle）和移动坐标点角度（curAngle）大小，最后利用x y 角度大小判断属于那个象限，根据不同部分使用不同的公式计算出旋转角度，并把该值传给函数drawImageToCanvas，更改里面旋转角度（ctx.rotate(rotateValue)，从而实现旋转（代码如下图）。

5、最后一个功能“删除”，这个功能比较简单（代码如下图），实现原理就是点击该按钮的时候清空画布ctx.clearRect(0, 0, canvas.width, canvas.height)。