MxGraph从入门到精通之2：HelloWorld程序解析

朱雀 2023-02-19 06:27 32阅读 0赞

### 文章目录 ###

通过上一篇文章[MxGraph从入门到精通之1：运行HelloWorld示例程序][MxGraph_1_HelloWorld]，我们已经把MxGraph运行起来，通过查看hellloworld.html可以总结该程序运行的核心步骤主要有以下几步：

1.  创建一个div元素，作为MxGraph渲染图形的容器
2.  在div元素上创建一块画布(graph)
3.  在画布上绘制顶点(Vertex)和边(Edge)
4.  把画布及其顶点和边更新渲染出来

整个示例代码分析如下：

<html>
    <head>
    	<title>Hello, World! example for mxGraph</title>
    
    	
    	<script type="text/javascript"> mxBasePath = '../src'; </script>
    
    	
    	<script type="text/javascript" src="../src/js/mxClient.js"></script>
    
    	<script type="text/javascript"> // 主程序入口 // container是一个通过document.getElementById获取到的DOM节点 function main(container) { // 检查浏览器是否支持 if (!mxClient.isBrowserSupported()) { mxUtils.error('Browser is not supported!', 200, false); } else { // Disables the built-in context menu mxEvent.disableContextMenu(container); // 创建画布，mxGraph是整个MxGraph的核心类 var graph = new mxGraph(container); new mxRubberband(graph); // 获取根节点，后面的顶点和边都要作为子节点加入到根节点中 var parent = graph.getDefaultParent(); graph.getModel().beginUpdate(); try { // 插入顶点 var v1 = graph.insertVertex(parent, null, 'Hello,', 20, 20, 80, 30); var v2 = graph.insertVertex(parent, null, 'World!', 200, 150, 80, 30); // 创建一条边把v1和v2两个顶点连起来 var e1 = graph.insertEdge(parent, null, '', v1, v2); } finally { graph.getModel().endUpdate(); // 把画布及其顶点和边更新渲染出来 } } }; </script>
    </head>
    
    <body onload="main(document.getElementById('graphContainer'))">
    
    	
    	
    	<div id="graphContainer" style="position:relative;overflow:hidden;width:321px;height:241px;background:url('editors/images/grid.gif');cursor:default;">
    	</div>
    </body>
    </html>

MxGraph通过以下方式创建了一块画布，即graph对象：

var container = document.getElementById('graphContainer')
    var graph = new mxGraph(container);

graph对象是整个程序的核心，后续的图形都需要绘制在这个画布之上。

以下代码在画布上进行顶点的绘制：

var v1 = graph.insertVertex(parent, null, 'Hello,', 20, 20, 80, 30);
    var v2 = graph.insertVertex(parent, null, 'World!', 200, 150, 80, 30);

其中，第一个参数表示该顶点附属于哪个父节点，第二个参数我们暂时忽略，第3个参数为顶点的名称，会显示在顶点上面，后面4个参数表示顶点的位置。

以下代码在两个顶点之间绘制一条边把它们连起来：

var e1 = graph.insertEdge(parent, null, '', v1, v2);

类似的，第一个参数表示该边附属于哪个父节点，第二个参数我们暂时忽略，第3个参数为边的名称，会显示在边上，后面2个参数表示该边连接的两个顶点。

[MxGraph_1_HelloWorld]: https://blog.csdn.net/u012124304/article/details/106691011