CODEWITHSUNDEEP
javascriptfabricjs
GuerillaRadio
GuerillaRadio

Reputation: 1297

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 border doesn't change to reflect the rotated object, which other than looking strange means that I can't select the object properly.

enter image description here

Here is my rotate object function.

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

Upvotes: 0

Views: 1471

Answers (1)

GuerillaRadio
GuerillaRadio

Reputation: 1297

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();
}

Upvotes: 0

Related Questions