leafer-ui icon indicating copy to clipboard operation
leafer-ui copied to clipboard

editor-元素多选缩放时是否可以根据缩放系数进行单个元素的缩放

Open ghfkui opened this issue 4 months ago • 3 comments

官网说明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('未达到最小限制');
}

不过这么方式遇到了两个问题;

  1. 代码限制确实执行了,但是拉伸继续缩小
  2. 选中框的大小没有跟随元素的高度变化而变化,单选元素时可以的 效果图如下
Image 请问这种问题有解决方案吗

ghfkui avatar Sep 11 '25 10:09 ghfkui

目前有一定的难度,会出很多其他的问题,等后面想到了好的办法会解决一下。

leaferjs avatar Sep 12 '25 01:09 leaferjs

@leaferjs 拉伸操作不变,只要求缩放各个元素时缩放到最小大小时就禁止单个缩放,鼠标可以继续移动,修改元素的位置就行。有没有可以打补丁的解决方案。另外单个元素缩放的时候支持widthRange和heightRange设置,这块处理逻辑是什么?

ghfkui avatar Sep 12 '25 07:09 ghfkui

可以看一下源码,不是太好支持的

leaferjs avatar Sep 12 '25 08:09 leaferjs