javascript - 如何围绕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）旋转角度（由 定义）。y2origin_xorigin_yangle

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

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属性以适当地旋转对象。

Answer 2

目前无法绕任意点旋转。变换的原点——用于缩放和旋转——当前位于对象的中心。我们计划在不久的将来增加对任意转换来源的支持。