在绘图的过程要用到的无非就是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;
if (selectionMode == SelectionInfoManager.DRAWING_MODE) {
var drawingS