在绘图过程中的鼠标事件

在绘图的过程要用到的无非就是mouseDown，mouseMove，mouseUp事件。可能你还会说有mouseDrag事件，mouseDrag其实我们可以自己来判断，mouseDown+mouseMove构成了一个mouseDrag事件，所以我们监听上面的三个事件足够了。如果还有一下图形的绘制中需要双击结束绘制，那么也要监听dblclick双击事件。看起来是比较简单，但是这些鼠标事件构成了我们诸多操作的源头。要理清这些事件中分别要实现哪些功能，就要先思考在绘图过程中都有哪些模式。

       要搞清具体有哪些模式。可以参照Adobe illustrator CS6中绘图的操作，如果你点击一个矩形，此时mouseDown+mouseMove+mouseUp你就可以绘制一个矩形，如果你想移动这个矩形，则先要点击"选择工具"，这个按钮的作用也就是结束当前的绘制模式，此时mouseDown+mouseMove+mouseUp操作就可以拖动这个矩形到合适的位置。如果不点击“选择工具”这个按钮，那么相同的鼠标操作则会又绘制出一个新的矩形来。可见首先要确定模式，才能编写相关模式下鼠标操作所要执行的模式。在这里我们可以分为绘图模式，选择模式，区域选择模式（也就是框选）。
       对于多种情况多种操作的话，根据思路绘制出流程图，然后按照流程图coding是个不错的选择。下面是我绘制的流程图

说明：其中在mouseMove中设置了子模式，是将选择模式又进行了细分，因为选择模式下可能是对图形进行resize操作也可能是对图形进行平移的操作。在mouseUp中根据子模式的不同调用图形类的相对应的方法。

具体代码如下，代码为js编写，因为代码中牵涉了其他的方法等，所以看一下逻辑即可

 onCanvasMouseDown(evt) {

        var _this = this;
        if ($("#" + _this.currentELayer).css('display') != "none") {
            var point = new Point(evt.offsetX, evt.offsetY);
            var currentScale = editor.zoomManager.currentZoom;
            var scalePoint = new Point(point.x / currentScale, point.y / currentScale);
            var mouseTarget = _this.getMouseTarget(evt);
            // 获取当前模式
            var selectionMode = editor.selectionInfoManager.selectionMode;