如何在fabric.js中围绕指定点旋转？

Question

有人知道如何在fabric.js中围绕指定点旋转吗？例如，

var line1 = new fabric.Line([70, 20, 70, 100], {
    stroke: "#000000",
    strokeWidth: 6
});

我希望将其基于终点(70, 100)而非中心进行旋转。

- html5Starter

Answer 1

您可以使用fabric.util.rotatePoint实现关于任意点的旋转。这将使您能够以度数角（由angle定义）将线段（由x1，y1，x2和y2定义）绕原点（由origin_x和origin_y定义）旋转。注意，即使在使用fabric.js时，angle通常使用度数指定，但fabric.util.rotatePoint需要以弧度表示旋转。

var rotation_origin = new fabric.Point(origin_x, origin_y);
var angle_radians = fabric.util.degreesToRadians(angle);
var start = fabric.util.rotatePoint(new fabric.Point(x1,y1), rotation_origin, angle_radians);
var end = fabric.util.rotatePoint(new fabric.Point(x2,y2), rotation_origin, angle_radians);
var line1 = new fabric.Line([start.x, start.y, end.x, end.y], {
    stroke: '#000000',
    strokeWidth: 6
});

你可以对其他对象进行相同的操作，但可能需要提供 angle 属性以适当地旋转该对象。

- chetbox

---

非常感谢您！即使已经过去7年，这个解决方案仍然有效！我本来要做一堆三角函数计算。 - mlienau

Answer 2

目前还没有办法围绕任意点旋转。变换的原点——用于缩放和旋转——目前位于对象中心。我们计划在不久的将来添加对变换任意原点的支持。

- kangax