用TWaver HTML5定制五彩斑斓的链路

最新推荐文章于 2022-05-02 07:30:00 发布

TWaver数字孪生

最新推荐文章于 2022-05-02 07:30:00 发布

阅读量2.5k

点赞数

文章标签： html5 function terminal network parallel null

本文链接：https://blog.csdn.net/twaver/article/details/7755849

版权

本文介绍如何使用TWaver HTML5库来定制链路，包括将链路分成两半并采用不同颜色填充，根据填充百分比变化颜色，显示刻度，控制链路缩短，以及合并链路后的高亮显示。通过自定义Link和LinkUI实现前五个需求，通过定制Node和NodeUI满足最后一个需求。完整代码可在原文附件中查看。

摘要由CSDN通过智能技术生成

最近有客户提到自定义链路的需求，个人感觉非常有代表意义，现在共享出来给大家参考一下。先来看看需求：

链路要分成两半，用两种颜色填充。
填充百分比在不同值域时，用不同颜色。
显示刻度
有个开关，可以控制链路变短，变短后，链路只画开始和结束部分（相当于原始链路的缩影），中间不画
如果有多条链路，链路合并后两端分别显示这些链路中的最高填充百分比
合并前：

合并后：
进入子网后，节点上显示和上层节点的连线信息进入子网前，节点2和子网内节点4之间有链路：

进入子网后，节点4上也显示此链路：

先看看实现的效果，后面我们慢慢解释如何定制链路：

前5个需求可以通过自定义Link和LinkUI实现，需要注意：

用Link#getBundleLinks获取所有的捆绑链路
用LinkUI#drawLinePoints画线

完整代码如下：

// 自定义Link构造函数
demo.ScaleLink = function(id, from, to) {
    // 调用基类构造函数
    demo.ScaleLink.superClass.constructor.call(this, id, from, to);
    // 设置链路宽度为10个像素
    this.setStyle('link.width', 10);
    //this.setStyle('link.color', 'rgba(0, 0, 0, 0)');
    // 设置Link类型为平行
    this.setStyle('link.type', 'parallel');
    // 设置链路捆绑的间距为40
    this.setStyle('link.bundle.offset', 40);
    // 设置刻度颜色
    this.setClient('scaleColor', 'black');
    // 设置刻度宽度
    this.setClient('scaleWidth', 1);
    // 设置刻度个数
    this.setClient('scaleNumbers', 4);
    // 设置是否变短
    this.setClient('shortened', false);
    // 设置变短后的长度
    this.setClient('shortenLength', 100);
    // 设置分割线颜色
    this.setClient('splitterColor', 'black');
    // 设置起始填充百分比
    this.setClient('fromFillPercent', 0);
    // 设置结束填充百分比
    this.setClient('toFillPercent', 0);
};
// 设置自定义Link继承twaver.Link
twaver.Util.ext('demo.ScaleLink', twaver.Link, {
    // 重载获取UI类方法ÿ