1.本地引入mxgraph
第一步：下载mxgraph库
github地址：https://github.com/jgraph/mxgraph
第二步：clone项目
打开项目-》进入javascript
第三步：本地使用mxgraph
一个官方示例demo:
<html>
<head>
<title>Hello, World! example for mxGraph</title>
<!-- Sets the basepath for the library if not in same directory -->
<script type="text/javascript">
mxBasePath = '../src';
</script>
<!-- Loads and initializes the library -->
<script type="text/javascript" src="../src/js/mxClient.js"></script>
<!-- Example code -->
<script type="text/javascript">
function main(container)
{
// Checks if the browser is supported
if (!mxClient.isBrowserSupported())
{
// Displays an error message if the browser is not supported.
mxUtils.error('Browser is not supported!', 200, false);
}
else
{
// Disables the built-in context menu
mxEvent.disableContextMenu(container);
// Creates the graph inside the given container
var graph = new mxGraph(container);
// Enables rubberband selection
new mxRubberband(graph);
var parent = graph.getDefaultParent();
// Adds cells to the model in a single step
graph.getModel().beginUpdate();
try
{
var v1 = graph.insertVertex(parent, null, 'Hello,', 20, 20, 80, 30);
var v2 = graph.insertVertex(parent, null, 'World!', 200, 150, 80, 30);
var e1 = graph.insertEdge(parent, null, '', v1, v2);
}
finally
{
// Updates the display
graph.getModel().endUpdate();
}
}
};
</script>
</head>
<body onload="main(document.getElementById('graphContainer'))">
<div id="graphContainer"
style="position:relative;overflow:hidden;width:321px;height:241px;background:url('editors/images/grid.gif');cursor:default;">
</div>
</body>
</html>
结果：
2.Vue中使用mxgraph
第一步：安装mxgraph
npm install mxgraph --save
第二步：创建mxgraph.js文件进行相关配置
import mx from 'mxgraph';
const mxgraph = mx({
mxImageBasePath: './src/images',
mxBasePath: './src'
});
// decode bug https://github.com/jgraph/mxgraph/issues/49
window.mxGraph = mxgraph.mxGraph;
window.mxGraphModel = mxgraph.mxGraphModel;
window.mxEditor = mxgraph.mxEditor;
window.mxGeometry = mxgraph.mxGeometry;
window.mxDefaultKeyHandler = mxgraph.mxDefaultKeyHandler;
window.mxDefaultPopupMenu = mxgraph.mxDefaultPopupMenu;
window.mxStylesheet = mxgraph.mxStylesheet;
window.mxDefaultToolbar = mxgraph.mxDefaultToolbar;
export default mxgraph;
第三步：文件内部引入mxgraph
import mxgraph from './mxgraph';
const {
mxGraph, mxClient, mxCodec, mxUtils, mxConstants, mxPerimeter} = mxgraph;
第四步：使用mxgraph创建一个hello world demo
<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');
let MxGraph = mxGraph;
let MxCodec = mxCodec;
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);
var v3 = graph.insertVertex(parent, null, 'everyBody!', 300, 350, 60, 60);
graph.insertEdge(parent, null, '', v1, v2);
graph.insertEdge(parent, null, '', v2, v3);
graph.insertEdge(parent, null, '', v1, v3);
} finally {
// Updates the display
graph.getModel().endUpdate();
}
}
}
}
</script>
<style>
</style>
结果：
