canvas 可拖拽图片选区

        近日，在完成了毕设的大部分功能之后，指导老师认为还需要在添加一些功能，我最后决定添加一个图片编辑功能——图片编辑，由于本人PS有使用过，所以，决定第一个需求就决定是一个可拖拽的选区功能。那就先谈谈实现可拖拽的选区功能的思路。

        首先导入一张图片并绘制在画布上，然后选区只是一个只有边框的矩形，每次刷新画布的时候，重新绘制一遍图片和选区的位置，而刷新的频率则通过mousemove来控制，而拖拽选区可分为两种，一种是拖动整个，另一种是拖动一个角。思路大致如此。

        现在来将思路实现。

        效果预览图：

        首先是次要的样式文件和dom结构：

次要

重要的来了，首先创建一个对象imgEdit:

canvas参数为一个dom数据

将imgEdit方法放置在原型对象prototype上，添加第一个方法初始化init:

canvas初始化以及载入图片

以及刷新画布：

刷新画布

在imgEdit中有一个selectArea构造函数，是为了创建和操作选区：

同样地，选区的方法也放置在原型对象上

其中选区绘制：

其次是拖动部位的判断，数字0，1，2，3，代表四个角，'all'则代表整个

拖动判断

拖动的实现：

最后是事件的监听：

如果在移动事件里采取判断移动部位，会导致鼠标移动快时，函数来不及处理，发生mouseout事件。

---

暂时先完成这一功能，下次继续添加。谢谢观看。

在此附上参考链接：可能需要翻墙