Fabric.js 定义图像的边界/限制

I've set up a fabric.js based t-shirt simulator. Everything works as expected except for one detail that the client would like to get solved, being that disallowing an uploaded image to get past the t-shirt canvas (we could see it as the background image).

我也有 png 和 svg 格式的背景图像，但我该如何实现呢？

EDIT:

根据图像，我希望 T 恤中心的图像不能被拖到红线之外......这将是理想的情况。如果这很难以简单的方式完成，那么如果我可以将图像绑定到蓝线，我会很高兴。

在最后一种情况下，我知道我可以将图像剪辑为矩形，但是，有什么方法可以使图像在到达线条时停止，而不是仅仅在其下方吗？

Thanks

根据康加克斯的建议：

canvas.on ("object:moving", function (event) {
        var el = event.target;

        // suppose el coords is center based

        el.left = el.left < el.getBoundingRectWidth() / 2 ? el.getBoundingRectWidth() / 2 : el.left;
        el.top = el.top < el.getBoundingRectHeight () / 2 ? el.getBoundingRectHeight() / 2 : el.top;

        var right = el.left + el.getBoundingRectWidth() / 2;
        var bottom = el.top + el.getBoundingRectHeight() / 2;

        el.left = right > canvas.width - el.getBoundingRectWidth() / 2 ? canvas.width - el.getBoundingRectWidth() / 2 : el.left;
        el.top = bottom > canvas.height - el.getBoundingRectHeight() / 2 ? canvas.height - el.getBoundingRectHeight() / 2 : el.top;
    });