当前位置：首页 > news >正文

mxgraph编辑器的使用

news 来源：原创 2025/6/8 2:26:51

前端JS如何使用mxgraph编辑器

说明：此项目是JS项目，目前还不支持TS

引入资源

可以直接从官网上拿下来，或者从其他地方获取

官网编辑器

如果只是展示图形的话只引入 mxClient.js就可以了

一个免费在线编辑器

自己用它做了一个在线编辑器，可以参考一下

当前项目源码

图形资源展示

const graph = new mxGraph(document.getElementById('graph'))
graph.model.clear()
let xmlDoc = mxUtils.parseXml(xml);
let codec = new mxCodec(xmlDoc);
codec.decode(xmlDoc.documentElement, graph.getModel());
graph.setEnabled(false);
// graph.fit(); // 自适应缩放

图形展示图

编辑器

// 编辑器
(function () {
    // 语言资源
    let bundle = 'https://jgraph.github.io/mxgraph/javascript/examples/grapheditor/www/resources/grapheditor.txt';
    // 默认样式
    let defaultThemes='https://jgraph.github.io/mxgraph/javascript/examples/grapheditor/www/styles/default.xml'
    mxUtils.getAll([bundle,defaultThemes ], function (xhr) {
        // 添加语言配置
        mxResources.parse(xhr[0].getText());

        // 配置默认样式
        let themes = {};
        themes[Graph.prototype.defaultThemeName] = xhr[1].getDocumentElement();
        const editor = new EditorUi(new Editor(false, themes), document.getElementById('editor'))
        //初始化完成后可以再进一步配置编辑器，比如添加右键菜单，或者添加工具栏按钮等等
    }, function () {
        document.body.innerHTML = '<center style="margin-top:10%;">Error loading resource files. Please check browser console.</center>';
    });
})()

编辑器图

其他配置

添加一个爪子箭头样式在箭头cell中设置style=endArrow= claw;startArrow= claw;

// 添加爪子箭头, style=endArrow=claw;startArrow=claw;
function createClaw(widthFactor) {
    widthFactor = (widthFactor != null) ? widthFactor : 2;
    return function (canvas, shape, type, pe, unitX, unitY, size, source, sw, filled) {
        let endOffsetX = unitX * sw * 1.118;
        let endOffsetY = unitY * sw * 1.118;
        unitX = unitX * (size + sw);
        unitY = unitY * (size + sw);
        let pt = pe.clone();
        pt.x -= endOffsetX;
        pt.y -= endOffsetY;
        let f = (type != mxConstants.ARROW_CLASSIC && type != mxConstants.ARROW_CLASSIC_THIN) ? 1 : 3 / 4;
        pe.x += -unitX * f - endOffsetX;
        pe.y += -unitY * f - endOffsetY;
        const y = (pt.y === pe.y ? pt.x > pe.x ? -unitX : unitX : 0) / widthFactor;
        const x = (pt.x === pe.x ? pt.y < pe.y ? unitY : -unitY : 0) / widthFactor;
        return function () {
            canvas.begin();
            canvas.moveTo(pe.x, pe.y);
            canvas.lineTo(pt.x, pt.y);
            canvas.moveTo(pe.x, pe.y);
            canvas.lineTo(pt.x + x, pt.y + y);
            canvas.moveTo(pe.x, pe.y);
            canvas.lineTo(pt.x - x, pt.y - y);
            canvas.close();
            canvas.stroke();
        };
    }
}

mxMarker.addMarker('claw', createClaw(1.5));

工具栏中添加保存按钮

const toolbarInit = Toolbar.prototype.init;
Toolbar.prototype.init = function () {
    toolbarInit.apply(this, arguments);
    this.editorUi.menus.put('save', new Menu(() => this.editorUi.actions.get('save').funct(), true))
    // geSprite-save 这是一个样式，官网中没有save图标，可以自定义
    this.addMenu('geSprite-save', mxResources.get('save'), false, 'save', null, true);
}