Как сделать конструктор пиццы, т.е. выбираешь какие-то ингредиенты и они добавляются на основной картинке как бы слоями сверху?

Question

[Александр Тимофеев]

Как на этих сайтах:
500600.ru/vologda/constructor/pizza.html
amigo-pizza.ru/sozdaj-svoyu-pitstsu.html
dostavka.panda.su/designer

Answer 1

[Дима Паутов]

Рисуете на canvas или svg. Пример того, как динамически работает snapsvg.io/demos/.
Самый крайний вариант - это png картинки лежащие друг на друге!

Answer 2

[Никита Гущин]

Два варианта:
1) canvas и рисовать слои друг над другом (первый сайт)
2) Возится с div'ами. Просто накладывая картинки с прозрачностью (вторые два сайта).

Выглядят картинки так:

А вообще можете через dev-tools сами посмотреть как и что сделано

Comments

[Сергей]

На указанном сайте именно второй вариант и есть.

Answer 3

[Дмитрий Ковальский]

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

Answer 4

[Павел Волынцев]

У них используется много полупрозрачных изображений для отдельных ингредиентов.
Вот, например, изображение для начинки "шампиньоны" 500600.ru/images/ingridients/shampiniony1.png
Изображения накладываются друг на друга с помощью JS в объекте типа canvas.
Вот так это реализовано в HTML: copi.st/LE8L

Пример реализации: codepen.io/copist/pen/EVayRq

Comments

[Павел Волынцев]

Александр Тимофеев вас устроил ответ?

Answer 5

[Алексей]

sempai.su/meniu/pitstsa, кнопка "сделай Пиццу сам".
Драгэндроп (перетягивание) тоже работает. Построено на старом mootools, но на jquery переделать не долго.
Сделано с помощью варианта на клонировании png. В окне открывается ифрейм, так что можно просто подсмотреть код.

Answer 6

[John Doe]

Все просто, threejs.org

Comments

[Nikita]

Судя по вопросу, это будет слишком сложно для человека с небольшим опытом.

[John Doe]

Ну тогда если знаете javascript то можно почитать документацию по threejs, ну или обратится на фриланс.

Answer 7

[Dmytro Karpovych]

можете попробовать fabricjs