How to rotate around one specified point in fabric.js?

Question

Can anyone know how to rotate around one specified point in fabric.js? For example,

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

I would like to rotate it based on its endpoint (70, 100), but not its center.

Answer 1

You can achieve rotation around an arbitrary point using fabric.util.rotatePoint . This will allow you to rotate the line (defined by x1 , y1 , x2 and y2 ) about the origin (determined by origin_x and origin_y ) by an angle in degrees (determined by angle ).

Note that fabric.util.rotatePoint accepts rotation in radians, although angle usually specified in degrees when using 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 }); 

You can do the same with other objects, but you may need to provide the angle property to rotate the object correctly.

Answer 2

There is currently no way to rotate around an arbitrary point. The origin of the transformation - for scaling and rotation - is currently located in the center of the object. In the near future, we plan to add support for an arbitrary origin of transformation.