Fabric.js | lockRotation 属性

在使用 Fabric.js 库时，常常需要对图形对象进行旋转操作，但如果需要严格限制对象的旋转角度，则可以使用属性 lockRotation。该属性可以控制对象在旋转时是否允许绕中心点旋转或者绕另一点旋转。

语法

obj.set('lockRotation', true); // lock rotation
obj.set('lockRotation', false); // unlock rotation

使用示例

以下示例为在 Canvas 中添加三个三角形，并分别设置不同的 lockRotation 属性：

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

var triangle1 = new fabric.Triangle({
  left: 50,
  top: 50,
  width: 100,
  height: 100,
  fill: 'red'
});

var triangle2 = new fabric.Triangle({
  left: 150,
  top: 50,
  width: 100,
  height: 100,
  fill: 'green',
  lockRotation: true // 不允许旋转
});

var triangle3 = new fabric.Triangle({
  left: 250,
  top: 50,
  width: 100,
  height: 100,
  fill: 'blue',
  lockRotation: false // 允许旋转
});

canvas.add(triangle1, triangle2, triangle3);

效果展示

如上图所示，triangle2 不允许旋转，所以在旋转时无法围绕其中心点旋转；而 triangle1 和 triangle3 则可以自由旋转。