vue中使用mxgraph的方法实例代码详解

2019-11-19 11:32:09

字体：大中小

来源：转载

供稿：网友

1、npm 引入

npm install mxgraph --save

2、这个模块可以使用require()方法进行加载。它将返回一个接受对象作为选项的工厂函数。必须将mxBasePath选项提供给工厂函数，而不是将其定义为一个全局变量。

var mxgraph = require("mxgraph")({ // 以下地址不需要修改mxImageBasePath: "./src/images", mxBasePath: "./src"})

工厂函数返回一个“命名空间对象”，通过它可以访问mxGraph包的所有对象。例如，mxEvent对象在mxgraph.mxEvent中可用。

var mxEvent = mxgraph.mxEvent;mxEvent.disableContextMenu(container);

这个引入是官方提供的方式，但是与vue结合使用的时候，方法的指向会发生变化，所以做了以下修改

避免方法的指向发生变化，将其挂载到window上面：

建立index.js如下：

import mx from 'mxgraph';const mxgraph = mx({ mxImageBasePath: './src/images', mxBasePath: './src'});// decode bug https://github.com/jgraph/mxgraph/issues/49window.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;

页面引入：

import mxgraph from 'index.js';const {mxGraph, mxClient, mxCodec, mxUtils, mxConstants, mxPerimeter} = mxgraph;

3、书写‘hello world' demo

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();        }        // 打包XML文件        let encoder = new MxCodec();        let xx = encoder.encode(graph.getModel());        // 保存到getXml参数中        this.getXml = mxUtils.getXml(xx);      }    }

总结

以上所述是小编给大家介绍的vue中使用mxgraph的方法实例代码详解，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！

上一篇：JavaScript实现美化滑块效果

下一篇：vue中引入mxGraph的步骤详解