mxgraph说明文档

1mxgraph介绍
1.1 基本概念
mxGraph 是一个JS 绘图组件适用于需要在网页中设计/编辑
流程图、图表、网络图和普通图形的Web 应用程序。

mxgraph 下载包中包括用javascript 写的前端程序,也包括多个和后端程序(java/C#等等)集成的例子。

mxgraph支持拖动和克隆细胞，重新调整和改造，连接和断开，拖动和下降，从外部来源，编辑细胞中的标签和更多。

mxGraph客户端是一个图形组件，并提供和网页集成的接口。

客户端需要一个Web服务器提供所需的文件，也可以在本地文件系统上运行。

后台可用于集成到现有存在的服务器所支持的语言中。

涉及的一些基本概念：
图：由顶点，也称为节点，以及边（节点之间的连接线）组成。

顶点可以是图形、图像、矢量绘图、动画以及几乎所有可以在浏览器中操作的图形。

交互：使用mxGraph的应用程序中，通过WEB应用程序的GUI改变图形模式。

mxGraph支持拖动、复制图元、重新调整大小、重新构造，连接和断开，从外部源的拖放和删除，编辑图元标签中的位置等等。

将交互信息放在客户端，通过javascript实现
布局：图形图元可以布置在一个简单的应用程序的任何地方，包括在彼此顶部。

图元可通过边是彼此相互联系。

mxGraph支持树、流
向和层次的布局，来满足大多数布局的需求。

2 mxgraph使用
2.1 mxgraph文档
目前官方的文档是需要付费的，文档中包括服务端代码，客户端功能以及介绍。

文档的结构表：
我们现在只使用mxgraph的客户端功能，也就是只关注javascript 部分。

2.2 使用说明
官方文档/javascript/examples下的HTML演示例子，可以通过浏览器直接打开查看效果。

把mxgraph应用到我们的项目中，首先需要把js源文件，配置文件，图片文件等加进去。

具体步骤：
1.新建文件夹，比如：mxgraph。

2.把src，editors，images等文件夹放到相应的目录下。

src文件
下包括一些配置文件，图标，基础的样式文件，以及mxClient.js。

mxClient.js是mxgraph的javascript部分的核心，提供了在绘图时需要用到的api的，src一般放到HTML文件的上一级目录。

editors里包括图片，一些xml配置文件等。

3.新建html文件，比如：test.html
4.引入库文件。

用以下代码来加载库文件。

<script type="text/javascript">
mxBasePath = '../src/';
</script>
<script type="text/javascript"
src="../src/js/mxClient.js"></script>
mxBasePath变量用来定义库资源的目录。

这个变量必须在加载库前就定义好。

它的值跟src文件夹的路径有关。

所要加载的mxgraph相关库文件只有mxClient.js。

5.编写body体。

mxgraph是将html的页面元素<div>当做容器。

所以HTML的body里一般是一些div来组成。

通过js来给这些容器添加各种元素。

比如：
<div id="main"></div>
6.编写js。

使用mxgraph最主要的工作是写js，下面给一个简单
的例子。

<script type="text/javascript">
var container = document.getElementById("main");
container.style.background =
'url(editors/images/grid.gif)';
var graph = new mxGraph(container);
var parent = graph.getDefaultParent();
// 画方块
graph.insertVertex(parent, null, 'Hello', 50, 50, 80,
30);
graph.insertVertex(parent, null, 'World', 200, 50, 80,
30);
</script>
这部分代码的作用主要的是在容器里加入两个节点。

页面效果：
后面将对js部分做详细介绍。

2.3 mxgraph库
mxgraph对节点，边等对象提供了一套完整的封装，我们可以很容易根据提供的api，来得到图的信息以及节点之间的关系。

mxgraph 的底层是通过xml来存取图的信息。

除此之外，mxgraph还提供了一套编辑的接口，我们可以很容易地对节点进行删除、复制等操作，添加样式以及编辑元素的信息。

mxgraph也有一套自己的事件响应机制，通过使用这些事件相应，我们能方便地完成自己的一些操作，比如双击事件，右键菜单。

mxgraph也有对应语言的面向对象范式来构建的各种方式，比如：继承，构造函数，添加新的函数等。

原型重定义
mxgraph的类可以重新定义，也可以作为函数直接使用。

例如：mxEditor是一个函数，mxEditor.prototype是创建对象原型的
mxEditor功能。

对于子类，父类必须提供一个无参数的构造或处理要么是一个不带参数调用。

此外，也输得构造领域延伸后，必须重新界定原型。

例如：在mxGraph超类mxEventSource，这是在Javascript中，代表“继承”的原型分配到一个超累的实例。

mxEditor.prototype = new mxEventSource();
重新构造和现场使用：
mxEditor.prototype.constructor = mxEditor;
后者规则适用的对象类型，可以通过使用它的名称的构造来检索。

函数
为了增加新的功能和子类，可以增加新的函数，来对mxgraph的功能进行扩展。

比如：
mxGraph.prototype.getXml = function(){};
这跟库自身提供函数功能是一样的，可以通过实体直接调用getXml方法。

2.3.1 检查浏览器
建议在编码前先检查浏览器，如果浏览器不支持就能在此显示错误信息。

具体的代码如下：
function main(container)
{
// Checks if the browser is supported
//检查浏览器是否支持
if (!mxClient.isBrowserSupported())
{
// Displays an error message if the browser is not supported.
//如果浏览器不支持，则显示错误信息
mxUtils.error('Browser is not supported!', 200, false);
}else{
...
}
2.3.2 graph图
mxgraph使用的是MVC模式，它的节点，线等的实现，以及交互是通过graph图模型来实现的。

模型描述了图形结构的核心，被称为mxGraphModel，可以在model包中发现。

mxGraphModel是基本的对象，它存储着图形的数据结构。

另外，对图形结构的添加，更改和清除是通过图模型API来完成的。

该模型还提供了方法来确定图形的结构，以及提供方法来设置，如能见度、分组和样式的视觉状态。

虽然对于模型进行的处理是被存储在模型上的。

在真正的使用中需要通过容器来构建具体的图。

var model = new mxGraphModel();//创建一个空的模型
var graph = new mxGraph(container，model);//得到具体的图
也可以通过具体的图获得模型。

var model =graph.getModel();
如果你希望graph图只读，可用graph.setEnabed(false). mxgraph也有自己的样式库，视图库等。

Graph图api的核心类图如下，其他类都是辅助的。

mxGraphModel的常用api
beginUpdate() - 启动一个事务或子事务处理。

endUpdate() - 完成一个事务或子事务处理。

当需要在beginUpdate和endUpdate中来插入节点和连线（更新图形）。

endUpdate应放在finally-block中以确保endUpdate一直执行。

但beginUpdate不能在try-block中，这样如果beginUpdate失败那么endupdate永远不会执行。

插入节点示例：
//为插入节点获得默认的父节点。

//这通常是根节点的第一个子节点
var parent = graph.getDefaultParent();
// Adds cells to the model in a single step
//在单独的一步中添加cell
model.beginUpdate();
try
{
var v1 = graph.insertVertex(parent, null, 'Hello,', 20, 20, 80, 3 0);
var v2 = graph.insertVertex(parent, null, 'World!', 200, 150, 8 0, 30);
var e1 = graph.insertEdge(parent, null, '', v1, v2);
}
finally
{
//Updates the display
//更新显示
model.endUpdate();
}
2.3.2.1 节点
插入节点使用的是insertVertex（）方法。

它的原型为：
mxGraph.prototype.insertVertex = function( p arent,
id,
value,
x,
y,
width,
height,
style,
relative )
需要传入的参数有父节点，值，位置坐标，长宽，其他可选。

Style 是可选的，用于设置节点的样式。

可以设置多种形状的节点。

//方块，默认的形状是方块
graph.insertVertex(parent, null, '矩形', 50, 50, 150, 150);
//圆角矩形，shape=rounded 定义圆角， arcSize=20 定义圆角弧度
graph.insertVertex(parent, null, '圆角矩形', 300, 50, 150, 150, "rounded=true;perimeter=ellipsePerimeter;arcSize=20;");
//椭圆 shape=elipse 定义椭圆 perimeter=ellipsePerimeter 让连线的箭头或起点触到边缘
graph.insertVertex(parent, null, '椭圆', 550, 50, 150, 150,
"shape=ellipse;perimeter=ellipsePerimeter;");
//三角形，shape=triangl定义三角形，perimeter=ellipsePerimeter 让连线的箭头或起点触到边缘 direction=south 让三角形倒立
graph.insertVertex(parent, null, '三角形', 800, 50, 150, 150, "shape=triangle;perimeter=ellipsePerimeter;direction=south;");
//菱形shape=rhombus 定义菱形
graph.insertVertex(parent, null, '菱形', 1050, 50, 150, 150, "shape=rhombus;perimeter=ellipsePerimeter;");
//柱形 shape=cylinder 定义柱形
graph.insertVertex(parent, null, '柱形', 1300, 50, 150, 150, "shape=cylinder;perimeter=ellipsePerimeter;");
//人 shape=actor 定义演员
graph.insertVertex(parent, null, '演员', 50, 300, 150, 150,
"shape=actor;perimeter=ellipsePerimeter;");
// 云
graph.insertVertex(parent, null, '云', 300, 300, 150, 150, "shape=cloud;perimeter=ellipsePerimeter;");
可以设置graph图中的节点是否可拖拽，编辑。

// 开启可以拖拽建立关系
graph.setConnectable(true);
// 开启方块上的文字编辑功能
graph.setCellsEditable(false);
// 启用对齐线帮助定位
mxGraphHandler.prototype.guidesEnabled = true;
// 选择基本元素开启
graph.setEnabled(true);。