mxgraph说明文档

《mxgraph说明文档》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、1mxgraph介绍1.1基本概念mxGraph是一个JS绘图组件适用于需要在网页中设计/编辑流程图、图表、网络图和普通图形的Web应用程序。mxgraph下载包中包括用javascript写的前端程序,也包括多个和后端程序(java/C#等等)集成的例子。mxgraph支持拖动和克隆细胞，重新调整和改造，连接和断开，拖动和下降，从外部来源，编辑细胞中的标签和更多。mxGraph客户端是一个图形组件，并提供和网页集成的接口。客户端需要一个Web服务器提供所需的文件，也可以在本地文件系统上运行。后台可用于集成到现有存在的服务器所支持的

2、语言中。涉及的一些基本概念：图：由顶点，也称为节点，以及边（节点之间的连接线）组成。顶点可以是图形、图像、矢量绘图、动画以及几乎所有可以在浏览器中操作的图形。交互：使用mxGraph的应用程序中，通过WEB应用程序的GUI改变图形模式。 mxGraph支持拖动、复制图元、重新调整大小、重新构造，连接和断开，从外部源的拖放和删除，编辑图元标签中的位置等等。将交互信息放在客户端，通过javascript实现布局：图形图元可以布置在一个简单的应用程序的任何地方，包括在彼此顶部。图元可通过边是彼此相互联系。mxGraph支持树、流向和层次的

3、布局，来满足大多数布局的需求。2mxgraph使用2.1mxgraph文档目前官方的文档是需要付费的，文档中包括服务端代码，客户端功能以及介绍。文档的结构表：/doc文档根目录，保持此用户手册/dotnet.NET服务器端代码/phpphp代码/javaJava服务器端代码/javascriptJavaScript客户端功能/javascript/examplesmxGraph的HTML演示例子index.html开发库的基础介绍我们现在只使用mxgraph的客户端功能，也就是只关注javascript部分。2.2使用说明官方文档/

4、javascript/examples下的HTML演示例子，可以通过浏览器直接打开查看效果。把mxgraph应用到我们的项目中，首先需要把js源文件，配置文件，图片文件等加进去。具体步骤：1.新建文件夹，比如：mxgraph。2.把src，editors，images等文件夹放到相应的目录下。src文件下包括一些配置文件，图标，基础的样式文件，以及mxClient.js。mxClient.js是mxgraph的javascript部分的核心，提供了在绘图时需要用到的api的，src一般放到HTML文件的上一级目录。editors里包

5、括图片，一些xml配置文件等。1.新建html文件，比如：test.html2.引入库文件。用以下代码来加载库文件。 mxBasePath='../src/';mxBasePath变量用来定义库资源的目录。这个变量必须在加载库前就定义好。它的值跟src文件夹的路径有关。所要加载的mxgraph相关库文件只有mxClient.j

6、s。3.编写body体。mxgraph是将html的页面元素