MxGraph - 改变mxCell的位置和大小

最新推荐文章于 2025-11-10 01:51:12 发布
原创 最新推荐文章于 2025-11-10 01:51:12 发布 · 3.2k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#mxGraph #setGeometry

本文档记录了在mxGraph项目中遇到的问题：如何在选中一个mxCell并更改其内容后，使cell的宽度自适应内容。经过尝试多种方法无效后，最终通过研究文档找到并应用了setGeometry方法，成功实现了预期效果。

今天是被mxGraph的mxOutline打击到的一天。不过还好，加班解决这个小问题找回一点点自信。

项目中有一个操作：
选中一个mxell 然后改变其显示的内容，同时需要cell的宽度随着内容改变，达到宽度自适应的效果。

改变cell宽度这个操作用了很多方法都没有达到效果，比如有些论坛提到的：

	this.graph.updateCellSize(cell, true);
	var geom = cell.getGeometry();
	geom.width = geom
最低0.47元/天 解锁文章
mxGraph实战（二）
进一步，有一步的欢喜。
06-22 2950
继mxGraph（一）的学习实践，我最近有根据官方的实例实现了图中画布的大小改变，还可以增加右上角的概览窗口。 背景：react+mxGraph. 要求: 实现画布中每个控件有图标，label。 画布可放大，缩小，还原，有个概览窗口。 鼠标移入有提示文字（已经实现：mxGraph学习（一）） 首先，来看看成果图： 原图： 放大后的： 缩小后的： 主要的代码： 首先初始化一些mxGraph的样式等参数： ...
【Mxgraph】Vue中使用mxgraph开发流程图工具
热门推荐
节省钱的博客
03-11 2万+
1.什么是mxgraph mxGraph是一个JavaScript图表库，可以快速创建交互式图形和图表应用程序，这些应用程序可以在其供应商支持的任何主要浏览器中运行。mxGraph 提供图形绘制、图形可视化、图形交互、图形布局、图形分析等能力， 适用于工作流程图、BPMN图、网络图、UML图、循环图、组织结构图、MindMap图、机架图、甘特图、信息图、平面图等绘制。 mxGraph在2005年创建，作为商业项目一直持续到2016年，2016年创建者以Apache 2.0开源协议在GitHub上公布源码。
mxGraph学习
大白的博客
03-30 2438
mxgraph的渲染过程 1：初始化mxUtils对象：doc = mxUtiles.createXmlDocument(); 2：使用创建的对象，创建具体模型： Var person = doc.createElement(‘模型名字’); 可以通过setAttribute来设置模型对象的属性： person.setAttribute('lastName', 'Duck');...
图解mxGraph模块化架构：从核心模块到扩展实践指南
最新发布
gitblog_01121的博客
11-10 442
你是否在寻找一款能在浏览器中实现流程图、工作流和网络图的JavaScript库？是否需要定制化节点样式或扩展布局算法？本文将系统解析mxGraph的模块化架构，通过核心模块拆解、扩展点设计和实战案例，帮助你30分钟内掌握二次开发精髓。 读完本文你将获得： - 理解mxGraph五大核心模块的协作机制 - 掌握3个关键扩展点的定制化方法 - 学会使用官方示例快速搭建流程图应用 ## 架构概览：轻
mxGraph改变图形大小重置overlay位置
海阔山遥，未知何处是潇湘。
06-28 4407
要在改变图形大小的时候改变overlay的位置，那肯定就要对重置图形大小的方法进行改造了。下面是源文件中的代码 mxGraph.prototype.resizeCells = function(cells, bounds) { this.model.beginUpdate(); try { this.cellsResized(cells, bounds);
mxgraph弹出框修改选中cell值
tanqis的博客
10-13 1703
初次接触mxgraph，国外不友善的API接口文档说明，真是伤透了脑筋啊！ 这个问题一开始被mxCellAttributeChange这个东西给误导了，花了我三四个小时候都没搞定，一顿风骚代码下来，自己都扛不住了，都对不起我的肩颈劳损！ 最后在把API看的差不多的时候才发现，你妹的，关键代码就两行搞定！啊~ 啊~ 啊~ 【咆哮.png】 以下直接上代码： //在页面添加一个按钮，点击画布节点再点击...
mxGraph学习一—— helloworld例子解读
weixin_37705284的博客
03-07 1353
mxGraph从helloworld开始学习 helloword文件在源码的路径： mxgraph-master\javascript\examples\helloworld.html mxGraph中的Hello World，是一个简单的客户端的例子，显示了两个相连的“Hello”和“世界”的顶点标签。 这个例子演示了以下几件事： 创建一个嵌入了mxGraph客户端JavaScript的HTM...
mxgraph源文件
09-02
- `mxGeometry` 描述了一个细胞的位置和大小，包括x、y坐标、宽度、高度以及相对于父细胞的相对位置。 - `mxCellState` 是细胞在视图中的表示，包含了实际绘制时的几何信息和样式属性。 3. **图形样式** - `...
mxGraph Model and Cells
hanwb1的博客
04-29 2657
1 mxGraph Model and Cells 1.1 Core mxGraph architecture 1.1.1 The mxGraph Model mxGraph模型是描述图形结构的核心模型，该类称为mxGraphModel，可以在模型包中找到。图结构的添加、更改和删除通过图模型API进行。该模型还提供了确定图形结构的方法，以及设置可视状态(如可见性、分组和样式)的方法. ...
mxGraph实现节点尺寸适应内容尺寸
weixin_43904028的博客
11-04 998
mxGraph实现节点尺寸适应内容尺寸 默认label插入后节点不会随文字长度改变 修改后节点会随字体长度、高度改变 if (cell.vertex!=1){ return ; } var table = document.createEleme
mxgraph节点编辑后宽度自适应
月来better
05-06 407
【代码】mxgraph节点编辑后宽度自适应。
mxGraph节点图形设置
徐志摩的博客
10-16 8154
不积跬步，无以至千里.... ------节点样式设置 1、如何设节点颜色？ 通过属性fillColor（填充色）、gradientColor（渐变色），设为一样的颜色就是节点颜色了。 2、如何设置透明颜色？ 在配置文件中none可设为默认颜色，transparent可设透明颜色 3、节点不可改变大小 0否，1是 4、节点与连线紧密连接，无空隙
mxGraph定位盲区图形到绘图区域中心位置
月来better
11-11 460
mxgraph定位盲区图形到绘图区域中心位置
js画图开发库--mxgraph--[edgetolerance-连接线调整.html]
用技术点亮生命，用产品温暖人心，探讨coding真谛，感悟技术精神。
03-14 1405
 js画图开发库--mxgraph--[edgetolerance-连接线调整.html] 双击鼠标选中连接线可进行调整！ <!Doctype html> <html xmlns=http://www.w3.org/1999/xhtml> <head> <meta http-equiv=Content-Type content="text...
第五章——UpdateCell命令
weixin_33711641的博客
07-05 949
为什么80%的码农都做不了架构师？>>> ...
mxgraph 画布
aimeizi1314的博客
07-17 1407
画布自动扩大/缩小计算： //得到所拖拽图形相对于画布的位置（-880，-100） var x = Math.ceil(bounds.x / this.view.scale - this.view.translate.x); var y = Math.ceil(bounds.y / this.view.scale - this.view.translate.y); //根据缩...
【mxGraph】源码学习：（7）mxCell
widiot的博客
10-15 4607
1. 概览 mxCell是graph model的元素。它们表示graph中的group、vertex和edge的状态。 对于自定义属性，建议使用XML节点作为cell的值。以下代码可用于创建具有XML节点的cell作为值： var doc = mxUtils.createXmlDocument(); var node = doc.createElement('MyNode') node.setA...
mxGraph 用户手册 – JavaScript客户端
cxzhq2002的杂记
08-22 1735
1简介 1.1产品线介绍 mxGraph是一系列以不同技术开发的工具库，旨在提供显示交互式的图表和图形的应用程序的功能。 请注意，对于图形，我们是指数学图形， 不一定单单指图表（虽然有些图形是图表）。参见后面的章节：“什么是图形？”的细节描述。 作为一个开发库，mxGraph没有专门提供了一个现成的可以使用的应用程序， 尽管其中的许多例子都接近可以直接使用。 mxGraph提供mxG...
评论 5
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值