mxgraph编辑器的使用

news2025/4/1 3:14:44

前端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);
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2324157.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

electron打包vue2项目流程

1&#xff0c;安装一个node vue2 的项目 2&#xff0c;安装electron&#xff1a; npm install electron -g//如果安装还是 特比慢 或 不想安装cnpn 淘宝镜像查看是否安装成功&#xff1a;electron -v 3&#xff0c;进入到项目目录&#xff1a;cd electron-demo 进入项目目录…

STM32F103_LL库+寄存器学习笔记11 - 串口收发的中断优先级梳理

导言 推荐的STM32 USARTDMA 中断优先级设置&#xff08;完整方案&#xff09;&#xff1a; 以你的STM32F103 USART1 DMA实例为例&#xff1a; 推荐中断优先级设置中断优先级USART1空闲中断&#xff08;接收相关&#xff09;优先级0DMA1通道5接收中断&#xff08;半满/满传输…

Postman 如何发送 Post 请求上传文件? 全面指南

写一个后端接口&#xff0c;肯定离不开后续的调试&#xff0c;所以我使用了 Postman 来进行上传图片接口的调试&#xff0c;调试步骤也很简单&#xff1a; 第一步&#xff1a;填写请求 URL第二步&#xff1a;选择请求类型第三步&#xff1a;选择发送文件第四步&#xff1a;点击…

Mathtype无法插入到Word中

在word工具栏上有没有出现Mtahtype&#xff0c;会出现以下两种情况&#xff1a; 1. 没有出现Mtahtype 2. 出现Mtahtype&#xff0c;但是点击会出现弹窗 “ Couldnt find the MathPage.wll ” 解决方案 首先查看word版本是32位还是64位&#xff0c;这个位数是office安装位数…

Agent AI综述

Agent AI综述 研究背景:早期AI研究目标分散,如今大语言模型(LLMs)和视觉语言模型(VLMs)的发展带来新契机,促使AI向能在复杂环境中担当动态角色的方向转变。Agent AI正是在这种背景下应运而生,融合语言、视觉等多种能力,有望重塑人类体验和产业标准。 Agent AI的融合:…

WPF ContentPresenter详解2

ContentPresenter与ContentControl的区别 ContentControl 和 ContentPresenter 是 WPF 中两个相关的控件&#xff0c;但它们在用途和功能上有一些关键的区别。理解这两者的区别和联系有助于更好地设计和开发用户界面。 1. 类层次结构 ContentControl&#xff1a;位于 WPF 控件…

CSS——变换、过度与动画

巧妙的使用变换、过度与动画可以让页面设计更有趣、更吸引人&#xff0c;同时还能提高可用性和感知性能。 文章目录 一&#xff0c;变换&#xff08;一&#xff09;2D变换1&#xff0c;定义旋转2&#xff0c;定义缩放3&#xff0c;定义移动4&#xff0c;定义倾斜5&#xff0c;定…

【PCB工艺】时序图(Timing Diagram)

时序图&#xff08;Timing Diagram&#xff09;是描述数字电路信号随时间变化的图示&#xff0c;广泛用于分析和设计时序逻辑电路&#xff0c;如锁存器&#xff08;Latch&#xff09;、触发器&#xff08;Flip-Flop&#xff09;、计数器、状态机等。这篇文章从时序图的原理、构…

第四届能源、电力与电气国际学术会议(ICEPET 2025)

重要信息 地点&#xff1a;中国-成都 官网&#xff1a;www.icepet.net&#xff08;了解参会投稿等信息&#xff09; 时间&#xff1a;2025年4月25-27日 简介 第四届能源、电力与电气会&#xff08;ICEPET 2025定于2025年4月25-27日在中国成都举办。 本次将围绕能源、电力及…

【机器学习】什么是逻辑回归?

什么是逻辑回归&#xff1f; 逻辑回归&#xff08;Logistic Regression&#xff09;是一个用于分类问题的统计学模型&#xff0c;尽管名字里有“回归”二字&#xff0c;它其实是用来做分类的&#xff0c;不是做数值预测的。 通俗易懂的理解 我们可以通过一个简单的例子来理解…

【Bug】记录2025年遇到的Bug以及修复方案

