Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   canvas и чертеж (https://javascript.ru/forum/dom-window/55959-canvas-i-chertezh.html)

ecSpl01t 22.05.2015 20:15

canvas и чертеж
 
Приветствую!
Имею чертеж в .пдф нужно запихнуть его на сайт и для каждой комнаты сделать вывод фото той комнаты на которую навели мышкой..
То есть, пользователь нашел на сайт, видит чертеж, навел мышкой на комнату и ему показалась фото той комнаты..

Подскажите как сделать так?! Я так понимаю нужно делать фигуру комнаты в canvas, но я не понимаю как это сделать
я разобрался в канвар только как рисовать линии, но дальше не понимаю..


laimas 22.05.2015 21:03

Отдавать клиенту как изображение к которому описана карта.

Leon-on12 22.05.2015 22:49

Почему бы не наделать пустых дивов каждый спозиционированный поверх комнаты? И не сделать :hover фоток?

Комнаты прямоугольные же

ecSpl01t 22.05.2015 23:10

Цитата:

Сообщение от Leon-on12 (Сообщение 371997)
Почему бы не наделать пустых дивов каждый спозиционированный поверх комнаты? И не сделать :hover фоток?

Комнаты прямоугольные же

не все, если бы были все прямоугольные... =(

Leon-on12 23.05.2015 10:03

ecSpl01t,
Вот тебе ссылка. http://w3pro.ru/article/html-5-canva...chinayushchikh
Это то по чему я учился. Вкратце: context.beginPath() - начать рисовать фигуру. context.moveTo(10, 10); - поставить точку на координату 10 10. context.lineTo(100, 10); - провести линию от предыдущей точки до этой. context.fill(); залить фигуру цветом; context.fillStyle = '#00f'; назначить цвет заливки.

Только как вам это поможет?

ecSpl01t 23.05.2015 12:11

в этом я чуть разобрался и заливку сделал, но а евент все равно срабатывает на весь canvas а не на рисунок..

Sweet 23.05.2015 15:49

Вот же странно. Задача решается одной (ОДНОЙ, КАРЛ!) строчкой кода, если использовать <map>. Просто вешаешь обработчик mouseover на <area>, который показывает картинку из href-атрибута. Всё!

Sweet 23.05.2015 16:48

Цитата:

Сообщение от ecSpl01t
заливку сделал, но а евент все равно срабатывает на весь canvas а не на рисунок

<canvas> - это не html-элемент произвольной формы, опреледяемой изображением. <canvas>, как и остальные - прямоугольник. И события ловятся на всём этом прямоугольнике. И нельзя нативно нарисовать фигуру и повесить на неё обработчик. Короче, канвас не для решения твоей задачи.

ecSpl01t 23.05.2015 18:38

спасибо всем за ответы!


Часовой пояс GMT +3, время: 00:10.