Трюк с CSS-маской для создания футболки с функцией перетаскивания и изменения размера

#reactjs #css-mask

Вопрос:

Я пытаюсь создать компоненты react для динамического проектирования продукта, в котором пользователь может выбрать продукт, такой как футболка, кружка, куртка и т.д., И выбрать изображение для печати на основе этого продукта. Сначала я пытаюсь создать маску изображения на основе продукта. Я использовал компоненты перетаскивания react и изменения размера для выбранного изображения. Вот коды: https://stackblitz.com/edit/react-draggable-and-resizable-pictures-3uufjl?file=index.js Я пытаюсь скрыть выбранное изображение, если оно выходит за пределы футболки, когда пользователь перетаскивает или изменяет размер изображения. Я исследовал маску css, в которой фоновое изображение и изображение маски применяются к одним и тем же элементам, но у меня есть фоновое изображение (т. Е. футболка ) и изображение маски (т. Е. изображение монализы), которое находится в разных html-элементах. Я немного сбит с толку, как я могу получить изображение css-маски футболки с изображением выбора.