fabricjs中元素旋转后裁剪区域跳跃

Question

我正在尝试制作像 canva 这样的裁剪功能。 在裁剪模式下，我有一个新的矩形作为裁剪区域，用户可以根据需要进行修改。 一旦在外部单击，它将获取 rect 属性并将其应用于原始图像。 它工作正常，直到您rotate图像然后尝试这个.. 它会意外地跳起来。

这里是crop函数的代码

function cropImage() {

  const myFrameElement = getElementById('myFrame');
  var myFrameElementBoundingRect = myFrameElement.getBoundingRect();
  if (selectedObject && selectedObject.type === 'image' && myFrameElement) {

    var selectedObjectBoundingRect = selectedObject.getBoundingRect();

    if ((selectedObject.width * selectedObject.scaleX < myFrameElement.width * myFrameElement.scaleX) || (selectedObject.height * selectedObject.scaleY < myFrameElement.height * myFrameElement.scaleY)) {
      //alert(selectedObject.scaleX + " " + selectedObject.oldScaleX);
    } else {
      //crop
      selectedObject.oldLeft = selectedObject.left;
      selectedObject.oldTop = selectedObject.top;
      selectedObject.oldScaleX = selectedObject.scaleX;
      selectedObject.oldScaleY = selectedObject.scaleY;
      selectedObject.oldWidth = selectedObject.width;
      selectedObject.oldHeight = selectedObject.height;

      selectedObject.cropX = (myFrameElement.left - selectedObject.left) / selectedObject.scaleX;
      selectedObject.cropY = (myFrameElement.top - selectedObject.top) / selectedObject.scaleY;

      selectedObject.width = myFrameElement.width / selectedObject.scaleX;
      selectedObject.height = myFrameElement.height / selectedObject.scaleY;

      selectedObject.left = myFrameElement.left;
      selectedObject.top = myFrameElement.top;
    }
    selectedObject.setCoords();
    canvas.remove(selectedObject.picArea);
    selectedObject.opacity = 1;
    selectedObject.hasRotatingPoint = true;
    selectedObject.picArea = null;
    canvas.discardActiveObject();
    isCrop = false;
  }

}

附上小提琴，请查收。 http://jsfiddle.net/mxsgn67r/2/

来自 Frederic Anand 答案的代码