使用 Fabric.js 在对象旋转后重绘边界框边框

Question

我正在使用 Fabric.js（版本 1.7.19）在画布上绘图。我有一个“旋转”按钮，可以将活动对象旋转 90 度。旋转工作正常，但对象边界框边框不会改变以反映旋转的对象，除了看起来很奇怪之外，这意味着我无法正确选择对象。

这是我的旋转对象函数。

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

Answer 1

我想通了。我在画布上添加了一个新的 fabric.Group，然后在我真正需要做的是旋转整个组时旋转组内的第一个项目（因此是 .item(0)）。删除 .item(0) 解决了我的问题。

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