Fabric.js | 三角形 centeredRotation 属性

在使用 Fabric.js 创建三角形时，常常需要考虑使三角形以其几何中心为旋转中心。Fabric.js 提供了 centeredRotation 属性来辅助实现此功能。

centeredRotation 属性介绍

centeredRotation 是 Fabric.js 中的三角形对象所拥有的一个属性，在对象创建时可以指定。它表示是否以三角形的几何中心为旋转中心。如果 centeredRotation 属性为 true，则三角形将以其几何中心为旋转中心；否则，将以三角形的左上角为旋转中心。

使用 centeredRotation 属性

可以使用以下代码创建一个 centeredRotation 属性为 true 的三角形对象：

var triangle = new fabric.Triangle({
  width: 100,
  height: 100,
  fill: '#f55',
  left: 100,
  top: 100,
  centeredRotation: true
});

上述代码创建了一个宽高均为 100 的三角形对象，并使其以 (100,100) 为左上角的坐标出现在画布上。同时，centeredRotation 属性被设置为 true，使得该三角形以其几何中心为旋转中心。

如果需要取消 centeredRotation 属性的效果，可以通过以下代码将其设置为 false：

triangle.centeredRotation = false;
triangle.setCoords();

上述代码将 centeredRotation 属性设置为 false，并通过 setCoords 方法更新了三角形的坐标。这样设置后，三角形将以其左上角为旋转中心。

结语

centeredRotation 是 Fabric.js 中三角形对象的重要属性之一。熟练掌握该属性的使用方式，有助于创建更为符合需求的三角形。