以下分析使用Sigmajs框架的源码进行分析，有兴趣的同学可以看看。本文主要介绍Canvas的事件机制和一些设计思路。图文事件、设计思路和实现介绍。图形事件需要支持如下内容：支持多种事件类型事件触发机制事件冲突问题事件类型mousemousedownmousemovemouseupmouseentermouseleavedblclickcontextmenuclickwheeldrag基于mousedownmoveleave做二次开发。所有在Canvas上触发的事件都是在CanvasDOM事件触发的基础上实现的。以点击为例：鼠标在画布上点击会触发CanvasDOM事件，然后与图形发生碰撞。如果有图形点击，如果没有，就是画布点击。伪代码示例：Canvas.addEventListener("click",function(){//MouseCoords==CanvasCoords//getShapeAtPoint(Shapes,CanvasCoords)if(true){//如果它击中图形this.emit("clickGraph",false);返回}this.emit("clickCanvas",false);//},false);事件冲突问题drag和click的冲突由于canvas是一个DOM节点，并不是每个图元都可以被识别为DOM对象，所以不能使用dragable来设置图形是否可以拖动。这时候使用触摸板时的点击和拖动就会发生冲突。模拟使用mousedown和mouseup的过程，对两者的距离和时间差进行判断。特别是单击或拖动事件。click和dbclick的冲突其实不是冲突问题。dbclick的实现是基于click的，所以需要有click事件的处理，方便识别。请看代码示例：handleClick(e:MouseEvent):void{if(!this.enabled)return;这个。点击++；如果(this.clicks===2){this.clicks=0;if(typeofthis.doubleClickTimeout==="number"){clearTimeout(this.doubleClickTimeout);this.doubleClickTimeout=null;}返回this.handleDoubleClick(e);}setTimeout(()=>{this.clicks=0;this.doubleClickTimeout=null;},DOUBLE_CLICK_TIMEOUT);如果(this.draggedEvents
