TWaver HTML5学习笔记 —— 拓扑元素添加标签图标

最新推荐文章于 2025-06-06 12:13:38 发布

stevensz7

最新推荐文章于 2025-06-06 12:13:38 发布

阅读量4.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： TWaverHTML5 文章标签： TWaver html5 javascript 标签图片

本文链接：https://blog.youkuaiyun.com/stevensz7/article/details/21845125

TWaverHTML5 专栏收录该内容

8 篇文章

订阅专栏

本文档介绍了如何在使用TWaver进行HTML5开发时，为拓扑图的各个元素添加标签和图标，以增强图形的表示力。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、学习内容概述：

学习如何在拓扑图中为元素添加标签图标。

二、学习内容总结：

1、添加标签图标的方法：设置节点的“icons.names”属性即可（图片需要提前注册），例如：

lastData.setStyle('icons.names', ["alarm_label"]);

三、验证代码运行效果截图：

四、验证代码：

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>拓扑元素添加标签图标</title>
		<script type="text/javascript" src="./js/twaver.js"></script>
		<script type="text/javascript" src="./js/topo.js"></script>
		<script type="text/javascript">
		
			function init() {
				// 添加网元
				var box = new twaver.ElementBox();
				// 创建拓扑图
				var network = new twaver.network.Network(box);
				// 注册图片
				topo.Util.registerImage("./images/ne/route.png");
				topo.Util.registerImage("./images/ne/route_icon.png");
				topo.Util.registerImage("./images/label/alarm_label.png");
				var node = new twaver.Node();
				node.setName("ne1");
				node.setLocation(30, 50);
				node.setImage("route");
				node.setIcon("route_icon");
				box.add(node);
				var node2 = new twaver.Node();
				node2.setName("ne2");
				node2.setLocation(100, 120);
				node2.setImage("route");
				node2.setIcon("route_icon");
				box.add(node2);
				var link = new twaver.Link(node, node2);
				link.setName("ne1 -- ne2");
				link.setToolTip("<b> ne1 -- ne2</b>");
				box.add(link);

				// 创建网元树
				var tree = new twaver.controls.Tree(box);
				tree.setCheckMode('descendantAncestor');
				// 设置在网元树中只显示节点
				tree.setVisibleFunction(function(element) {
					return element instanceof twaver.Node;
				});
				// 创建表格
				var table = new twaver.controls.Table(box);
				var tablePane = new twaver.controls.TablePane(table);
				topo.Util.createColumn(table, 'Name', 'name', 'accessor', 'string');
				topo.Util.createColumn(table, 'X Location', 'x', 'accessor', 'string');
				topo.Util.createColumn(table, 'Y Location', 'y', 'accessor', 'string');

				// 定义拓扑视图的右键菜单
				var popupMenu = new twaver.controls.PopupMenu(network);

				// 最后选中的节点和位置
				var lastData, lastPoint;
				popupMenu.onMenuShowing = function(e) {
					lastData = network.getSelectionModel().getLastData();
					lastPoint = network.getLogicalPoint(e);
					return true;
				};
				// 设置右键菜单动作
				popupMenu.onAction = function(menuItem) {
					// 在指定位置添加网元
					if (menuItem.label == "Add Ne") {
						var node = new twaver.Node();
						node.setName("newNode");
						//node.setParent( network.getCurrentSubNetwork());
						node.setImage("route");
						node.setIcon("route_icon");
						node.setCenterLocation(lastPoint);
						box.add(node);
					}
					// 删除节点或者链路
					if (menuItem.label == "Delete") {
						box.remove(lastData);
					}
					
					// 为节点或者链路添加告警标签图标
					if (menuItem.label == "Add Alarm Tips") {
						lastData.setStyle('icons.names', ["alarm_label"]);
					}
				};
				// 设置右键菜单内容
				popupMenu.setMenuItems([{
					// 添加网元
					label : "Add Ne", group: 'none', icon: './images/ne/route_icon.png' 
				}, {
					// 删除网元
					label : "Delete", group: 'Element' 
				}, {
					// 为节点或者链路添加告警标签图标
					label : "Add Alarm Tips", group: 'Element' 
				}]);
				// 设置右键菜单是否可见
				popupMenu.isVisible = function(menuItem) {
					if (lastData) {
						if ( lastData instanceof twaver.SubNetwork && menuItem.group === 'SubNetwork') {
							return true;
						}
						if ( lastData instanceof twaver.Group && menuItem.group === 'Group') {
							return true;
						}
						if ( lastData instanceof twaver.Link && menuItem.group === 'Link') {
							return true;
						}
						return menuItem.group === 'Element';
					} else {
						return menuItem.group === 'none';
					}
				};

				// 拓扑各视图布局
				var rightSplit = new twaver.controls.SplitPane(network, tablePane, 'vertical', 0.7);
				var mainSplitPane = new twaver.controls.SplitPane(tree, rightSplit, 'horizontal', 0.3);
				var networkDom = mainSplitPane.getView();
				networkDom.style.width = "100%";
				networkDom.style.height = "100%";
				document.body.appendChild(networkDom);
				network.getView().style.backgroundColor = "#f3f3f3";
				network.getView().style.cursor = "hand";
				window.onresize = function() {
					mainSplitPane.invalidate();
				};
			}
		</script>
	</head>

	<body onload="init()" style="margin:0;">

	</body>
</html>