Fabric.js Polygon centeredRotation 属性介绍

简介

Fabric.js 是一个基于 HTML5 canvas 的 JavaScript 库，用于创建交互式的图形和图形应用程序。Polygon 是 Fabric.js 中的一种类型，表示一个具有多边形形状的对象。Polygon 的 centeredRotation 属性是用来控制旋转中心的属性。

属性详解

centeredRotation

• 类型：Boolean
• 默认值：false

centeredRotation 属性用来控制 Polygon 旋转时的中心点。如果设置为 true，Polygon 将以其中心点为中心旋转。否则，将以其左上角为中心旋转。

注意：如果设置 centeredRotation 属性为 true，Polygon 对象将自动重置 originX 和 originY 属性，以便就地旋转。

使用示例

代码片段

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

var points = [
  { x: 10, y: 10 },
  { x: 50, y: 10 },
  { x: 50, y: 50 },
  { x: 10, y: 50 }
];
var polygon = new fabric.Polygon(points, {
  fill: 'red',
  centeredRotation: true
});

canvas.add(polygon);

// 以中心点为旋转中心旋转 polygon 对象
polygon.rotate(45);

效果预览

总结

centeredRotation 属性是用来控制 Polygon 对象的旋转中心的。在创建 Polygon 对象时，通过设置该属性的值，可以实现在旋转时以中心点为旋转中心的效果。