mxgraph说明文档

1 mxgraph介绍 1.1 基本概念

mxGraph 是一个 JS 绘图组件适用于需要在网页中设计/编辑流程图、图表、网络图和普通图形的 Web 应用程序。mxgraph 下载包中包括用javascript 写的前端程序,也包括多个和后端程序(java/C#等等)集成的例子。

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

mxGraph客户端是一个图形组件，并提供和网页集成的接口。客户端需要一个Web服务器提供所需的文件，也可以在本地文件系统上运行。后台可用于集成到现有存在的服务器所支持的语言中。

涉及的一些基本概念：

图：由顶点，也称为节点，以及边（节点之间的连接线）组成。顶点可以是图形、图像、矢量绘图、动画以及几乎所有可以在浏览器中 操作的图形。

交互：使用mxGraph的应用程序中，通过WEB应用程序的GUI改变图形模式。 mxGraph支持拖动、复制图元、重新调整大小、重新构造，连接和断开，从外部源的拖放和删除，编辑图元标签中的位置等等。将交互信息放在客户端，通过javascript实现

布局：图形图元可以布置在一个简单的应用程序的任何地方，包括在彼此顶部。图元可通过边是彼此相互联系。mxGraph支持树、流

向和层次的布局，来满足大多数布局的需求。

2 mxgraph使用 2.1 mxgraph文档

目前官方的文档是需要付费的，文档中包括服务端代码，客户端功能以及介绍。文档的结构表：

/doc /dotnet /php /java /javascript /javascript/examples index.html

文档根目录，保持此用户手册 .NET服务器端代码 php代码 Java服务器端代码 JavaScript客户端功能 mxGraph的HTML演示例子 开发库的基础介绍 我们现在只使用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. 引入库文件。用以下代码来加载库文件。

这部分代码的作用主要的是在容器里加入两个节点。页面效果：

后面将对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()) {

百度搜索“77cn”或“免费范文网”即可找到本站免费阅读全部范文。收藏本站方便下次阅读，免费范文网，提供经典小说综合文库mxgraph说明文档在线全文阅读。