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

我已经建立了一个基于fabric.js的T恤模拟器.一切都按预期工作,除了客户想要解决的一个细节,即不允许上传的图像通过T恤画布(我们可以将其视为背景图像).

我在png和svg中也有这个背景图片,但我怎么能完成？

编辑：

基于图像,我希望T恤中心的图像不能被拖到红线外…这将是理想的场景.如果这很难以一种简单的方式做,如果我能将图像绑定到蓝线,我会很高兴.

在最后一种情况下,我知道我可以将图像剪切成矩形形状,但是,有什么方法可以让图像在到达线条时停止,而不是仅仅在它下面？

谢谢

解决方法:

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

标签：javascript,svg,fabricjs
来源： https://codeday.me/bug/20191004/1854546.html