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.

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.

• javascript
• canvas
• fabricjs

2 Answers 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.

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.