如何围绕fabric.js中的一个指定点旋转？

Question

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

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

我想根据它的终点（70,100）旋转它，但不是它的中心。

Answer 1

您可以使用fabric.util.rotatePoint实现围绕任意点的旋转。这样，您就可以轮换一条关于原点的行（由x1，y1，x2和y2定义）（由origin_x和{{1}定义}）以度为单位的角度（由origin_y定义）。

请注意angle以弧度为单位进行旋转，即使使用fabric.js时通常以度数指定fabric.util.rotatePoint。

angle

您可以对其他对象执行相同操作，但您可能需要提供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 }); 属性才能正确旋转对象。

Answer 2

目前无法绕任意点旋转。转型的起源 - 用于扩展和扩展旋转 - 当前位于对象的中心。我们计划在不久的将来增加对任意转型起源的支持。