Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 22.05.2015, 20:15
Интересующийся
Отправить личное сообщение для ecSpl01t Посмотреть профиль Найти все сообщения от ecSpl01t
 
Регистрация: 11.01.2014
Сообщений: 18

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

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

Ответить с цитированием
  #2 (permalink)  
Старый 22.05.2015, 21:03
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Отдавать клиенту как изображение к которому описана карта.
Ответить с цитированием
  #3 (permalink)  
Старый 22.05.2015, 22:49
Аватар для Leon-on12
Аспирант
Отправить личное сообщение для Leon-on12 Посмотреть профиль Найти все сообщения от Leon-on12
 
Регистрация: 07.04.2015
Сообщений: 65

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

Комнаты прямоугольные же
Ответить с цитированием
  #4 (permalink)  
Старый 22.05.2015, 23:10
Интересующийся
Отправить личное сообщение для ecSpl01t Посмотреть профиль Найти все сообщения от ecSpl01t
 
Регистрация: 11.01.2014
Сообщений: 18

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

Комнаты прямоугольные же
не все, если бы были все прямоугольные... =(
Ответить с цитированием
  #5 (permalink)  
Старый 23.05.2015, 10:03
Аватар для Leon-on12
Аспирант
Отправить личное сообщение для Leon-on12 Посмотреть профиль Найти все сообщения от Leon-on12
 
Регистрация: 07.04.2015
Сообщений: 65

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'; назначить цвет заливки.

Только как вам это поможет?
Ответить с цитированием
  #6 (permalink)  
Старый 23.05.2015, 12:11
Интересующийся
Отправить личное сообщение для ecSpl01t Посмотреть профиль Найти все сообщения от ecSpl01t
 
Регистрация: 11.01.2014
Сообщений: 18

в этом я чуть разобрался и заливку сделал, но а евент все равно срабатывает на весь canvas а не на рисунок..
Ответить с цитированием
  #7 (permalink)  
Старый 23.05.2015, 15:49
Профессор
Отправить личное сообщение для Sweet Посмотреть профиль Найти все сообщения от Sweet
 
Регистрация: 16.03.2010
Сообщений: 1,618

Вот же странно. Задача решается одной (ОДНОЙ, КАРЛ!) строчкой кода, если использовать <map>. Просто вешаешь обработчик mouseover на <area>, который показывает картинку из href-атрибута. Всё!
Ответить с цитированием
  #8 (permalink)  
Старый 23.05.2015, 16:48
Профессор
Отправить личное сообщение для Sweet Посмотреть профиль Найти все сообщения от Sweet
 
Регистрация: 16.03.2010
Сообщений: 1,618

Сообщение от ecSpl01t
заливку сделал, но а евент все равно срабатывает на весь canvas а не на рисунок
<canvas> - это не html-элемент произвольной формы, опреледяемой изображением. <canvas>, как и остальные - прямоугольник. И события ловятся на всём этом прямоугольнике. И нельзя нативно нарисовать фигуру и повесить на неё обработчик. Короче, канвас не для решения твоей задачи.
Ответить с цитированием
  #9 (permalink)  
Старый 23.05.2015, 18:38
Интересующийся
Отправить личное сообщение для ecSpl01t Посмотреть профиль Найти все сообщения от ecSpl01t
 
Регистрация: 11.01.2014
Сообщений: 18

спасибо всем за ответы!
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Повтор фото (getUserMedia(),HTML5 Canvas) aspex Элементы интерфейса 1 27.12.2014 16:46
canvas рисование окружности imedia Элементы интерфейса 2 30.05.2014 17:40
Canvas картинка с обесцвечиванием. cheba Общие вопросы Javascript 9 31.05.2013 09:13
Создание экземпляра Canvas не затрагивая HTML Tails Общие вопросы Javascript 2 09.03.2012 13:55
Добавить на canvas еще один елемент greengarlic Общие вопросы Javascript 5 22.09.2010 10:16