Quark-Renderer----第十四篇

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.</