文章目录
通过上一篇文章MxGraph从入门到精通之1：运行HelloWorld示例程序，我们已经把MxGraph运行起来，通过查看hellloworld.html可以总结该程序运行的核心步骤主要有以下几步：
- 创建一个div元素，作为MxGraph渲染图形的容器
- 在div元素上创建一块画布(graph)
- 在画布上绘制顶点(Vertex)和边(Edge)
- 把画布及其顶点和边更新渲染出来
整个示例代码分析如下：
<html>
<head>
<title>Hello, World! example for mxGraph</title>
<!-- basepath变量用于告诉MxGraph从哪里加载它的资源 -->
<script type="text/javascript">
mxBasePath = '../src';
</script>
<!-- 导入MxGraph库文件 -->
<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'))">
<!-- 用于渲染MxGraph图形的div，类似于画布 -->
<!-- 注意：如果想要画布具有滚动条效果，样式要把overflow:hidden改成overflow:auto -->
<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个参数表示该边连接的两个顶点。