Fabric.js define bounds/limits for images

Question

enter image description here 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).

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

EDIT:

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?

Thanks

Please add more detail to the question, e.g some sample code showing the problem. — Erik Dahlström, Sep 11 '13 at 16:42
Watch 'object:moving', 'object:scaling', etc. events and constrain objects' left/top properties accordingly. — kangax, Sep 11 '13 at 22:06

score 5 · Accepted Answer · edited Jul 18 '14 at 21:10

5

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

edited Jul 18 '14 at 21:10

fzzylogic

2,183
1
19
25

answered Sep 13 '13 at 06:05

Tom

4,612
4
32
43

Yep. I've followed his advice and managed to get something out of it. Thanks! – João Dias Sep 13 '13 at 09:47
This works well enough, except that the drag&drop operation is seemingly not aware of the coordinate reset, which causes a sort of magnet-effect where you have to move as many pixels in the opposite direction than you have across the bounds to make the object unstick from the boundaries. – miracle2k Sep 25 '13 at 22:09

Fabric.js define bounds/limits for images

1 Answers1

Linked