Fabric.js 多边形 lockMovementX 属性

在 Fabric.js 中，lockMovementX 属性用于锁定多边形在水平方向上的移动和拖拽。当该属性设置为 true 时，多边形将不会响应水平方向上的鼠标事件，即无法水平拖拽和移动。该属性默认值为 false。

语法

object.lockMovementX = boolean;

参数

• boolean：一个布尔值，表示是否锁定水平方向上的移动和拖拽。

示例

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

var polygon = new fabric.Polygon([
  { x: 100, y: 50 },
  { x: 200, y: 50 },
  { x: 250, y: 100 },
  { x: 150, y: 150 },
  { x: 50, y: 100 }
], {
  fill: 'yellow',
  strokeWidth: 3,
  stroke: 'black'
});

polygon.lockMovementX = true;

canvas.add(polygon);

上述示例创建了一个五边形并设置其 lockMovementX 属性为 true，即锁定了其水平方向上的移动和拖拽。该五边形仅可以在垂直方向上移动和拖拽。

注意事项

• lockMovementX 属性仅能锁定多边形在水平方向上的移动和拖拽，无法锁定在垂直方向上的移动和拖拽。
• 若要同时锁定水平和垂直方向上的移动和拖拽，请使用 lockMovement 属性。
• lockMovementX 属性默认值为 false，即默认可在水平方向上移动和拖拽。