Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 28.08.2014, 11:28
Интересующийся
Отправить личное сообщение для ДанилаDeep Посмотреть профиль Найти все сообщения от ДанилаDeep
 
Регистрация: 28.08.2014
Сообщений: 10

Canvas обработка событий
Всем доброго дня!
Не так давно, мне поставили задачу отрисовать в canvas следующий рисунок:


Это всего лишь пол беды. Рисование canvasов вполне проста и безобидная весчь. Дело в том что все элементы должны поддерживать следующие события:
а) клик мышкой - при клике необходимо выводить сообщение («<наименование элемента>")
б) наведение курсора мышки - необходимо менять цвет элемента.

Итак,начнем с проверки курсора мышки на вхождение в фигуру. Для прямоугольников можно использовать математический метод и определять по координатам курсора, что касается облака, легче всего будет искать его по пикселям,совпадение по цвету.
Я долго думал как реализовать это всё,пришел к следующему выводу.
Хочу описать каждый объект отдельно,создать для него класс и как раз повесить на этот класс события.
Моя проблема в том что я не могу это описать на javascripts, прошу помощи в реализации,набросать примерный код,как это можно реализовать,допустим сначало для прямоугольника,дальше попробую разобраться уже самостоятельно. Буду очень благодарен за помощь.
Ответить с цитированием
  #2 (permalink)  
Старый 28.08.2014, 11:46
Аватар для ixth
Профессор
Отправить личное сообщение для ixth Посмотреть профиль Найти все сообщения от ixth
 
Регистрация: 19.01.2010
Сообщений: 354

Чувак, не парься ты так. Есть метод isPointInPath. http://digitalarts.bgsu.edu/faculty/...s/notes26.html
Ответить с цитированием
  #3 (permalink)  
Старый 28.08.2014, 11:48
Интересующийся
Отправить личное сообщение для ДанилаDeep Посмотреть профиль Найти все сообщения от ДанилаDeep
 
Регистрация: 28.08.2014
Сообщений: 10

Сообщение от ixth Посмотреть сообщение
Чувак, не парься ты так. Есть метод isPointInPath. http://digitalarts.bgsu.edu/faculty/...s/notes26.html
Ух ты...хороший там пример разбирается =)Спасибо за ссылку)
а как вернуть значение элемента при клике?
Ответить с цитированием
  #4 (permalink)  
Старый 28.08.2014, 12:13
Аватар для ixth
Профессор
Отправить личное сообщение для ixth Посмотреть профиль Найти все сообщения от ixth
 
Регистрация: 19.01.2010
Сообщений: 354

Сходу не скажу. Попробуй сделать базовй класс Figure со свойством caption. Отнаследуйся от него и при клике делай что-нибудь типа getCaption. Изначальная идея хорошая, короче.
Ответить с цитированием
  #5 (permalink)  
Старый 28.08.2014, 15:53
Интересующийся
Отправить личное сообщение для ДанилаDeep Посмотреть профиль Найти все сообщения от ДанилаDeep
 
Регистрация: 28.08.2014
Сообщений: 10

Задача усложняется, а что если рисунок будет вот таким:


Тут уже нужно вызывать метод isPointInPath для определенной фигуры
Ответить с цитированием
  #6 (permalink)  
Старый 28.08.2014, 16:15
Лаборант :-)
Отправить личное сообщение для Pavel M. Посмотреть профиль Найти все сообщения от Pavel M.
 
Регистрация: 08.11.2011
Сообщений: 806

Может быть лучше векторную графику здесь использовать?
SVG, например?

или обертку, какую-нибудь, типа http://raphaeljs.com/
Ответить с цитированием
  #7 (permalink)  
Старый 28.08.2014, 16:55
Интересующийся
Отправить личное сообщение для ДанилаDeep Посмотреть профиль Найти все сообщения от ДанилаDeep
 
Регистрация: 28.08.2014
Сообщений: 10

Сообщение от Pavel M. Посмотреть сообщение
Может быть лучше векторную графику здесь использовать?
SVG, например?

или обертку, какую-нибудь, типа http://raphaeljs.com/
Можно конечно,но задача была реализовать всё это в canvas
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
ie и другие браузеры - обработка событий torsar Javascript под браузер 1 24.05.2014 20:29
Обработка событий Shtorm ExtJS 4 30.07.2011 22:56
JQuery отложенная обработка событий hover DemonWather jQuery 2 09.03.2011 09:01
svg. обработка событий amigo* Элементы интерфейса 0 23.06.2010 22:31
Обработка событий клавиатуры MaxPayne Events/DOM/Window 26 01.05.2009 10:37