leafer-ui
leafer-ui copied to clipboard
editor-元素多选缩放时是否可以根据缩放系数进行单个元素的缩放
官网说明editor多选元素不支持widthRange和heightRange,是否可以有一个解决方案去解决这种问题? 做了一个尝试,通过遍历选中的元素执行各个元素的resize,代码如下
app.editor.on(EditorScaleEvent.SCALE, (e) => {
const { target, scaleX, scaleY, transform } = e;
// console.log(scaleX, scaleY, transform);
// scaleTarget = target;
this._selectedBlocks.forEach((b) => {
const node = b.getRootNode();
b.resize({
width: node.width * scaleX,
height: node.height * scaleY,
});
});
// target.hostRefer?.resize({
// width: target.width,
// height: target.height,
// });
});
// 单个元素的resize
resize: ({ width, height }) {
const widthRange = this.calcWidthRange();
if (widthRange.min > width) {
console.log('达到最小限制');
return;
}
console.log('未达到最小限制');
}
不过这么方式遇到了两个问题;
- 代码限制确实执行了,但是拉伸继续缩小
- 选中框的大小没有跟随元素的高度变化而变化,单选元素时可以的 效果图如下
目前有一定的难度,会出很多其他的问题,等后面想到了好的办法会解决一下。
@leaferjs 拉伸操作不变,只要求缩放各个元素时缩放到最小大小时就禁止单个缩放,鼠标可以继续移动,修改元素的位置就行。有没有可以打补丁的解决方案。另外单个元素缩放的时候支持widthRange和heightRange设置,这块处理逻辑是什么?
可以看一下源码,不是太好支持的