Fabric.js定义图像的范围/限制

João Dias 发表于 Dev

若昂·迪亚斯（JoãoDias）

在此处输入图片说明我已经建立了一个基于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;
    });

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。