Fabric.js 组 lockSkewingY 属性

在 Fabric.js 中，有一个非常有用的属性叫做 lockSkewingY。这个属性控制着组内元素在垂直方向的倾斜是否受到影响，也就是是否锁定 Y 轴方向的倾斜。

用法

在创建组的时候，我们可以指定这个属性是否需要锁定 Y 轴方向的倾斜。例如：

var group = new fabric.Group([rect1, rect2, rect3], {
  lockSkewingY: true
});

这个例子中，我们创建了一个包含三个矩形的组，并且指定了 lockSkewingY 属性为 true，即锁定了 Y 轴方向的倾斜。

效果

当我们对这个组进行缩放和旋转的时候，会发现组内的元素只能在 X 轴方向倾斜，不能在 Y 轴方向倾斜。例如：

这个例子中，我们旋转了这个组，并且观察到组内的元素只能在 X 轴方向倾斜，而不能在 Y 轴方向倾斜。

注意事项

值得注意的是，lockSkewingY 属性只对组内的元素起作用，而不包括组本身。也就是说，如果我们对组本身进行缩放和旋转，这个属性是不起作用的。

此外，lockSkewingY 属性只控制了 Y 轴方向的倾斜，对 X 轴方向的倾斜没有影响。如果需要同时控制 X 轴和 Y 轴方向的倾斜，可以使用 lockSkewing 属性。

总结

lockSkewingY 属性在创建和控制组内元素的时候非常有用，能够帮助我们减少不必要的倾斜，提高设计的效率和质量。但是要注意该属性只对组内的元素控制，不能控制组本身的倾斜，并且只针对 Y 轴方向的倾斜。