索引
HT
核心产品包中的ht.Edge
和ht.Shape
已经支持斑马线效果,如果需要流动,您可以使用setTimeout
函数改变图元*.dash.offset
样式,
或者使用Animation
插件,但是这两种方式是基于事件机制的刷新,可能会影响到性能。
此插件内部启动一个定时器,定时遍历DataModel
中的数据并重绘,略过了事件派发的过程,如果您的应用对性能非常敏感,请使用此插件
和流动插件类似,此插件没有引入新的类,只是在ht.Shape
、ht.Edge
和ht.graph.GraphView
上扩展了一些方法或样式,因此非常易于使用。要使用此插件,只需要引入ht-dashflow.js
文件:
<script src="ht.js"></script> <!--先引入ht.js-->
<script src="ht-dashflow.js"></script>
注意:使用此插件需要安装最新版的Chrome
、Firefox
或IE11
浏览器(不支持IE10
及IE9
)
此插件在ht.Shape
和ht.Edge
类上扩展了一些样式控制流动效果,您可以通过ht.Shape#setStyle
和ht.Edge#setStyle
操作这些样式,
说明如下:
edge.dash.flow
值为true
或false
,是否启用ht.Edge
的虚线流动,默认值为false
shape.dash.flow
值为true
或false
,是否启用ht.Shape
的虚线流动,默认值为false
edge.dash.flow.step
ht.Edge
虚线流动的步进,默认值为3
shape.dash.flow.step
ht.Shape
虚线流动的步进,默认值为3
edge.dash.flow.reverse
值为true
或flase
,控制ht.Edge
的反向流动,默认值为false
shape.dash.flow.reverse
值为true
或flase
,控制ht.Shape
的反向流动,默认值为false
ht.graph.GraphView
上扩展的API
如下:
enableDashFlow(interval)
启动虚线流动,默认为false
,interval
表示流动的时间间隔disableDashFlow()
停止虚线流动dashFlowInterval
通过setDashFlowInterval(interval)
和getDashFlowInterval()
操作,控制虚线流动的时间间隔从上面的说明中可以看出,拓扑上的所有Data
的虚线流动的时间间隔是一样的,如果需要营造不同的Data
流动速度不同的效果,可以修改相关Data
的*.dash.flow.step
样式。
此插件可以和流动插件及扩展编辑插件一同使用,您可以操作下面的例子验证此插件:
实际上,与EdgeType
插件集成时您不需要做任何额外的处理,按原有的方式使用这两个插件各自的API
即可:
这个例子里使用了全局的默认样式配置:
<script type="text/javascript">
htconfig = {
Style: {
'edge.width': 2,
'edge.color': 'red',
'edge.dash': true,
'shape.dash': true,
'edge.dash.color': "yellow",
'shape.dash.color': "yellow",
'edge.dash.flow': true,
'shape.dash.flow': true
}
};
</script>
这种语法结构的详细信息可以参考Theme文档