как вращаться вокруг одной указанной точки в 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 s обычно указывается в градусах при использовании fabric.js.

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

В данный момент нет возможности вращаться вокруг произвольной точки.Источник преобразования - для масштабирования и вращения - в настоящее время находится в центре объекта.Мы планируем добавить поддержку произвольных источников трансформации в ближайшем будущем.