Mxgraph 使用教程(4):详解mxgraph示例demo - Hello World
提示:接下来所有演示均以vue为主1.在vue中实现一个hello -world<template><div><divid="graphContainer"></div></div></template><script>import mxgraph from "./mxgraph";const {mxGraph,m
·
提示:接下来所有演示均以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图更新后的状态
更多推荐
已为社区贡献3条内容
所有评论(0)