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

Question

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

var line1 = new fabric.Line([70, 20, 70, 100], {
    stroke: \"#000000         


        

Answer 1

There's no way to rotate around arbitrary point at the moment. The origin of transformation — for scaling & rotation — is currently at center of an object. We're planning to add support for arbitrary origins of transformation in the near future.

Answer 2

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

Note that fabric.util.rotatePoint takes a rotation in radians, even though angles are 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 appropriately.