Fabric.js | Rect centeredRotation 属性

在使用 Fabric.js 库中的 Rect 对象时，有一个很有用的属性叫做 centeredRotation。本文将介绍这个属性以及如何使用它。

什么是 centeredRotation 属性？

centeredRotation 是 Rect 对象的一个布尔类型属性，默认值为 false。当这个属性为 true 时，旋转 Rect 对象时会以对象的中心点为旋转中心。否则，旋转的中心会是对象的左上角。

如何使用 centeredRotation 属性？

要使用 centeredRotation 属性，只需要在创建 Rect 对象时将属性值设置为 true 即可。例如：

var rect = new fabric.Rect({
  left: 100,
  top: 100,
  width: 50,
  height: 50,
  fill: 'red',
  centeredRotation: true // 将 centeredRotation 属性设置为 true
});

canvas.add(rect); // 将 Rect 对象添加到 Canvas 中

这样，当我们使用 setAngle() 方法将这个对象旋转时，旋转的中心点就会是对象的中心，而不是左上角。

rect.setAngle(45); // 以对象中心旋转 45 度
canvas.renderAll(); // 重新渲染 Canvas

注意事项

使用 centeredRotation 属性时，我们需要特别注意对象的 originX 和 originY 属性。这些属性默认值为 'left' 和 'top'，而当我们设置 centeredRotation 属性为 true 时，需要将其中一个设置为 'center'，以便正确显示对象的旋转中心。例如：

var rect = new fabric.Rect({
  left: 100,
  top: 100,
  width: 50,
  height: 50,
  fill: 'red',
  centeredRotation: true,
  originX: 'center' // 将 originX 设置为 'center'
});

canvas.add(rect); // 将 Rect 对象添加到 Canvas 中

这样，Rect 对象旋转时的中心就会正确地在对象的中心点处。

结论

centeredRotation 是 Fabric.js 中 Rect 对象的一个非常有用的属性，它能够让我们更方便地控制对象的旋转中心点。需要注意的是，使用该属性时需要特别注意对象的 originX 和 originY 属性。