索引

• 概述
• 示例一：综合示例
• 示例二：公交线路图
• 示例三：与其它插件集成

概述

流动线插件可以在ht.Shape和ht.Edge上增加流动效果，支持内部流动元素或用户自定义的流动元素沿着路径步进，而且没有引入新的类， 只是在ht.Shape、ht.Edge和ht.graph.GraphView上扩展了一些方法或样式，因此非常易于使用。要使用此插件，只需要引入ht-flow.js文件：

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

此插件在ht.Shape和ht.Edge类上扩展了一些样式控制流动效果，用户可以通过ht.Shape#setStyle和ht.Edge#setStyle操作这些样式， 说明如下：

• flow 值为true或false，控制此ht.Shape或ht.Edge是否可流动， 默认值为false
• flow.reverse 值为true或flase，控制反向流动，默认值为false
• flow.autoreverse 值为true或flase，正向流动和反向流动是否交替进行，默认值为false
• flow.count 控制流动组的个数，默认为1
• flow.step 控制流动的步进，默认为3
• flow.element.count 每个流动组中的元素的个数，默认为10
• flow.element.background 流动组中元素的背景颜色，默认为rgba(255, 255, 114, 0.4)
• flow.element.max 流动组中最大元素的尺寸，默认为7
• flow.element.min 流动组中最小元素的尺寸，默认为0;每个流动组中的元素的尺寸从flow.element.max递减至flow.element.min， 如果希望元素尺寸保持一致，将这两个参数设为一致即可。
• flow.element.space 流动组中元素的间隔，默认为3.5
• flow.element.autorotate 值为true或false，控制流动组中的元素是否与路径的方向保持一致，默认为false
• flow.element.image 字符串类型，指定流动组中元素的图片，图片需要提前通过ht.Default.setImage注册
• flow.element.shadow.visible 值为true或false，控制流动组中的元素是否显示渐变阴影，默认为true
• flow.element.shadow.begincolor 字符串类型，表示流动组中的元素的渐变阴影的中心颜色，默认为rgba(255, 255, 0, 0.3)
• flow.element.shadow.endcolor 字符串类型，表示流动组中的元素的渐变阴影的边缘颜色，默认为rgba(255, 255, 0, 0)
• flow.element.shadow.max 表示流动组中的最大元素的渐变阴影的尺寸，默认为22
• flow.element.shadow.min 表示流动组中的最小元素的渐变阴影的尺寸，默认为4

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

• enableFlow(interval) 启动流动，默认为false，interval表示流动的时间间隔
• disableFlow() 停止流动
• flowInterval 通过setFlowInterval(interval)和getFlowInterval()操作，控制流动的时间间隔

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

示例一：综合示例

您可以操作下面的例子验证此插件：

上面的例子展示了如何使用流动样式，您可以通过源代码查看实现原理。

示例二：公交线路图

您可以拖拽公交站调整线路。公交站用ht.Node实现，公交车用流动的图片来展示，因为公交站和线路是不同的节点，为了避免线路上的公交车被公交站遮挡， 使用了两个Shape来模拟线路和公交车：

• busLanePath 展示公交车，公交车在它上面流动，自身并没有宽度，因此不可见，在最顶层展示
• busLane 展示线路，在最底层展示

公交站节点通过setHost(busLane)固定在busLane的上面，然后通过setLayer(1)固定到busLanePath下面，就可以实现公交车在线路和公交站之上流动的效果。

另外，拖拽公交站时会调整busLanePath和busLane，所以需要监听公交站的位置信息变化，然后修改线路的points，由于站点是吸附到线路上的 ，修改线路的points需要调用ht.Default.getInternal().setIsolating(true);，避免公交站和线路互相影响。

示例三：与其它插件集成

无需做额外的处理，按照原来的方式使用插件各自的API即可，下面的例子里用到了EdgeType插件、自动布局插件及Painter机制：

这个例子里使用了全局的默认样式配置：

<script type="text/javascript">
    htconfig = {
         Style: {
             'edge.color': "black",
             'flow': true,
             'edge.offset': 0,
             'flow.element.background': "rgb(41, 249, 47)",
             'flow.element.count': 1,
             'flow.count': 2,
             'flow.element.max': 10,
             'flow.element.shadow.visible': false
         }
     };
 </script>

这种语法结构的详细信息可以参考Theme文档