mxgraph编辑器的使用

前端JS如何使用mxgraph编辑器

说明:此项目是JS项目,目前还不支持TS

引入资源

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

官网编辑器

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

一个免费在线编辑器

自己用它做了一个在线编辑器,可以参考一下
当前项目源码

图形资源展示

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(); // 自适应缩放

编辑器

js 复制代码
// 编辑器
(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;
js 复制代码
// 添加爪子箭头, 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));
  • 工具栏中添加保存按钮
js 复制代码
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);
}
相关推荐
拿我格子衫来2 小时前
图形编辑器基于Paper.js教程27:对图像描摹的功能实现,以及参数调整
开发语言·前端·javascript·图像处理·编辑器·图形渲染
家庭云计算专家2 小时前
ONLYOFFICE深度解锁系列.2-Excel 跨文件数据整合实战指南-可道云的另一个严重bug
云计算·编辑器·bug·excel
海海不掉头发7 小时前
Linux-编辑器的使用
linux·运维·编辑器
Miao kristoff7 小时前
开始放飞之先搞个VSCode
c++·vscode·编辑器
子燕若水11 小时前
在 UE5 编辑器中,由于游戏设置 -> EV100 设置,点击播放前后的光照不同。如何保持点击播放前后的光照一致?
游戏·ue5·编辑器
看山即山.1 天前
【Linux】Linux 操作系统 - 05 , 软件包管理器和 vim 编辑器的使用 !
linux·编辑器·vim
bookish_2010_prj1 天前
vscode使用技巧
ide·vscode·编辑器
python是个好东西1 天前
VSCode 扩展离线下载方法
ide·vscode·编辑器
晚风_END1 天前
node.js|环境部署|源码编译高版本的node.js
linux·服务器·数据库·node.js·编辑器·个人开发