Fabric.js 折线中心旋转属性

Fabric.js 是一款强大的 HTML5 布局和画布库，它允许您在 web 上创建交互式对象。其中包括图像、矢量图、文本等等。Fabric.js 中的折线是一个基本形状，它允许您创建一个由若干个点组成的折线。

在 Fabric.js 中，您可以使用 set() 方法来设置折线的中心点位置。而折线的旋转则可以使用 Fabric.js 中的 angle 属性来实现。但是，当您旋转折线时，它的旋转中心点可能会出现偏移。为了解决这个问题，Fabric.js 提供了 originX 和 originY 属性，允许您设置旋转中心点的位置。

代码演示

以下是一个简单的 Fabric.js 折线中心旋转示例：

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

const points = [
  { x: 100, y: 100 },
  { x: 200, y: 100 },
  { x: 200, y: 200 },
  { x: 100, y: 200 }
];

const polyline = new fabric.Polyline(points, {
  fill: '',
  stroke: 'black',
  strokeWidth: 2,
  left: 200,
  top: 200,
  selectable: true,
  centeredRotation: true,
  originX: 'center',
  originY: 'center'
});

canvas.add(polyline);

// 点击旋转按钮时旋转折线
document.getElementById('rotate-button').addEventListener('click', function() {
  polyline.angle += 30;
  canvas.renderAll();
});

在上面的代码中，我们创建了一个四边形折线，并设置了其中心点的位置和旋转中心点的位置。当单击按钮时，折线将以其中心点为中心旋转 30 度。

分析

在 Fabric.js 中，基本形状都有一个 centeredRotation 属性，允许您将旋转中心点设置为形状的中心。当您想要将旋转中心点设置为原点或其他位置时，您可以使用 originX 和 originY 属性。

originX 和 originY 属性有四个有效值：left、center、right 和 number。当您将属性设置为 number 时，旋转中心点将被设置为折线上的某个点。例如，originX: 100 表示旋转中心点是折线上 x 坐标为 100 的位置。

实际上，originX 和 originY 属性是在 setCoords() 方法中使用的，以更新折线的边界框和中心点位置。在旋转折线时，Fabric.js 使用 centeredRotation 和中心点更新的边界框来计算旋转中心点的位置。如果没有设置 centeredRotation 或中心点，则会使用边界框的中心点作为旋转中心点。