我已经设置了一个基于fabric.js 的T 恤模拟器。一切都按预期进行,除了客户希望解决的一个细节,即不允许上传的图像穿过 T 恤 Canvas (我们可以将其视为背景图像)。
我也有 png 和 svg 格式的背景图像,但我该如何实现呢?
编辑:
根据图像,我希望 T 恤中心的图像不能被拖到红线之外......这将是理想的情况。如果这很难以简单的方式完成,那么如果我可以将图像绑定(bind)到蓝线,我会很高兴。
在最后一种情况下,我知道我可以将图像剪辑为矩形,但是,有什么方法可以让图像在到达线条时停止,而不是仅仅进入线条下方?
谢谢
最佳答案
根据 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 - Fabric.js 定义图像的边界/限制,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18744506/