Fabric.js определить границы/пределы для изображений

Question

Я создал симулятор футболки на основе ткани. Все работает так, как ожидалось, за исключением одной детали, которую клиент хотел бы решить, поскольку это запрещает загруженное изображение, чтобы пройти мимо холста футболки (мы могли видеть его как фоновое изображение).

У меня есть это фоновое изображение в png и svg, но как я мог выполнить?

EDIT:

На основе изображения, я хотел бы изображение в центре, чтобы не футболке быть в состоянии получить тащили за пределами красной линии ... это был бы идеальный вариант. Если это сложно сделать простым способом, я был бы счастлив, если бы смог привязать изображение к синей линии.

В этом последнем случае я знаю, что могу закрепить изображение в форме прямоугольника, но есть ли способ, которым я могу заставить изображение остановиться, когда оно попадает в линию, а не просто под ним?

Благодаря

Answer 1

По совету 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; 
    });