javascript - Fabric.js 为图像定义边界/限制

Question

我已经设置了一个基于 fabric.js 的 T 恤模拟器。除了客户希望解决的一个细节外，一切都按预期进行，即不允许上传的图像越过 T 恤 Canvas (我们可以将其视为背景图像)。

我也有 png 和 svg 格式的背景图片，但我该如何完成？

编辑:

根据图片，我希望 T 恤中间的图片不会被拖出红线...这才是理想的场景。如果这很难以简单的方式做到，如果我能将图像绑定(bind)到蓝线，我会很高兴。

在最后一种情况下，我知道我可以将图像剪裁成矩形形式，但是，有什么方法可以让图像在碰到线时停止，而不是仅仅在线下方？

谢谢

Answer 1

根据kangax的建议:

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