2021SC@SDUSC
综述
上次我们讨论了几何意义上的线之后,我们接下来进行讨论关于graphic包下的文件,这里面主要有drag、gradient、line、link、shape、transform等几个文件夹,分别代表着不同的图像图像操作,下面我们主要学习这几个包中的js内容。
graphic包
drag包
该包中主要有两个文件,分别是DragDropMgr.js和Draggable.js文件,其中DragDropMgr是全局拖拽管理器,支持同时拖拽多个元素,只需按住Ctrl 键就可以实现多选;另一个js文件是具体实现拖拽功能,所有需要拖拽功能的元素都可以mixin此类的实现,此实现依赖我们之前讲的事件处理机制,mixin此实现的类需要预先mixin eventful接口的默认实现,才能提供事件支持。下面我们对这两个类进行分开详细讨论。
DragDropMgr.js
这是一个工具类,作为一个全局的拖拽管理器,在该类中主要有构造函数、设置监听、停止监听、开始拖动、在拖动过程中、拖动结束、清除选中、获取当前选中的所有元素等这几个方法的作用,下面我们主要针对其中的关键信息进行分析。
startListen
开始监听的主要目的就是绑定鼠标监听,通过按下鼠标来触发事件,具体就是以下代码:进行了mousedown的事件绑定。
startListen() {
this.dispatcher.on('mousedown', this.dragStart, this);
return this;
}
stopListen
该函数主要的作用是停止监听,这个函数主要就是将所有监听都删除,同时将所有都归0,具体如下
stopListen() {
this.clearSelectionMap();
this._draggingItem = null;
this._dropTarget = null;
this._x = 0;
this._y = 0;
this.</