Fabric.js define borders / limits for images
I have created a soccer jersey simulator based on fabric.js. Everything works as expected except for one detail that the client would like to solve as it prevents the uploaded image from going past the t-shirt canvas (we could see it as a background image).
I have a background image in png and svg, but how can I do that?
EDIT:
Based on the image, I wish the image in the center of the t-shirt could not be pulled past the red line ... that would be the ideal scenario. If it is difficult to do it in a simple way, I would be happy if I could snap the image to the blue line.
In this latter case, I know I can pin the image into a rectangle shape, but is there a way I can make the image stop when it hits the line, instead of just walking up to it?
thank
source to share
According to kangax 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;
});
source to share