博客
关于我
mxGraph改变图形大小重置overlay位置
阅读量:797 次
发布时间:2023-02-09

本文共 1718 字,大约阅读时间需要 5 分钟。

在调整图形大小的同时改变overlay的位置,这就需要对原有的图形重置方法进行改进。以下是源文件中的代码:

mxGraph.prototype.resizeCells = function(cells, bounds) {
this.model.beginUpdate();
try {
this.cellsResized(cells, bounds);
this.fireEvent(new mxEventObject(mxEvent.RESIZE_CELLS, 'cells', cells, 'bounds', bounds));
} finally {
this.model.endUpdate();
}
return cells;
};

为了在这个方法中调整overlay的位置,我们需要对其进行适当的修改。首先,需要获取当前图形的所有overlays,并在创建overlay时设置一些属性,如index,这样可以更方便地定位特定的overlay进行调整。

修改后的代码如下:

mxGraph.prototype.resizeCells = function(cells, bounds) {
this.model.beginUpdate();
try {
this.cellsResized(cells, bounds);
this.fireEvent(new mxEventObject(mxEvent.RESIZE_CELLS, 'cells', cells, 'bounds', bounds));
var _this = this;
$.each(cells, function(i, item) {
var overlays = _this.getCellOverlays(item);
$.each(overlays, function(j, overlay) {
if (overlay.tooltip === '辐射图') {
if (ylCommon.isAllowEdit()) {
overlay.offset.x = item.geometry.width - 35;
} else {
overlay.offset.x = item.geometry.width - 15;
}
}
if (overlay.image.src.indexOf('lock.png') > 0) {
overlay.offset.x = item.geometry.width - 15;
}
});
});
} finally {
this.model.endUpdate();
}
return cells;
};

在这个修改后的代码中,我们首先获取了每个单元格的overlays,然后检查每个overlay的tooltip是否为"辐射图"。如果允许编辑,则将该overlay的位置设置为item.geometry.width - 35;否则,则设置为item.geometry.width - 15。此外,如果overlay的图片路径包含"lock.png",则将其位置设置为item.geometry.width - 15

这种方法通过直接修改overlay的位置属性,使得在调整图形大小时,overlay的位置也能随之改变。

转载地址:http://tjffk.baihongyu.com/

你可能感兴趣的文章
Node.js 调用微信公众号 API 添加自定义菜单报错的解决方法
查看>>
node.js 配置首页打开页面
查看>>
node.js+react写的一个登录注册 demo测试
查看>>
Node.js中环境变量process.env详解
查看>>
Node.js之async_hooks
查看>>
Node.js也分裂了-开源社区动态
查看>>
Node.js初体验
查看>>
Node.js升级工具n
查看>>
Node.js卸载超详细步骤(附图文讲解)
查看>>
Node.js卸载超详细步骤(附图文讲解)
查看>>
Node.js基于Express框架搭建一个简单的注册登录Web功能
查看>>
node.js学习之npm 入门 —8.《怎样创建,发布,升级你的npm,node模块》
查看>>
Node.js安装与配置指南:轻松启航您的JavaScript服务器之旅
查看>>
Node.js安装及环境配置之Windows篇
查看>>
Node.js安装和入门 - 2行代码让你能够启动一个Server
查看>>
node.js安装方法
查看>>
Node.js官网无法正常访问时安装NodeJS的方法
查看>>
node.js模块、包
查看>>
node.js模拟qq漂流瓶
查看>>
node.js的express框架用法(一)
查看>>