HT for Web 编辑交互手册

索引


概述

HT产品包自带ht.graph.EditInterctor,可以完成简单的编辑功能,但是也有一些限制,比如无法完成旋转后再编辑等功能。 此插件是对ht.graph.EditInterctor的补充,适用于复杂编辑的场景,主要优点如下:

要使用此插件,您的页面里需要引入相关的js文件:

<script src="ht.js"></script> <!--先引入ht.js-->
<script src="ht-xeditinteractor.js"></script>

然后创建此交互的实例,并设置到拓扑组件上:

var editInteractor = new ht.graph.XEditInteractor(graph);
graph.setInteractors(new ht.List([
    new ht.graph.ScrollBarInteractor(graph),
    new ht.graph.SelectInteractor(graph),
    editInteractor,
    new ht.graph.MoveInteractor(graph),
    new ht.graph.DefaultInteractor(graph),
    new ht.graph.TouchInteractor(graph , {editable: false})//禁用Touch上默认的编辑功能
]));

也可以使用下面简单的方式:

graph.setEditable(true);

HT内部自动判断,如果引入了此插件,使用此插件作为编辑交互器,否则使用自带的编辑交互

此交互提供了六种辅助编辑按钮,在辅助编辑按钮上按下鼠标并拖拽到另一个图元上(除删除之外),即可改变hostparent关系或创建连线或改变连线端点;拖拽到空白区域可以打断关系

可以重载 getHelperCursor(helper) 方法,自定义按钮的鼠标手势,helper 参数对应的是前面提到的按钮名称

关于交互的详细信息可参考beginners guide文档中的交互章节

实例

您可以操作下面的实例验证此插件:

此插件提供了一些API操作Shape,列举如下:

自定义外观样式

此插件在拓扑组件(ht.graph.GraphView)上注入了一些API用于控制编辑外观,列举如下:

上面一些概念的图示如下:

概念图示

自定义行为

此插件在拓扑组件(ht.graph.GraphView)上注入了一些API用于控制编辑行为,列举如下:

除了上面三个属性,此插件也支持HT内部的编辑、旋转过滤器,可以精细控制节点是否可编辑旋转等,过滤器的内容可参考beginners guide文档中的过滤章节

网格吸附

下面的例子展示如何使用此插件实现网格吸附功能:

此插件可以实现编辑时的吸附功能,绘制网格背景和移动吸附需要额外编码实现。 在这个例子中,网格背景采用painter机制实现,移动吸附通过自定义的SnapMoveInteractor实现。

辅助3D编辑

3D编辑是一个非常复杂的命题,除了Graph3dView提供的九段式编辑,此插件也提供了elevationpointElevatointall三个辅助按钮编辑3D模型的海拔(Y轴坐标)、点海拔(ShapeEdge点的Y轴坐标)和模型高度(Y轴尺寸),请参考下面的例子:


欢迎交流 service@hightopo.com