Skip to content Skip to sidebar Skip to footer

Redrawing Bounding Box Border After Object Rotation With Fabric.js

I'm using Fabric.js (version 1.7.19) to draw on a canvas. I have a 'rotate' button which rotates the active object 90 degrees. The rotation works fine, but the objects bounding box

Solution 1:

I've figured it out. I was added a new fabric.Group to the canvas and then rotating the first item inside of the group (hence the .item(0)) when what I really needed to do was rotate the entire group. Removing .item(0) fixed my issue.

rotateItem = (e) => {
  e.preventDefault();
  const currentAngle = this.state.activeItem.get('angle');
  this.state.activeItem.setAngle(currentAngle + 90).setCoords();
  fabricCanvas.renderAll();
}

Post a Comment for "Redrawing Bounding Box Border After Object Rotation With Fabric.js"