I have a fabricjs canvas with some objects.
I have a zoom function that scales the objects and canvas in and out/up and down (fabricjs scales the objects, and I manually scale the canvas)
when objects are at scale 1 they rotate just fine, but when they zoomed/scaled, it doesnt work that well
in this case, when I rotate, the objects fall a little off the canvas so they look cropped, and I cannot figure out why
here is my code for rotation
rotate(degrees: number): void {
const canvas = this.canvases[this.currentPage - 1]
let canvasCenter = new fabric.Point(canvas.getWidth() / 2, canvas.getHeight() / 2) // get center of canvas
let radians = fabric.util.degreesToRadians(degrees) // tranform degrees to radians
// adjustment needed for objects needed to stay on canvas after canvas has been rotated
const adjustmentValue = (canvas.getHeight() - canvas.getWidth()) / 2;
canvas.getObjects().forEach((obj: fabric.Object, index) => {
let objectOrigin = new fabric.Point(obj.left!, obj.top!);
let new_loc = fabric.util.rotatePoint(objectOrigin, canvasCenter, radians);
obj.top = new_loc.y - adjustmentValue;
obj.left = new_loc.x + adjustmentValue;
obj.angle! += degrees; //rotate each object by the same angle
obj.setCoords();
});
// rotate canvas by switching width with height and vise versa
const previousHeight = canvas.getHeight();
const previousWidth = canvas.getWidth();
canvas.setWidth(previousHeight);
canvas.setHeight(previousWidth);
canvas.renderAll()
}
can someone see the error?