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",
    strokeWidth: 6
});

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

Answer 1

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.