FabricJS组缩放时如何保持组内light图标尺寸固定为24

问题原因 #

1. FabricJS的scaleToWidth()、scaleToHeight()方法默认会保持对象自身宽高比，调用任意一个都会同步修改另一轴的缩放值，非等比场景下会覆盖你对另一轴的缩放设置。
2. 非等比分支逻辑错误：组内子对象的最终显示尺寸 = 子对象原始尺寸 × 子对象自身缩放 × 组的缩放，你仅抵消了其中一个轴的组缩放，另一轴的组缩放仍会生效，导致最终尺寸偏移。
3. 不需要额外判断等比/非等比缩放场景，通用逻辑可覆盖所有情况。

修复代码 #

// 组合对象前先存储light图标的初始缩放系数，避免后续计算出错
const initLightSx = lightObj.scaleX;
const initLightSy = lightObj.scaleY;

this.canvas.on('object:scaling', (e) => {
  if (!e) return;
  const group = e.target;
  const lightObj = group._objects.find(x => x.type === 'light');
  if (!lightObj) return;

  // 核心逻辑：直接抵消组的缩放，不管组是否等比缩放都生效
  lightObj.scaleX = initLightSx / group.scaleX;
  lightObj.scaleY = initLightSy / group.scaleY;

  // 可选：如果需要保持light图标始终在组内居中，添加以下两行
  lightObj.left = group.width / 2 - (24 / group.scaleX) / 2;
  lightObj.top = group.height / 2 - (24 / group.scaleY) / 2;

  lightObj.setCoords();
  group.setCoords();
  this.canvas.renderAll();
});

补充说明 #

如果不需要保持light图标在组内的位置固定，仅需要尺寸固定，可以删除可选的位置调整代码。如果light图标初始有固定的位置偏移，可基于上面的位置计算公式自行调整偏移量即可。

内容的提问来源于stack exchange，提问作者Kartik Solanki