dkrylov
@dkrylov

Как сделать наложение текстур на прозрачную картинку (png) или на dom — элемент?

Здравствуйте, уважаемые программисты....и дизайнеры...и верстальщики :D

Наткнулся на не тривиальную задачу. Есть каркас двери (структура может и дизайн двери может изменяться). Есть текстура для такой двери. Каким образом накладывать текстуру?!?

На скриншоте показано примерно как должно выглядеть до и после наложения текстуры.
39a975f5b2cd4ad2a0dbbc7721580e55.png

Работать с DOM деревом? Или Canvas? Если можно ответьте не просто да или нет, а более развернутее.
  • Вопрос задан
  • 702 просмотра
Решения вопроса 1
@choupa
Архитектор (обычный, который строит)
Мой вариант. Надо делать в SVG. Заготовить 4 файла:

1-2. Две текстуры размером на всё поле картинки: с горизонтальным направлением древесины и с вертикальным.

3-4. Из чертежа двери сделать две маски: одну для участков с горизонтальным направлением текстуры, другую — с вертикальным.

Ну и всё это совместить. Только имейте ввиду, что вы показали справа картинку отрендеренную, там присутствуют тени. Т.е. дело не только в наложении текстур, но и в освещении, и в рендере. Поэтому не ждите, что за счёт текстур вы получите такую вот картинку, как показали.

Для улучшения могу посоветовать поверх всего этого наложить сам чертёж, чтобы были дополнительно прорисованы рёбра, т.к. иначе они не будут видны (это будет просто граница двух текстур, никак больше не выделенная).
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@IsaevDev
а вам не кажется что в примере просто отдельно прозрачная картинка с чертежом и отдельно картинка с текстурированной дверью? больше похоже на рендер, честно говоря, чем на обычную текстуру
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы