MxGraph - 改变mxCell的位置和大小

最新推荐文章于 2025-06-06 09:05:38 发布
最新推荐文章于 2025-06-06 09:05:38 发布
阅读量3.2k 收藏 2
点赞数 1
CC 4.0 BY-SA版权
分类专栏： mxGraph 文章标签： mxGraph setGeometry
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/DeepHugY/article/details/102594766
本文档记录了在mxGraph项目中遇到的问题：如何在选中一个mxCell并更改其内容后，使cell的宽度自适应内容。经过尝试多种方法无效后，最终通过研究文档找到并应用了setGeometry方法，成功实现了预期效果。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

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

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

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

	this.graph.updateCellSize(cell, true);
	var geom = cell.getGeometry();
	geom.width = geom
最低0.47元/天 解锁文章

200万优质内容无限畅学
第五章——UpdateCell命令
weixin_33711641的博客
07-05 918
为什么80%的码农都做不了架构师？>>> ...
js画图开发库--mxgraph--[swimlanes-泳道图.html]
用技术点亮生命，用产品温暖人心，探讨coding真谛，感悟技术精神。
03-04 2325
 js画图开发库--mxgraph--[swimlanes-泳道图.html]       <!Doctype html> <html xmlns=http://www.w3.org/1999/xhtml> <head> <meta http-equiv=Content-Type content="text/html;charset=u...
mxGraph核心函数mxGraph.insertVertex()和mxGraph.insertEdge()
qq_29207823的博客
04-08 1140
一、mxGraph.insertVertex() mxGraph.insertVertex(parent，id，value，x，y，width，height，style) 该函数用来生成模块 1： parent - 作为组结构中新单元的直接父级的单元。 2：id - 这是描述单元格的全局唯一标识符，它始终是一个字符串。这主要用于在外部引用持久输出中的单元格。如果您不希望自己维护id，请将null传递给此参数并确保mxGraphModel.isCreateIds（）返回true。这样，模型将管理
mxGraph 完全指南：JavaScript 图表库核心技术解析
最新发布
gitblog_01113的博客
06-06 323
mxGraph 完全指南：JavaScript 图表库核心技术解析 一、mxGraph 核心概念与技术架构 mxGraph 是一个强大的 JavaScript 图表库，专为需要展示交互式图表和图形的 Web 应用而设计。作为开发者工具库，它提供了完整的绘图、交互和上下文关联功能。 1.1 技术架构解析 mxGraph 采用纯前端架构，主要包含以下技术组件： 核心 JavaScript 文件：包含...
mxGraph改变图形大小重置overlay位置
海阔山遥，未知何处是潇湘。
06-28 4381
要在改变图形大小的时候改变overlay的位置，那肯定就要对重置图形大小的方法进行改造了。下面是源文件中的代码 mxGraph.prototype.resizeCells = function(cells, bounds) { this.model.beginUpdate(); try { this.cellsResized(cells, bounds);
mxgraph弹出框修改选中cell值
tanqis的博客
10-13 1673
初次接触mxgraph，国外不友善的API接口文档说明，真是伤透了脑筋啊！ 这个问题一开始被mxCellAttributeChange这个东西给误导了，花了我三四个小时候都没搞定，一顿风骚代码下来，自己都扛不住了，都对不起我的肩颈劳损！ 最后在把API看的差不多的时候才发现，你妹的，关键代码就两行搞定！啊~ 啊~ 啊~ 【咆哮.png】 以下直接上代码： //在页面添加一个按钮，点击画布节点再点击...
mxGraph实现节点尺寸适应内容尺寸
weixin_43904028的博客
11-04 961
mxGraph实现节点尺寸适应内容尺寸 默认label插入后节点不会随文字长度改变 修改后节点会随字体长度、高度改变 if (cell.vertex!=1){ return ; } var table = document.createEleme
mxgraph节点编辑后宽度自适应
月来better
05-06 365
【代码】mxgraph节点编辑后宽度自适应。
mxGraph使用(vue)
helenjuan的博客
11-26 2163
mxGraph使用(vue) <div id="graph_container" class="svg-container" style="width: 100%; height: 100%;padding: 10px;"></div>
mxGraph学习一—— helloworld例子解读
weixin_37705284的博客
03-07 1332
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节点图形设置
徐志摩的博客
10-16 8096
不积跬步，无以至千里.... ------节点样式设置 1、如何设节点颜色？ 通过属性fillColor（填充色）、gradientColor（渐变色），设为一样的颜色就是节点颜色了。 2、如何设置透明颜色？ 在配置文件中none可设为默认颜色，transparent可设透明颜色 3、节点不可改变大小 0否，1是 4、节点与连线紧密连接，无空隙
mxGraph定位盲区图形到绘图区域中心位置
月来better
11-11 438
mxgraph定位盲区图形到绘图区域中心位置
js画图开发库--mxgraph--[edgetolerance-连接线调整.html]
用技术点亮生命，用产品温暖人心，探讨coding真谛，感悟技术精神。
03-14 1382
 js画图开发库--mxgraph--[edgetolerance-连接线调整.html] 双击鼠标选中连接线可进行调整！ &lt;!Doctype html&gt; &lt;html xmlns=http://www.w3.org/1999/xhtml&gt; &lt;head&gt; &lt;meta http-equiv=Content-Type content="text...
mxgraph 画布
aimeizi1314的博客
07-17 1381
画布自动扩大/缩小计算： //得到所拖拽图形相对于画布的位置（-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 4470
1. 概览 mxCell是graph model的元素。它们表示graph中的group、vertex和edge的状态。 对于自定义属性，建议使用XML节点作为cell的值。以下代码可用于创建具有XML节点的cell作为值： var doc = mxUtils.createXmlDocument(); var node = doc.createElement('MyNode') node.setA...
mxGraph学习
大白的博客
03-30 2379
mxgraph的渲染过程 1：初始化mxUtils对象：doc = mxUtiles.createXmlDocument(); 2：使用创建的对象，创建具体模型： Var person = doc.createElement(‘模型名字’); 可以通过setAttribute来设置模型对象的属性： person.setAttribute('lastName', 'Duck');...
mxGraph实战（二）
进一步，有一步的欢喜。
06-22 2918
继mxGraph（一）的学习实践，我最近有根据官方的实例实现了图中画布的大小改变，还可以增加右上角的概览窗口。 背景：react+mxGraph. 要求: 实现画布中每个控件有图标，label。 画布可放大，缩小，还原，有个概览窗口。 鼠标移入有提示文字（已经实现：mxGraph学习（一）） 首先，来看看成果图： 原图： 放大后的： 缩小后的： 主要的代码： 首先初始化一些mxGraph的样式等参数： ...
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值