HT 虚线流动手册

索引


概述

HT核心产品包中的ht.Edgeht.Shape已经支持斑马线效果,如果需要流动,您可以使用setTimeout函数改变图元*.dash.offset样式, 或者使用Animation插件,但是这两种方式是基于事件机制的刷新,可能会影响到性能。

此插件内部启动一个定时器,定时遍历DataModel中的数据并重绘,略过了事件派发的过程,如果您的应用对性能非常敏感,请使用此插件

和流动插件类似,此插件没有引入新的类,只是在ht.Shapeht.Edgeht.graph.GraphView上扩展了一些方法或样式,因此非常易于使用。要使用此插件,只需要引入ht-dashflow.js文件:

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

注意:使用此插件需要安装最新版的ChromeFirefoxIE11浏览器(不支持IE10IE9)

此插件在ht.Shapeht.Edge类上扩展了一些样式控制流动效果,您可以通过ht.Shape#setStyleht.Edge#setStyle操作这些样式, 说明如下:

ht.graph.GraphView上扩展的API如下:

从上面的说明中可以看出,拓扑上的所有Data的虚线流动的时间间隔是一样的,如果需要营造不同的Data流动速度不同的效果,可以修改相关Data*.dash.flow.step样式。

示例一:综合示例

此插件可以和流动插件及扩展编辑插件一同使用,您可以操作下面的例子验证此插件:

示例二:与EdgeType插件集成

实际上,与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文档


欢迎交流 service@hightopo.com