graphView模拟点击等交互事件派发触发；其他view比如菜单模拟触发其点击等事件；html原生事件监听addEventListener()，ht.ui组件事件监听addViewListener

最新推荐文章于 2023-11-14 20:41:32 发布

原创

最新推荐文章于 2023-11-14 20:41:32 发布 · 375 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ht.js #ht for web #canvas #webgl

本文介绍了HT中交互器的功能及事件处理方式，包括自定义交互事件、监听事件及图元交互逻辑。还展示了如何利用GraphView进行图元操作及响应不同类型的用户交互。

比如模拟数据双击触发事件，派发和接受分别如下，kind是可以自定义的，传入什么，监听时候收到的kind就是什么：

派发

JavaScript
gv.fireInteractorEvent({
kind: 'doubleClickData',
data:data
})

接收

JavaScript
//监听图纸上对图元的事件
let eventListen = e => {
    try {
        if (e.kind == 'doubleClickData') {
            alert(e.data.getClassName())
            if (e.data && e.data.getClassName() == 'ht.SubGraph' /*|| e.data.getClassName() == 'ht.Grid'*/ ) { //主桌面的Grid可选中，子桌面（subGraph）Grid设置了不可选中
                // e.event.stopPropagation();
            }
        } else if (e.kind == 'doubleClickBackground') { //主菜单点击到的是ht.Grid（有可能点击到边框或间隙导致无法响桌面双击），子桌面菜单的ht.Grid不可选中，所以点击的是背景，以处理返回响应！
        }
    } catch (e) {

    }
}
graphView.mi(eventListen)

其中"doubleClickData"也是默认的事件名称，鼠标真实双击传入监听的也是这个，手动派发事件，并非能起到真实点击的效果，比如ht.subGraph的双击，通过这样派发无效果，可以通过API来 gv.setCurrentSubGraph(data);

交互

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

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

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

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

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

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

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

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

可通过GraphView#setInteractors(list)组合这些交互器，用户也可以基于Interactor扩展自己的交互器，以下代码为GraphView#setEditable(false/true)的实现，GraphView构造函数会调用setEditable(false)，因此默认只有基本的操作功能不具备编辑功能，需要编辑功能可调用setEditable(true)实现。

Plaintext
setEditable: function (editable) {
    var self = this;
    if (editable) {
        self.setInteractors([
            new ScrollBarInteractor(self),
            new SelectInteractor(self),
            new EditInteractor(self),
            new MoveInteractor(self),
              new DefaultInteractor(self),
            new TouchInteractor(self)
        ]);
  &nbs