2д модель

R
На сайте с 03.08.2012
Offline
131
3099

Приветствую!

На сайт необходимо внедрить 2д модель, пример: http://goodimg.ru/img/cherteji-mashin1.jpg

Т.е. по сути это просто "чертеж" автомобиля.

Смысл в том, что будет использоваться одна такая модель все всех авто на сайте (сайт - доска объявлений по авто). И на этой модели нужно подсвечивать разными цветами детали.

Допустим дверь нужно подсветить красным (крашеная), капот и бампер передний - желтым (битый) ну и тому подобное.

Соотвественно когда человек выкладывает объявление он должен выбирать деталь на 2д модели и подписывать что с ней не так во всплывающем окне.

Потом формируется модель при просмотре объявления с подствеченными частями. Когда направляют на цветную часть, должна выходить подзказка, наподобие: "Эта деталь подкрашена".

Думаю Вы поняли, что я хочу)

Подскажите, пожалуйста, как это все реализовать?

Подскажите логику работы? Куда смотреть? Может есть уже готовые JS планины?

Или это можно сделать на HTML + CSS?

Нужно ли дизайнеру рисовать все вариации подкрашенных деталей и давать мне десятки картинок? Или можно будет подкрасить деталь с помощью CSS?

P.S. желательно без flash.

Буду благодарен за помощь, а то пока не знаю куда даже "копать".

Спасибо!

Devvver
На сайте с 02.07.2008
Online
674
#1

revered, в html5 можно сделать, вот направление в которую сторону копать

https://habrahabr.ru/post/127994/

Мой блог. Все о создании сайтов,Seo и СДЛ ( https://devvver.ru/ ) Мой SEO телеграм канал https://t.me/seobloggers
W
На сайте с 18.09.2006
Offline
86
#2

Вот тут есть библиотека с примером как это можно сделать

http://konvajs.github.io/docs/sandbox/Modify_Shape_Color_on_Click.html

но в любом случае вам по каждой картинке нужно будет рисовать SVG из замкнутых путей чтобы сформировать динамические элементы

samimages
На сайте с 31.05.2009
Offline
427
#3

Исходя из того что данные будут рандомные... яб копнул в сторону php GD - файлы можно либо изначально нарезать, либо отдавать слоями, но если нарезать то нагрузка на один запрос будет меньше.

т.е. режем сразу все запчасти, собираем картинку в GD библиотеке, сразу закрашивая в нужный цвет нужный кусок.

Опыт как иммунитет — приобретается в муках! Хостинг: экономия до 1300 руб + домен в подарок ( https://clck.ru/XLscf ) / Аудит семантики от 15К [долго] - ЛС
R
На сайте с 03.08.2012
Offline
131
#4

Всем спасибо за ответы! Буду изучать)

B
На сайте с 13.02.2008
Offline
262
#5

revered, есть целиком готовый вариант, который возможно вам подойдет. Есть свободный просмоторщик карт Leaflet, где можно создавать на карте закрашенные области, создавать интерактивные метки и пр. Так вот никто не мешает вам в качестве подложки использовать не карточные тайлы, а свой рисунок...

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий