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

最新推荐文章于 2022-04-30 20:16:33 发布
最新推荐文章于 2022-04-30 20:16:33 发布
阅读量282 收藏
点赞数
文章标签： ui
最近有客户提到自定义链路的需求，个人感觉非常有代表意义，现在共享出来给大家参考一下。先来看看需求：
  1. 链路要分成两半，用两种颜色填充。
  2. 填充百分比在不同值域时，用不同颜色。
  3. 显示刻度
  4. 有个开关，可以控制链路变短，变短后，链路只画开始和结束部分（相当于原始链路的缩影），中间不画
  5. 如果有多条链路，链路合并后两端分别显示这些链路中的最高填充百分比

    合并前：

    合并后：

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

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

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

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

  1. 用Link#getBundleLinks获取所有的捆绑链路
  2. 用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类方法，返回自定义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);
				maxPercent = percent > maxPercent ? percent : maxPercent;
			});
			return maxPercent;
		} else {
			return this.getClient('toFillPercent');
		}
	},
	// 重载获取网元名称方法，判断如果是链路捆绑代理，就返回起始和结束代理节点的名称
	getName: function () {
	    if (this.getClient('shortened')) {
	        return null;
	    } else if (this.isBundleAgent()) {
			return this.getFromAgent().getName() + '-' + this.getToAgent().getName();
		} else {
			return demo.ScaleLink.superClass.getName.call(this);
		}
	}
});

// 自定义LinkUI构造函数
demo.ScaleLinkUI = function(network, element){
    // 调用基类构造函数
    demo.ScaleLinkUI.superClass.constructor.call(this, network, element);
};
// 设置自定义Link继承twaver.canvas.LinkUI
twaver.Util.ext('demo.ScaleLinkUI', twaver.canvas.LinkUI, {
	// 获取Link角度
	getAngle: function () {
		return getAngle(this.getFromPoint(), this.getToPoint());
	},
	// 获取Link中间点
	getMiddlePoint: function (from, to, percent) {
		return {
	    	x: from.x + (to.x - from.x) * percent,
	    	y: from.y + (to.y - from.y) * percent
	    };
	},
	// 画刻度线
	drawScaleLine: function (from, to, angle, length, ctx, percent, lineWidth, lineColor) {
	    var point = this.getMiddlePoint(from, to, percent);
	    var y = length/2 * Math.sin(angle),
	    	x = length/2 * Math.cos(angle);
	    ctx.beginPath();
	    ctx.lineWidth = lineWidth;
	    ctx.strokeStyle = lineColor;
	    ctx.moveTo(point.x + x, point.y + y);
	    ctx.lineTo(point.x - x, point.y -y);
	    ctx.stroke();
	},
	// 获取是否将链路变短
	isShorten: function () {
		var link = this.getElement();
		return link.getClient('shortened') && this.getLineLength() > link.getClient('shortenLength') * 2;
	},
	// 重载画链路函数，用自定义逻辑画链路
	paintBody: function (ctx) {
        var points = this.getLinkPoints(),
        	link = this.getElement();
        if (!points || points.size() < 2) {
            return;
        }

        var lineLength = this.getLineLength(),
        	shortenLength = link.getClient('shortenLength'),
        	percent = shortenLength / lineLength,
	    	from = points.get(0),
	    	to = points.get(1),
	    	angle = this.getAngle() + Math.PI/2;
	    if (this.isShorten()) {
        	fromPoints = new twaver.List([from, this.getMiddlePoint(from, to, percent)]);
        	toPoints = new twaver.List([this.getMiddlePoint(from, to, 1 - percent), to]);
        	this._paintBody(ctx, fromPoints, angle);
        	this._paintBody(ctx, toPoints, angle);

        	// 画文字
			ctx.textAlign = 'center';
			ctx.textBaseline = 'middle';
			ctx.fillStyle = 'black';
			var textCenter = {x: (fromPoints.get(0).x + fromPoints.get(1).x)/2, y: (fromPoints.get(0).y + fromPoints.get(1).y)/2};
			ctx.fillText(link.getName(), textCenter.x, textCenter.y);

			textCenter = {x: (toPoints.get(0).x + toPoints.get(1).x)/2, y: (toPoints.get(0).y + toPoints.get(1).y)/2};
			ctx.fillText(link.getName(), textCenter.x, textCenter.y);

			ctx.fillText(link.getToNode().getName(), fromPoints.get(1).x, fromPoints.get(1).y);
			ctx.fillText(link.getFromNode().getName(), toPoints.get(0).x, toPoints.get(0).y);
        } else {
        	this._paintBody(ctx, points, angle);
        }

		// 画起始箭头
		if (link.getClient('arrow.from')) {
		    twaver.Util.drawArrow(ctx, 12, 9, points, true, 'arrow.standard', true, 'gray', 0, 0, 1, 'black');
        }
	    // 画结束箭头
        if (link.getClient('arrow.to')) {
		    twaver.Util.drawArrow(ctx, 12, 9, points, false, 'arrow.standard', true, 'gray', 0, 0, 1, 'black');
        }
	},
	_paintBody: function (ctx, points, angle) {
        var link = this.getElement(),
        	width = link.getStyle('link.width'),
        	grow = width,
        	outerColor = this.getOuterColor();
        if (outerColor) {
            var outerWidth = link.getStyle('outer.width');
            grow += outerWidth * 2;
        }
        var selectBorder = !this.getEditAttachment() && link.getStyle('select.style') === 'border' && this.getNetwork().isSelected(link);
        if (selectBorder) {
            var selectWidth = link.getStyle('select.width');
            grow += selectWidth * 2;
        }
        ctx.lineCap = link.getStyle('link.cap');
        ctx.lineJoin = link.getStyle('link.join');
        // 画选中边框
        if (selectBorder) {
            this.drawLinePoints(ctx, points, grow, link.getStyle('select.color'));
        }
        // 画边框
        if (outerColor) {
            this.drawLinePoints(ctx, points, width + outerWidth * 2, outerColor);
        }
        // 画Link
        this.drawLinePoints(ctx, points, width, this.getInnerColor() || link.getStyle('link.color'));

		var fromFillPercent = link.getFromFillPercent(),
	    	toFillPercent = link.getToFillPercent(),
	    	fromFillColor = link.getFromFillColor(),
	    	toFillColor = link.getToFillColor(),
	    	from = points.get(0),
	    	to = points.get(1);

	    var x = from.x + (to.x - from.x) / 2 * fromFillPercent,
	    	y = from.y + (to.y - from.y) / 2 * fromFillPercent;
	    var middle = {x: x, y: y};
	    var fromPoints = new twaver.List([from, middle]);
		// 画起始填充色
	    this.drawLinePoints(ctx, fromPoints, width, fromFillColor);

	    from = points.get(1);
	    to = points.get(0);
	    x = from.x + (to.x - from.x) / 2 * toFillPercent;
	    y = from.y + (to.y - from.y) / 2 * toFillPercent;
	    middle = {x: x, y: y};
	    var toPoints = new twaver.List([from, middle]);
	    // 画结束填充色
	    this.drawLinePoints(ctx, toPoints, width, toFillColor);

    	from = points.get(0);
    	to = points.get(1);
	    var scaleWidth = link.getClient('scaleWidth'),
	    	scaleColor = link.getClient('scaleColor');
	    // 画刻度
	    for (var i = 1, n = link.getClient('scaleNumbers') * 2; i < n; i++) {
	    	this.drawScaleLine(from, to, angle, width/2, ctx, i/n, scaleWidth, scaleColor);
	    }
	    // 画分隔线
	    this.drawScaleLine(from, to, angle, width, ctx, 0.5, 3, link.getClient('splitterColor'));
	}
});

最后一个需求可以通过定制Node和NodeUI达到目的：

// 自定义Node构造函数
demo.ScaleNode = function(id) {
    // 调用基类构造函数
	demo.ScaleNode.superClass.constructor.call(this, id);
};
// 设置自定义Node继承twaver.Node
twaver.Util.ext('demo.ScaleNode', twaver.Node, {
	getCanvasUIClass: function () {
		return demo.ScaleNodeUI;
	}
});

// 自定义NodeUI构造函数
demo.ScaleNodeUI = function(network, element){
    // 调用基类构造函数
    demo.ScaleNodeUI.superClass.constructor.call(this, network, element);
};
// 设置自定义NodeUI继承twaver.canvas.NodeUI
twaver.Util.ext('demo.ScaleNodeUI', twaver.canvas.NodeUI, {
    // 重载画网元方法，画上层链路
	paintBody: function (ctx) {
		demo.ScaleNodeUI.superClass.paintBody.call(this, ctx);
    	var result = this.getAttachedLinks();
    	if (!result) {
    		return;
    	}
    	for (var position in result) {
    		this.paintLink(ctx, result[position], position);
    	}
	},
    // 画链路
    paintLink: function (ctx, links, position) {
    	var center = this.getElement().getCenterLocation(),
    		count = links.length,
    		half = count / 2,
    		network = this.getNetwork(),
    		gap = (count - 1) * -10,
    		terminal, link, i, offset, shortenLength, angle, tempCenter, textWidth, textHeight = 20, textCenter;
    	for (i=0; i<count; i++) {
    		link = links[i];
    		offset = link.getStyle('link.bundle.offset');
    		shortenLength = link.getClient('shortenLength');
    		textWidth = ctx.measureText(link.getName()).width;
	    	if (position === 'left') {
	    		terminal = {x: center.x - offset - shortenLength, y: center.y + gap};
	    		tempCenter = {x: center.x - offset, y: center.y + gap};
	    		textCenter = {x: terminal.x - textWidth/2 - 10, y: terminal.y};
	    		angle = Math.PI/2;
	    	} else if (position === 'right') {
	    		terminal = {x: center.x + offset + shortenLength, y: center.y + gap};
	    		tempCenter = {x: center.x + offset, y: center.y + gap};
	    		textCenter = {x: terminal.x + textWidth/2 + 10, y: terminal.y};
	    		angle = Math.PI/2;
	    	} else if (position === 'top') {
	    		terminal = {x: center.x + gap, y: center.y - offset - shortenLength};
	    		tempCenter = {x: center.x + gap, y: center.y - offset};
	    		textCenter = {x: terminal.x, y: terminal.y - 10};
	    		angle = 0;
	    	} else {
	    		terminal = {x: center.x + gap, y: center.y + offset + shortenLength};
	    		tempCenter = {x: center.x + gap, y: center.y + offset};
	    		textCenter = {x: terminal.x, y: terminal.y + 10};
	    		angle = 0;
	    	}
	    	gap += 20;
	    	var isFrom = link.getFromNode() === this.getElement(),
	    		points;
	    	if (isFrom) {
	    		points = new twaver.List([tempCenter, terminal]);
	    	} else {
	    		points = new twaver.List([terminal, tempCenter]);
	    	}
	    	network.getElementUI(link)._paintBody(ctx, points, angle);

			ctx.textAlign = 'center';
			ctx.textBaseline = 'middle';
			ctx.fillStyle = 'black';
			// 另一端节点标签
			var name = isFrom ? link.getToNode().getName() : link.getFromNode().getName();
			ctx.fillText(name, textCenter.x, textCenter.y);
			textCenter = {x: (tempCenter.x + terminal.x)/2, y: (tempCenter.y + terminal.y)/2};
			// Link标签
			ctx.fillText(link.getName(), textCenter.x, textCenter.y);

			// 画起始箭头
			if (link.getClient('arrow.from')) {
			    twaver.Util.drawArrow(ctx, 12, 9, points, true, 'arrow.standard', true, 'gray', 0, 0, 1, 'black');
            }
		    // 画结束箭头
            if (link.getClient('arrow.to')) {
			    twaver.Util.drawArrow(ctx, 12, 9, points, false, 'arrow.standard', true, 'gray', 0, 0, 1, 'black');
            }
	    }
    },
    // 获取不同方位的上层链路集合
	getAttachedLinks: function () {
		var currentSubNetwork = this.getNetwork().getCurrentSubNetwork();
		if (!currentSubNetwork || !this.getElement().getLinks()) {
			return null;
		}
		var result;
		this.getElement().getLinks().forEach(function (link) {
			var fromSubNetwork = twaver.Util.getSubNetwork(link.getFromNode()),
				toSubNetwork = twaver.Util.getSubNetwork(link.getToNode());
			if (fromSubNetwork !== toSubNetwork) {
				if (!result) {
					result = {};
				}
				var fromCenter = link.getFromNode().getCenterLocation(),
					toCenter = link.getToNode().getCenterLocation(),
					angle = getAngle(fromCenter, toCenter),
					isOut = currentSubNetwork === fromSubNetwork,
					position;
				if (isOut) {
					if (fromCenter.x <= toCenter.x) {
						if (angle >= -Math.PI/4 && angle <= Math.PI/4) {
							position = 'right';
						} else if (angle > Math.PI/4) {
							position = 'bottom';
						} else {
							position = 'top';
						}
					} else {
						if (angle >= -Math.PI/4 && angle <= Math.PI/4) {
							position = 'left';
						} else if (angle > Math.PI/4) {
							position = 'top';
						} else {
							position = 'bottom';
						}
					}
				} else {
					if (fromCenter.x <= toCenter.x) {
						if (angle >= -Math.PI/4 && angle <= Math.PI/4) {
							position = 'left';
						} else if (angle > Math.PI/4) {
							position = 'top';
						} else {
							position = 'bottom';
						}
					} else {
						if (angle >= -Math.PI/4 && angle <= Math.PI/4) {
							position = 'right';
						} else if (angle > Math.PI/4) {
							position = 'bottom';
						} else {
							position = 'top';
						}
					}
				}
				if (!result[position]) {
					result[position] = [];
				}
				result[position].push(link);
			}
		});
		return result;
	}
});

