如何围绕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和origin_y度)的角度(按规定angle).

请注意,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

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

\n