Fabric.js ActiveSelection lockMovementY 属性

在基于 HTML5 Canvas 的 Fabric.js 库中，ActiveSelection （活动选区）对象是一种常见的对象类型，它表示当前选中的多个对象。ActiveSelection 对象有一个称作 lockMovementY 的属性，该属性决定了选区在垂直方向上是否可以移动。

属性说明

lockMovementY 是一个布尔类型的属性，表示选区在垂直方向上是否可以移动。当它被设置为 true 时，选区将不能在垂直方向上移动；当它被设置为 false 时，选区在垂直方向上可以自由移动。

使用示例

我们可以通过下面的代码来创建一个 ActiveSelection 对象，并将 lockMovementY 属性设置为 true：

var canvas = new fabric.Canvas('canvas');
var rect1 = new fabric.Rect({
  left: 50,
  top: 50,
  width: 100,
  height: 100,
  fill: 'red'
});
var rect2 = new fabric.Rect({
  left: 150,
  top: 150,
  width: 100,
  height: 100,
  fill: 'green'
});
var activeSelection = new fabric.ActiveSelection([rect1, rect2], {
  lockMovementY: true // 设置 lockMovementY 属性为 true
});

canvas.add(activeSelection);

在上面的代码中，我们创建了两个矩形，并将它们封装在了一个 ActiveSelection 对象中。我们将 lockMovementY 属性设置为 true，因此选区在垂直方向上将不能移动。

总结

lockMovementY 属性可以通过设置来决定选区在垂直方向上是否可以移动，它对于在一些需要限制选区移动范围的场景中非常有用。在使用 ActiveSelection 对象时，我们可以根据具体的需求来设置该属性，从而达到更加灵活的效果。