FabricJs:保持对象大小固定在组调整

Question

我使用FabricJS创建一个有两个对象的组-光图标(svg)和阴影(三角形)。灯光图标SVG我导入为SVG，然后设置缩放，如:

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

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

接下来，我试图调整组的大小，以调整阴影对象的大小。当我调整组的大小时，我想让light图标对象的大小保持为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条件。首先是均匀缩放，它可以完美地保持我的光对象大小与添加时相同。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 });
}

我遇到过同样的情况，它将在均匀缩放和水平或垂直缩放