--------------------------------------------------------分割线 2025.3.25-------------------------------------------------------windows环境下通过命令行终端&#xff08;必须是命令行下&#xff0c;直接赋值传递&#xff0c;代码正常&#xff09;的形式传递字符串时&a…

【NLP 46、大模型技术发展】

目录 一、ELMo 2018 训练目标 二、GPT-1 2018 训练目标 三、BERT 2018 训练目标 四、Ernie —— baidu 2019 五、Ernie —— Tsinghua 2019 六、GPT-2 2019 七、UNILM 2019 八、Transformer - XL & XLNet 2019 1.模型结构 Ⅰ、循环机制 Recurrence Mechanism Ⅱ、相对位置…

《Python实战进阶》No34:卷积神经网络(CNN)图像分类实战

第34集&#xff1a;卷积神经网络&#xff08;CNN&#xff09;图像分类实战 2025年3月28日更新 增加了 CNN和AI大模型关系的说明。 2025年3月29日更新了代码&#xff0c;优化损失系数曲线可视化。 详细环境配置依赖和可一次性复制的完整代码见文末。 摘要 最近大模型推陈出新迭…

【qt】 布局器

参考博客&#xff1a;https://blog.csdn.net/Fdog_/article/details/107522283 目录 布局管理器概念常见的布局管理器及特点&#x1f535;QHBoxLayout水平布局&#x1f535;QVBoxLayout垂直布局 &#x1f535;QGridLayout网格布局 &#x1f535;QFormLayout表单布局 QT 高级布…

VMware Windows Tools 存在认证绕过漏洞(CVE-2025-22230)

漏洞概述 博通公司&#xff08;Broadcom&#xff09;近日修复了 VMware Windows Tools 中存在的一个高危认证绕过漏洞&#xff0c;该漏洞编号为 CVE-2025-22230&#xff08;CVSS 评分为 9.8&#xff09;。VMware Windows Tools 是一套实用程序套件&#xff0c;可提升运行在 VM…

【问题解决】Linux安装conda修改~/.bashrc配置文件后,root 用户下显示 -bash-4.2#

问题描述 在Linux安装conda下的python环境时候&#xff0c;修改了~/.bashrc文件&#xff0c;修改完成后&#xff0c;再次进入服务器后&#xff0c;登录时候显示的不是正常的[rootlocalhost ~]#&#xff0c;而是-bash-4.2# 原因分析&#xff1a; 网上原因有&#xff1a;/root下…

RabbitMQ 技术详解:异步消息通信的核心原理与实践

这里写目录标题 RabbitMQ 技术详解&#xff1a;异步消息通信的核心原理与实践一、RabbitMQ 本质剖析核心架构组件 二、核心功能与应用场景主要作用典型应用场景 三、工作流程深度解析消息传递流程关键协议机制 四、Java 实现示例1. 依赖配置&#xff08;Maven&#xff09;2. 消…

LLM架构解析:NLP基础(第一部分)—— 模型、核心技术与发展历程全解析

本专栏深入探究从循环神经网络&#xff08;RNN&#xff09;到Transformer等自然语言处理&#xff08;NLP&#xff09;模型的架构&#xff0c;以及基于这些模型构建的应用程序。 本系列文章内容&#xff1a; NLP自然语言处理基础&#xff08;本文&#xff09;词嵌入&#xff0…

k近邻算法K-Nearest Neighbors(KNN)

算法核心 KNN算法的核心思想是“近朱者赤&#xff0c;近墨者黑”。对于一个待分类或预测的样本点&#xff0c;它会查找训练集中与其距离最近的K个样本点&#xff08;即“最近邻”&#xff09;。然后根据这K个最近邻的标签信息来对当前样本进行分类或回归。 在分类任务中&#…

【Android15 ShellTransitions】(九)结束动画+Android原生ANR问题分析

finishTransition这部分的内容不多&#xff0c;并且我个人的实际工作中很少接触这块&#xff0c;因此我之前都觉得没有必要专门开一篇去分析最后留下的这一丁点儿的动画流程。但是最近碰到了一个google原生ANR问题&#xff0c;正好是和这块相关的&#xff0c;也让我意识到了fin…