FabricJs：在組調整時保持對象大小固定

Question

我正在使用 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 部分用於調整大小，在里面我有水平和垂直調整大小的條件。

我面臨的問題是當我水平或垂直調整組大小時，燈光圖標也會調整大小。 我試圖保持燈圖標大小固定。 知道我怎么能做到這一點嗎？ 或者我在這里做錯了什么？

Answer 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 });
    }

我遇到了同樣的情況，它適用於統一縮放和水平或垂直縮放