cómo rotar alrededor de un punto especificado en fabric.js?

Question

¿Alguien podría saber cómo rotar alrededor de un punto específico en fabric.js? Por ejemplo,

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

me gustaría girar sobre la base de su punto (70, 100), pero no su centro final.

Answer 1

No hay forma de girar alrededor de un punto arbitrario en este momento. El origen de la transformación, para escalar & rotación, se encuentra actualmente en el centro de un objeto. Estamos planeando agregar soporte para orígenes arbitrarios de transformación en el futuro cercano.

Answer 2

Puede lograr una rotación sobre un punto arbitrario usando fabric.util.rotatePoint. Esto le permitirá rotar una línea (definida por x1, y1, x2 y y2) sobre un origen (definido por origin_x y origin_y) por un ángulo en grados (definido por angle).

Tenga en cuenta que fabric.util.rotatePoint realiza una rotación en radianes, aunque angle s suelen especificarse en grados al utilizar 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 
}); 

Usted puede hacer lo mismo con otros objetos, pero puede que tenga que proporcionar la propiedad angle para rotar el objeto adecuadamente.