Mxgraph 使用教程（3）：本地引入mxgraph和 vue中引入mxgraph

最新推荐文章于 2024-09-04 07:34:25 发布

七月是我的生日

最新推荐文章于 2024-09-04 07:34:25 发布

阅读量6.2k

点赞数 4

分类专栏：前端可视化MXgraph

本文链接：https://blog.csdn.net/qq_43955202/article/details/107821798

版权

前端可视化MXgraph 专栏收录该内容

12 篇文章 68 订阅

订阅专栏

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>