基于HTML5 自定义编辑器

    在上次的文章中，提到场景图是基于这个麻雀虽小五脏俱全的“HTML5 拓扑编辑器”（http://www.hightopo.com/demo/2deditor_20151010/HT-2D-Editor.html）和“矢量编辑器”（http://www.hightopo.com/demo/vector-editor/index.html）进行扩展出满足我需求的拓扑编辑器，看到这里，大家或许对怎么扩展编辑器有疑问，所以，今天就以一个例子介绍编辑器的扩展，先附上Demo：http://www.hightopo.com/demo/blog_fram_20170620/index.html

在这个 Demo 中，用户点击工具条上的元素后，在下方画布中拖动鼠标可以生成相应的图元，多种元素自由组合可以做个简易的农场。素材均是网上搜索 png 格式的图片，当然，若是觉得农场无趣，大可替换成其他脑洞大开的场景，总之，任你玩~

                                   

言归正传，分析 Demo 可得这个例子的核心在于交互这一块：

GraphView 默认内置了一些交互器，以实现基本的选择、单双击，缩放、平移和编辑等交互功能，内置的交互器有：

    1、Interactor 交互器基类， 提供了基础功能函数，如交互事件的派发、监听函数添加和清除，拖拽操作封装， 自动平移滚动等功能；

    2、DefaultInteractor 实现 Group、Edge 和 SubGraph 图元的默认双击响应，手抓图平移，滚轮缩放，键盘响应等功能；

    3、SelectInteractor 实现图元单选和框选功能。默认拖动背景是平移，按 Ctrl 键可以进行框选（Mac 下为 Command键）；

    4、MoveInteractor 实现被选中图元的移动功能；

    5、EditInteractor 实现对图元的大小改变和角度旋转， 以及 Shape 和 Edge 类型图元的多点编辑等功能；

    6、TouchInteractor 实现移动设备上的 Touch 交互功能；

    7、ScrollBarInteractor 实现滚动条的显示和交互功能。

    可通过 GraphView#setInteractor（list）组合这些交互器，用户也可基于 Interactor 扩展自己的交互器（详情见 HT for Web 入门手册），我们便是通过 Interactor 进行扩展得自己的交互器 selectCreateNodeInteractor，在 HT 中