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>