Mxgraph 使用教程（4）：详解mxgraph示例demo - Hello World

提示：接下来所有演示均以vue为主

1.在vue中实现一个hello -world

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

<script>
import mxgraph from "./mxgraph";
const {
  mxGraph,
  mxClient,
  mxCodec,
  mxUtils,
  mxConstants,
  mxPerimeter,
} = mxgraph;

export default {
  mounted() {
    if (!mxClient.isBrowserSupported()) {
      // 判断是否支持mxgraph
      mxUtils.error("Browser is not supported!", 200, false);
    } else {
      // 在容器中创建图表
      let container = document.getElementById("graphContainer");

      var graph = new mxGraph(container);

      // 生成 Hello world!
      var parent = graph.getDefaultParent();
      graph.getModel().beginUpdate();
      try {
        var v1 = graph.insertVertex(parent, null, "Hello,", 20, 200, 80, 30);
        var v2 = graph.insertVertex(parent, null, "World", 200, 150, 80, 30);
        graph.insertEdge(parent, null, "", v1, v2);
      } finally {
        // Updates the display
        graph.getModel().endUpdate();
      }
    }
  },
};
</script>

<style>
#graphContainer{
  width: 700px;
  height: 500px;
  border: 3px solid rgb(194, 185, 185);
  background-image: url('../assets/grid.gif');
  margin: auto;
}
</style>

生成mxgraph图形如图所示：

1.创建mxgraph容器

// 在容器中创建图表
      let container = document.getElementById("graphContainer");

      var graph = new mxGraph(container);

2.设置容器样式（添加背景图）

我采用的是外部设置样式
首先grid.gif图片，是上文讲到的本地下载里面拿到的
具体目录为：

当然你也可以在安装的依赖中找到

3.生成节点

var v1 = graph.insertVertex(parent, null, "Hello,", 20, 200, 80, 30);

insertVertex
参数1：parents 生成节点要插入的父级容器
参数2：null 此处可以设置节点的id，便于识别节点，null为默认id
参数3：label 此处设置节点的内容
参数4：设置节点大小及节点在父级容器中的相对位置

4.生成边

graph.insertEdge(parent, null, "", v1, v2);

insertEdge
参数1：parents 生成边要插入的父级容器
参数2：：null 此处可以设置节点的id，便于识别边，null为默认id
参数3：label 此处设置节点的内容
参数4：边的起始节点和终止节点

5.mxgraph图的更新等、

graph.getModel().beginUpdate();
      try {
        var v1 = graph.insertVertex(parent, null, "Hello,", 20, 200, 80, 30);
        var v2 = graph.insertVertex(parent, null, "World", 200, 150, 80, 30);
        graph.insertEdge(parent, null, "", v1, v2);
      } finally {
        // Updates the display
        graph.getModel().endUpdate();
      }

graph.getModel().beginUpdate(); 表示mxgraph图准备更新前的状态
graph.getModel().endUpdate(); 表示mxgraph图更新后的状态