0

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?

0 Answers0