js画图框架--mxgraph--入门

mxGraph 是一个基于 JavaScript 的开源图形库，它提供了一套完整的基于 Web 的图形解决方案，可以用于创建交互式的图形界面和图表。它支持各种类型的图形对象，包括节点、连线、箭头、文本、图片等，并且可以通过拖放、缩放等交互方式来编辑和操作这些图形对象。mxGraph 的功能非常强大，可以用于构建各种类型的图形应用程序，比如流程图、组织结构图、UML 图、时序图等。

下面是使用 mxGraph 的基本步骤：

1. 引入 mxgraph 库文件。

在 HTML 文件中引入 mxgraph 库文件，可以通过以下方式引入：

<script src="mxgraph/javascript/mxClient.js"></script>

2. 创建画布对象。

mxGraph 的主要对象是 mxGraph 对象，我们需要先创建一个 mxGraph 对象，然后将其挂载到 HTML 页面上的一个容器元素中，例如：

<div id="graphContainer"></div>

// 创建画布对象
var container = document.getElementById('graphContainer');
var graph = new mxGraph(container);

3. 创建图形对象。

mxGraph 提供了各种类型的图形对象，可以通过 mxGraph.insertVertex() 和 mxGraph.insertEdge() 方法来创建节点和边，例如：

// 创建一个节点
var vertex = graph.insertVertex(parent, null, 'Hello, World!', 20, 20, 80, 30);

// 创建一条边
var edge = graph.insertEdge(parent, null, '', vertex1, vertex2);

4. 设置图形对象样式。

mxGraph 的图形对象可以通过样式来设置其外观和行为，例如：

// 设置节点样式
vertex.setStyle('fillColor=#FFFFFF;strokeColor=#000000;');

// 设置边样式
edge.setStyle('endArrow=classic;');

5. 添加交互行为。

mxGraph 支持各种类型的交互行为，包括拖放、缩放、连线等，可以通过 mxGraph.addListener() 方法来添加事件监听器，例如：

// 添加拖放行为
var rubberband = new mxRubberband(graph);

以上是 mxGraph 的基本使用步骤，你可以通过 mxGraph 提供的 API 和示例代码来学习更多的用法和技巧。同时，mxGraph 提供了完善的文档和 API 参考，可以帮助你更好地理解和使用该库。