我需要防止拖动和缩放可旋转的对象

Question

我有一个画布，其中的图像放置在显示图像的矩形槽中。在矩形外部显示背景而不是图像（因此将图像裁剪）。我正在尝试防止图像 not 覆盖裁剪矩形，图像应始终较大并完全覆盖矩形。我可以在笔直的图像/矩形上工作，但是当涉及旋转时却无法正常工作。

我已使用此问题中的代码来使其在纯图像上运行： Prevent Fabric js Objects from scaling out of the canvas boundary

canvas.on('object:moving', (event: any) => {
        // this eventlistener makes sure that a moving image won't leave it's placeholder area uncovered
        //
        const activeObject = event.target;

        // the cropping Rect
        const containerRect = retrieveObjectFromCanvas(this.state.canvas, `${this.selectedImage.value.id}-container`);

        // apply new coords of current move action
        activeObject.setCoords();
        const newCoords = activeObject.getCoords();
        const containerCoords = containerRect.getCoords();

        // left
        if (newCoords[0].x >= containerCoords[0].x) {
          activeObject.left = (containerRect.left - (containerRect.width / 2) + ((activeObject.width * activeObject.scaleX) / 2));
        }

        // top
        if (newCoords[0].y >= containerCoords[0].y) {
          activeObject.top = (containerRect.top - (containerRect.height / 2) + ((activeObject.height * activeObject.scaleY) / 2));
        }

        // right
        if (newCoords[2].x <= containerCoords[2].x) {
          activeObject.left = (containerRect.left + (containerRect.width / 2) - ((activeObject.width * activeObject.scaleX) / 2));
        }

        // bottom
        if (newCoords[2].y <= containerCoords[2].y) {
          activeObject.top = (containerRect.top + (containerRect.height / 2) - ((activeObject.height * activeObject.scaleY) / 2));
        }

        activeObject.setCoords();

      });

      canvas.on('object:scaling', (event:any) => {
        // this eventlistener makes sure that a scaling image won't leave it's placeholder area uncovered
        //
        const activeObject = event.target;
        activeObject.set({ lockScalingFlip: true });
        const boundingRect = activeObject.getBoundingRect();

        // the cropping Rect
        const containerRect = retrieveObjectFromCanvas(this.state.canvas, `${this.selectedImage.value.id}-container`);

        // apply new coords of current move action
        activeObject.setCoords();
        const newCoords = activeObject.getCoords();
        const containerCoords = containerRect.getCoords();

        // left
        let corners = ['tl', 'ml', 'bl'];
        if ((includes(corners, event.transform.corner)) && newCoords[0].x >= containerCoords[0].x) {
          const newScale = (boundingRect.width) / activeObject.width;
          activeObject.scaleX = newScale;
          activeObject.left = (containerRect.left - (containerRect.width / 2) + ((activeObject.width * activeObject.scaleX) / 2));
        }

        // top
        corners = ['tl', 'mt', 'tr'];
        if (includes(corners, event.transform.corner) && newCoords[0].y >= containerCoords[0].y) {
          const newScale = (boundingRect.height) / activeObject.height;
          activeObject.scaleY = newScale;
          activeObject.top = (containerRect.top - (containerRect.height / 2) + ((activeObject.height * activeObject.scaleY) / 2));
        }

        // right
        corners = ['tr', 'mr', 'br'];
        if (includes(corners, event.transform.corner) && newCoords[2].x <= containerCoords[2].x) {
          const newScale = (boundingRect.width) / activeObject.width;
          activeObject.scaleX = newScale;
          activeObject.left = (containerRect.left + (containerRect.width / 2) - ((activeObject.width * activeObject.scaleX) / 2));
        }

        // bottom
        corners = ['bl', 'mb', 'br'];
        if (includes(corners, event.transform.corner) && newCoords[2].y <= containerCoords[2].y) {
          const newScale = (boundingRect.height) / activeObject.height;
          activeObject.scaleY = newScale;
          activeObject.top = (containerRect.top + (containerRect.height / 2) - ((activeObject.height * activeObject.scaleY) / 2));
        }
        activeObject.setCoords();
      });
    }

没有错误消息，但是图像不会在矩形的边界处停止，但是缩放和移动是无法预测的。我不确定是否相关，但是坐标是从对象的中心/矩形到画布的左上角来计算的。

编辑：一个澄清。可以使用.isContainedWithinObject（）检查图片中是否包含rect。困难的部分是计算图像的值，使其位于边界之外。在上面的代码中，我计算了顶部，左侧和比例，但是这些计算仅适用于没有偏斜或旋转的图像。