日期:2014-05-17 浏览次数:20909 次
合并前:
合并后:
进入子网后,节点4上也显示此链路:
先看看实现的效果,后面我们慢慢解释如何定制链路:
前5个需求可以通过自定义Link和LinkUI实现,需要注意:
完整代码如下:
// 自定义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类方法,返回自定义UI类 getCanvasUIClass : function () { return demo.ScaleLinkUI; }, // 根据百分比获取填充颜色 getFillColor: function(percent) { if (percent < 0.25) { return 'green'; } if (percent < 0.5) { return 'yellow'; } if (percent < 0.75) { return 'magenta'; } return 'red'; }, // 获取起始填充颜色 getFromFillColor: function () { return this.getFillColor(this.getFromFillPercent()); }, // 获取结束填充颜色 getToFillColor: function () { return this.getFillColor(this.getToFillPercent()); }, // 获取起始百分比 getFromFillPercent: function () { // 如果是链路捆绑代理,返回所有捆绑链路中填充百分比最大的值 if (this.isBundleAgent()) { var fromAgent = this.getFromAgent(), percentKey, maxPercent = 0, percent; this.getBundleLinks().forEachSiblingLink(function (link) { percentKey = fromAgent === link.getFromAgent() ? 'fromFillPercent' : 'toFillPercent'; percent = link.getClient(percentKey); maxPercent = percent > maxPercent ? percent : maxPercent; }); return maxPercent; } else { return this.getClient('fromFillPercent'); } }, // 获取结束百分比 getToFillPercent: function () { // 如果是链路捆绑代理,返回所有捆绑链路中填充百分比最大的值 if (this.isBundleAgent()) { var toAgent = this.getToAgent(), percentKey, maxPercent = 0, percent; this.getBundleLinks().forEachSiblingLink(function (link) { percentKey = toAgent === link.getToAgent() ? 'toFillPercent' : 'fromFillPercent'; percent = link.getClient(percentKey); maxPerc