Fabric.js定义图像的边界/限制 [英] Fabric.js define bounds/limits for images

问题描述

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

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中也有这个背景图片，但我怎么能完成？

I've this background image in png and svg as well but how could I accomplish?

编辑：

根据图像，我想将T恤中心的图像改为不能被拖到红线外...这将是理想的情况。如果这很难以一种简单的方式做，如果我能将图像绑定到蓝线，我会很高兴。

Based on the image, I'd like the image in the center of the tshirt to not be able to get dragged outside the red line... this would be the ideal scenario. If this is hard to do in a simple way, I'd be happy if I could bound the image to the blue line.

在最后一种情况下，我知道我可以将图像剪切成矩形的形式，但是，有什么方法可以让图像在点击时停止这条线，而不只是在它下面？

In this last case, I know I can clip the image to a form of a rectangle, but, is there any way that I can make the image stop when it hits the line, instead of just going under it?

谢谢

推荐答案

根据kangax的建议：

According to kangax's advice:

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

这篇关于Fabric.js定义图像的边界/限制的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！