Fabric.js 的 lockMovementY 属性

介绍

lockMovementY 是 Fabric.js 中的一个对象属性，用于控制对象在 Y 轴方向上是否可以移动。

用法

在创建对象时，可以通过传入一个包含 lockMovementY 属性的对象来设置该属性。

var rect = new fabric.Rect({
  left: 100,
  top: 100,
  width: 50,
  height: 50,
  fill: 'red',
  lockMovementY: true
});

canvas.add(rect);

此时，该对象将无法在 Y 轴方向上移动，但仍可在 X 轴方向上移动。

注意事项

• lockMovementY 属性仅针对单个对象有效，若要控制多个对象的移动，需要分别对每个对象设置该属性。
• 在设置 lockMovementY 属性时，应该确保对象不会在被锁定的方向上移动。

示例

以下示例演示了如何使用 lockMovementY 属性锁定对象在 Y 轴方向上的移动。

var canvas = new fabric.Canvas('canvas');

var rect1 = new fabric.Rect({
  left: 50,
  top: 50,
  width: 50,
  height: 50,
  fill: 'red',
  lockMovementY: true
});

var rect2 = new fabric.Rect({
  left: 200,
  top: 50,
  width: 50,
  height: 50,
  fill: 'blue'
});

canvas.add(rect1);
canvas.add(rect2);

在这个示例中，rect1 被锁定在了 Y 轴方向上，不可移动，而 rect2 可以在任意方向上移动。可以尝试拖动这两个对象，感受 lockMovementY 属性的影响。