本文完整代码见附件：见原文最下方

iteye_6481
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
twaver拓扑
12-20
html5版本的拓扑图，支持各种常见类型的图形，支持钻取，颜色及样式均可配置，非常好的资源
Twaver-HTML5基础学习(4)告警元素(Alarm)
见贤思齐焉，见不贤内自省
04-16 902
Twaver-HTML5基础学习(4)告警元素(Alarm)
twaver html5 2d demo,TWaver 2D+GIS+3D的试用和在线Demo
weixin_35699471的博客
06-29 341
TWaver 3D for HTML5试用下载：各种在线3D Demo：http://idc.servasoft.com:8081/twaver-html5-3d/三维机房、变电站、会议室等都在里面。《zw版&&num;183&semi;Halcon-delphi系列原创教程》 2d照片-3d逆向建模脚本 2d照片-3d逆向建模脚本 3D逆向建模,是逆向工程的核心要素. ...
如何实现TWaver 3D颜色渐变
TWaver可视化
10-21 1434
一般而言，需要实现3D物体的渐变，通常的思路就是通过2D绘制一张渐变canvas图片作为3D对象的贴图，这种方式是可以解决这类问题的，不过对于一般用户而言，通过2D生成一张渐变的图片，有一定的难度，另外如果要生成的图片比较多，性能效率上会成为一个瓶颈，特别是渐变随着条件在不断变化的情况下，就需要每次绘制的时候都去生成一张渐变的canvas图，效率极其低。
TWaver HTML5学习笔记 —— 可定制的右键菜单
Steven的专栏
04-05 3723
一、学习内容概述：      学习如何在拓扑图中动态设置网元的图片大小。 二、学习内容总结： 1、设置网元图片大小：
TWaver HTML5 开发指南代码
05-14
TWaver HTML5 开发指南代码 拓扑工具 机房展示 轻松容易 很简单
twaver-html5-5.9.0-api_html5_-5.9.0-api_twaver_
09-30
twaver-html5-5.9.0-api
Twaver-html5.zip
02-19
Twaver学习案例的例子
TWaver HTML5 Developer Guide
12-22
TWaver HTML5 Developer Guide， 官方的开发指南。
TWaver for HTML5
10-16
TWaver的图形组件库中提供了拓扑组件、地图组件、设备图组件，以及表格、树图、属性表、图表等丰富的通用图形界面组件，为电信运营支撑系统（OSS）的开发提供“一站式”的组件产品和解决方案，是快速设计、开发和...
Twaver-HTML5基础学习(14)连线(Link)连线类型(直线、延伸直线、正交直线)
见贤思齐焉，见不贤内自省
04-20 1498
Twaver-HTML5基础学习(14)连线(Link)连线类型(直线、延伸直线、正交直线)
html5 拓扑图 切片,HTML5复杂拓扑图（四） 组织结构图
weixin_33608403的博客
06-22 396
TWaver 阅读(5040) 评论(1) 编辑 收藏应广大客户所需，今天给大家带来一款组织结构图。组织结构图的呈现方式多种多样，用途也是非常广泛，可以应用于集团内部，企业各部门之间的组织关系呈现。我们就来看看twaver实现出来的效果。上下布局：圆形布局：这些布局用twaver来实现是非常的合适，实现起来也是很容易，twaver内部就提供了多种布局方式：自左向右，从下向上，具体可以看twav...
HTML5，不只是看上去很美（第三弹：萌萌哒拓扑图分组）
weixin_34178244的博客
06-19 262
前言 这段时间承蒙大家厚爱，给了我相当大码字的动力，决定节前再更一弹。最近养成了回顾总结的好习惯，sf真是个不错的地方。 最近忙着给客户折腾一个复杂的多层嵌套关系。客户一句话“要好看！”，哥就忙白了头啊，还好赶在节前解决了，不然真的要随广大股民排队投江庆祝端午了。 需求描述 先简单描述下这次客户的需求。 现实应用中，网络拓扑图结...
Twaver-HTML5基础学习(8)拓扑元素(Element)_网元(Element)、节点(Node)
见贤思齐焉，见不贤内自省
04-18 1781
Twaver-HTML5基础学习(8)拓扑元素(Element)_网元(Element)、节点(Node)
TWaver HTML5之树形布局
TWaver可视化
03-11 4465
今天是春节后上班的第三天，给大家分享一下我们前段时间的一个需求，需求是这样的：界面中的网元分为不同的域，比如一级域，二级域，三级域，….N级域，而且不同域之间会有连线。对于这个需求，按照常规的想法，使用group岂不是很简单，一级域是一个group，二级域也是一个group，二级域的group是一级域的父亲，以此类推。但是这样有个问题，如果域比较多，会造成group的过度嵌套，界面中group多了之后，不仅用户体验下降，而且会严重影响性能，所以倒不如直接用树，可以很直观的体现各个域之间的层级关系。
twaver html5,TWaver可视化编辑器的前世今生（二）3D编辑器
weixin_31608325的博客
06-15 566
插播一则广告(长期有效)MONO哥需要在武汉招JavaScript工程师若干要求：对前端技术(JavasScript、HTML、CSS)，对可视化技术(Canvas、WebGL)有浓厚的兴趣基础不好的可培养，基础好的可共谋大事感兴趣的给我发邮件：hr@servasoft.com------------------------------------------------------------正...
Twaver-HTML5基础学习(2)基本数据元素(Data)
见贤思齐焉，见不贤内自省
04-16 976
Data对象上的基本属性和如何自定义属性
Twaver-HTML5基础学习(12)连线(Link)
见贤思齐焉，见不贤内自省
04-19 891
Twaver-HTML5基础学习(12)连线(Link)
Twaver-HTML5基础学习(29)界面交互
见贤思齐焉，见不贤内自省
04-30 644
Twaver-HTML5基础学习(29)界面交互
twaver html5下载
最新发布
07-31
Twaver HTML5 是一种基于HTML5技术的网络拓扑图表库，用于在Web页面上呈现网络拓扑图表。Twaver HTML5 提供了丰富的功能和灵活的特性，可以支持用户定制化开发。要下载Twaver HTML5，可以按照以下步骤进行操作： 1. 打开Twaver官方网站，即twavertech.com。 2. 在网站上找到Twaver产品页面，在页面上选择Twaver HTML5。 3. 点击下载按钮，即可开始下载Twaver HTML5的安装文件。 4. 下载完成后，双击安装文件进行安装。 5. 安装完成后，打开你的开发环境，比如Web开发工具。 6. 创建一个新的项目，在项目中引入Twaver HTML5的库文件。 7. 编写你自己的代码，使用Twaver HTML5提供的API来创建和呈现网络拓扑图表。 8. 运行你的项目，即可在Web页面上看到Twaver HTML5生成的网络拓扑图表。 Twaver HTML5 提供了丰富的文档和示例代码，可以帮助用户更好地理解和使用该库。如果在下载和使用过程中遇到任何问题，可以参考Twaver官方网站上提供的帮助文档或联系官方技术支持团队寻求帮助。通过下载和使用Twaver HTML5，你可以在Web页面上展示和管理网络拓扑图表，使其在各种网页应用中具有更好的交互性和可视化效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值