FabricJs：将对象大小固定在组调整大小上答案

【问题标题】：FabricJs: Keep Object Size fixed on Group ReszingFabricJs：将对象大小固定在组调整大小上
【发布时间】：2021-11-19 01:37:37
【问题描述】：

我正在使用 FabricJS 创建一个包含两个对象的组 - 光图标 (svg) 和阴影 (三角形)。我将 Light Icon SVG 作为 SVG 导入，然后设置比例如下：

lightObj.scaleToWidth(24);
lightObj.scaleToHeight(24);

然后我将灯光图标 svg 对象和阴影三角形对象分组。

接下来，我尝试调整组的大小以调整阴影对象的大小。当我调整组大小时，我想将灯光图标对象的大小保持为 24，即与添加的大小相同。灯图标不需要缩放或调整大小。这是我的缩放功能：

this.canvas.on('object:scaling', (e) => {
      if (!e) return;
      const group = e.target;
      const shadowObj = group._objects.find(x => x.type === 'shadow');
      const lightObj = group._objects.find(x => x.type === 'light');
      if(group.scaleX === group.scaleY) {
        //Uniform Scaling
        lightObj.scaleToWidth(24 / group.scaleX);
        lightObj.scaleToHeight(24 / group.scaleY);  
      } else {
        //Resizing
        if(group.scaleX > group.scaleY) {
          console.log("Horizontally")
          lightObj.scaleToWidth(24 / group.scaleX);
          lightObj.scaleToHeight(24);
        } else {
          console.log("Vertically")
          lightObj.scaleToHeight(24 / group.scaleY);
          lightObj.scaleToWidth(24);
        }
      }
      group.setCoords();
      this.canvas.renderAll();
    });

从上面的代码可以看出，我有两个部分的 IF 条件。首先是统一缩放，它可以完美地保持我的光 obj 大小与添加时相同。 ELSE 部分用于调整大小，在里面我有水平和垂直调整大小的条件。

我面临的问题是当我水平或垂直调整组大小时，灯光图标也会调整大小。我试图保持灯光图标大小固定。知道如何实现这一目标吗？或者我在这里做错了什么？

【问题讨论】：

标签： javascript canvas fabricjs fabricjs2

【解决方案1】：

你可以通过这样的代码缩放函数来解决这个问题：

    const group = e.target;
    const lightObj = group._objects.find(x => x.type === 'light');
    if (lightObj) {
      const scaleX = (lightObj.get('width') * 2) / group?.getScaledWidth();
      const scaleY = (lightObj.get('height') * 2) / group?.getScaledHeight();
      lightObj.set({ scaleX: scaleX, scaleY: scaleY });
    }

我也遇到过同样的情况，它既适用于统一缩放，也适用于水平或垂直缩放

【讨论】：