мы можем изменить форму холста, используя ткань js

введите здесь описание изображения

Я хочу добавить объекты внутрь рубашки, по умолчанию холст имеет квадратную форму, как мне сделать такой тип холста? Я пробовал использовать css, он меняет только форму, но функциональность холста остается такой же, как у квадрата.


canvas fabricjs
person John    schedule 26.03.2021    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Проверьте это: https://ourcodeworld.com/articles/read/1016/how-to-create-your-own-t-shirt-designer-using-fabricjs-in-javascript

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

Кадрированный холст Pixel Perfect Shape

  1. Мы можем обрезать наш холст, чтобы придать ему желаемую форму. Это скроет остальную часть холста.
    Ссылка: Fabric.js Обрезать холст (или группу объектов) по многоугольнику
  2. Теперь вы столкнетесь с еще одной проблемой: ваши элементы управления также обрезаны, что делает пользовательский опыт жалким.
  3. Решение использовать canvas.controlsAboveOverlay = true;

Создание пользовательских изображений svg

Есть 2 пути к этому

  1. Google и скачать svg изображения, которые вам нужны.
  2. Используйте Figma, с помощью которого вы можете создавать собственные объекты с помощью инструмента "Перо" и экспортировать их в формате svg.

СОВЕТ. Используйте подключаемый модуль figma Image tracer для извлечения svg из изображений.

person Gitesh Sharma    schedule 26.03.2021
comment
jsfiddle.net/ZxYCP/198 привет, вы можете помочь мне запустить этот код на angular js - person John; 27.03.2021