js画图开发库--mxgraph--[layers-分层结构.html]

最新推荐文章于 2024-10-26 12:10:15 发布

原创最新推荐文章于 2024-10-26 12:10:15 发布 · 439 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#js画图开发库 #mxgraph #layers #分层结构.html

mxgraph 专栏收录该内容

55 篇文章

订阅专栏

本文展示了一个使用mxGraph库实现的分层结构示例，包括如何创建不同图层、在各层上绘制节点和边，并通过按钮切换图层可见性。

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

js画图开发库--mxgraph--[layers-分层结构.html]

<!Doctype html>
<html xmlns=http://www.w3.org/1999/xhtml>
	<head>
	<meta http-equiv=Content-Type content="text/html;charset=utf-8">
	<title>分层结构</title>

	<!-- 如果本文件的包与src不是在同一个目录,就要将basepath设置到src目录下 -->
	<script type="text/javascript">
		mxBasePath = '../src';
	</script>

	<!-- 引入支持库文件 -->
	<script type="text/javascript" src="../src/js/mxClient.js"></script>
	<!-- 示例代码 -->
	<script type="text/javascript">

		// 程序在此方法中启动 
		function main(container)
		{
			// 检查浏览器支持
			if (!mxClient.isBrowserSupported())
			{
				mxUtils.error('Browser is not supported!', 200, false);
			}
			else
			{
				// 去锯齿效果
				mxShape.prototype.crisp = true;
				
				// 在容器中创建两层自定义模型
				// 图层也可以被动态地添加  var layer = model.add(root, new mxCell()).
				var root = new mxCell();
				var layer0 = root.insert(new mxCell());
				var layer1 = root.insert(new mxCell()); 
				var model = new mxGraphModel(root);

				var graph = new mxGraph(container, model);
				
				// 禁用所有元素操作
				graph.setEnabled(false);
				
				// 创建默认窗体
				var parent = graph.getDefaultParent();
								
				// 开启更新事务
				model.beginUpdate();
				try
				{
					var v1 = graph.insertVertex(layer1, null, 'Hello,', 20, 20, 80, 30, 'fillColor=#C0C0C0');
					var v2 = graph.insertVertex(layer1, null, 'Hello,', 200, 20, 80, 30, 'fillColor=#C0C0C0');
					var v3 = graph.insertVertex(layer0, null, 'World!', 110, 150, 80, 30);
					var e1 = graph.insertEdge(layer1, null, '', v1, v3, 'strokeColor=#0C0C0C');
					e1.geometry.points = [new mxPoint(60, 165)];
					var e2 = graph.insertEdge(layer0, null, '', v2, v3);
					e2.geometry.points = [new mxPoint(240, 165)];
					var e3 = graph.insertEdge(layer0, null, '', v1, v2,
							'edgeStyle=topToBottomEdgeStyle');
					e3.geometry.points = [new mxPoint(150, 30)];
					var e4 = graph.insertEdge(layer1, null, '', v2, v1,
							'strokeColor=#0C0C0C;edgeStyle=topToBottomEdgeStyle');
					e4.geometry.points = [new mxPoint(150, 40)];
				}
				finally
				{
					// 结束更新事务
					model.endUpdate();
				}

				document.body.appendChild(mxUtils.button('Layer 0', function()
				{
					model.beginUpdate();
					try
					{
						var visible = model.isVisible(layer0);
						model.setVisible(layer0, !visible);
	
						// 隐藏其他层的连接到这一层的子元素
						graph.view.invalidate();
					}
					finally
					{
						model.endUpdate();
					}
				}));
				
				document.body.appendChild(mxUtils.button('Layer 1', function()
				{
					model.beginUpdate();
					try
					{
						var visible = model.isVisible(layer1);
						model.setVisible(layer1, !visible);
						
						// 隐藏其他层的连接到这一层的子元素
						graph.view.invalidate();
					}
					finally
					{
						model.endUpdate();
					}
				}));
			}
		};
	</script>
</head>

<!-- 页面载入时启动程序 -->
<body onload="main(document.getElementById('graphContainer'))">

	<!-- 创建带网格壁纸和曲线的一个容器  -->
	<div id="graphContainer"
		style="overflow:hidden;position:relative;width:321px;height:241px;background:url('editors/images/grid.gif')">
	</div>
</body>
</html>