Canvas события
 

Hi all))
Начал изучение canvas'a.
Вот и хочу узнать как можно реализовать события для элементов canvas'a ?
Искал в нете, везде фреймворки предлагают использовать. Никак не получается найти как вешать обработчики на элементы в канвасе.

Вообще вроде насколько понял, такое не возможно. Надо получать координаты (клика к примеру) по всему холсту, и уже смотреть что за элемент по этим координатам находится, а как тогда это определить ?

Хмм, вроде читал что Libcanvas хороший фреймворк.

Никто не может дать ссылок на документацию (у них сайт вроде не работает) или на статьи для новичков ?
Читал эту и эту статьи и не получается((( Точнее примеры из статьи работают, а вот когда что то свое хочу сделать, то не работает. Есть у кого ссылки на хорошие статьи ?

Или может кто предложит другой фремворк ?

Libcanvas не кроссбраузерный, точнее в IE9- не работает., если вас это не напрягает, то библиотека довольно хорошая (простая, легкая), если же нужен кроссбраузерное решение, то наиболее активная аудитория у Raphaël.
Напишите разработчику

Raphael - это вроде как больше в сторону SVG ?

как вариант только для для n-угольных фигур.
проводим от курсора к центру фигуры прямую.
смотрим если прямая пересекает любой отрезок фигуры то соответственно курсор не внутри фигуры. если не пересекли то в фигуре.
Надеюсь смысл понятен.;)

UpJump,
Для n-угольных фигур я то предполагаю как, а вот для круга, не очень.

Может есть формула какая то ? К примеру у нас координаты центра круга, его радиус и координаты клика ?

(|[координаты ц. круга]-[к. курсора]|<R) => наведён на круг

ну посмотрите здесь к примеру

определить событие-легко
определить позицию указателя мыши на канве-легко .
считать строку(линию) /либо необход колво строк из канвы по координате y мыши-легко
в этой строке каждая точка представлена 4 байтами rgb+альфа
считать нужную по координате х мыши -легко
определить цвет её (возможно окружения её) -легко
если цвет соответствует (либо последовательность) выполнить действие

а на элементы канвы событие никак не повесишь. как вариант над канвой эрии создавать и обработчики на них вешать.

а если картинка?:)

если цвет точек определять то без разницы. допустим зелёная окружность картинка.
определить клик. по цвету точек определить был ли клик внутри круга. если был то точки справа и слева будут зелёными(не рассматриваю сейчас вариант что он не весь в канве -определить смещение точек по вертикали относительно найденной чтоб определить внутри или снаружи был клик) -поставить индикатор. при отпуске мыши его сбрасывать
если движение мышью были при зажатой клавише-то перерисовать круг по новым координатам :)
ну а если всю картинку двигать то вообще не вопрос)

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

Ну я не знаю как там с пикселями, для меня это еще сложно)))
Но вот решил для каждого объекта сохранять координаты, и при клике, по координатам проверять совпадение с каким либо созданным объектом, и если у него имеется обработчик клика, то вызывать. (ну и не только с кликом, и с другим событиями тоже). Так думаю все получится))

Минус только в том что так будет работать, только для прямоугольных объектов и окружностей. А вот с кривыми окружностями (если можно так выразится) это не получится (ну пока еще не знаю как возможно будет определять принадлежность точки для кривой окружности)

У меня еще такой глупый вопрос :)
Зачем сделано что бы при получение контекста, явно указывать "2d"
Разве в будущем что ли планируется возможность создания 3D изображений на канвасе, и тогда будем указывать "3d" ? :) :)

не планируется. это есть уже.

ну дак а смысл в объекте-если эрию можно по ним строить и кидать на неё обработчик? отпадает проверка совпадения

Хммм, тоже вариант, попробую так)

Еще такой вопросик, если мне надо изменить цвет (размеры и т.п.) одного (или нескольких элементов), то для этого мне надо очистить канвас (я меняю размеры) и заново рисую. А если будет много элементов, и ради одного или двух, рисовать заново весь канвас, это же может повлиять сильно на скорость работы. Как вариант только если для статических элементов делать один канвас, а динамические кидать в другой канвас и только его рисовать постоянно ?

Афигеть, так если научится, то можно будет делать крутые браузерские игры, аналоги настольных игр (моя мечта) :)

Пока что самую впечатлительную которую я видел - это был quake сделанный в гугле (и то только видео, жаль что самому не удалось поиграть) :)

Микрософт от зависти обосрется что в его браузерах игры не будут идти :D

если статические у тебя не используются-то подложи изображение под канву-просто контейнер с изображением внутри либо с изображением беграундом

и посмотри на функции канвы getImageData и putImageData чтоб цвет менять и прочее одного элемента а не всю перерисовывать

почему не будут?) ие9 полная поддержка канвы а для более старых библиотеки подключаются

Это знаю, но все равно еще не все им пользуются)

Давно видел ту тему, а сегодня утром не помнил про нее и никак не смог найти нормальный и понятный фреймворк)
Нашел бы я ее утром, наверное бы не заморачивался насчет этого всего))

У меня у самого сейчс скоро фреймворк получится, с утра подсел на изучение, называется "решил сделать просто пару функций для удобства", сейчас чую такая махина получится :D Хотя не факт что она везде будет работать, но ниче, зато практика будет, да и я всегда мечтал сделать какой то фреймворк))))

Перефразируя известную пословицу: "Каждый программист должен в жизни сделать три вещи: посадить дерево, вырастить сына, написать свой фреймворк" :D

dmitriymar,
А что можно придумать что бы определять клик по кривому элементу ? Ареа же позволяет рисовать только круги, квадраты и полигоны.

а полигон это не многоугольник?))
http://htmlbook.ru/html/area/shape
она позволяет рисовать любую фигуру по заданным точкам(любое количество точек)-хоть круг ,овал из них нарисуй

Да, но при рисование на канвасе я же не знаю все эти точки ?
К примеру вот рисует пол круга:

ctx.arc(20, 20, 10, 10, Math.PI*2, true);

При наличие этих данных мы же не сможем нарисовать арию ?

посмотри функции какие я тебе дал ранее для канвы. переноси точки с канвы в эрию -координаты и там и там одинаковые будут

Да я прочитал про них (getImageData, putImageData). Но они как я понила позволяют узнать цвет определенной области ? Как мне с помощью них узнать точки границ элемента ?

ты считываешь линию (несколько линий)из канвы -при этом считывании ты явно знаешь у-поскольку считываешь с помощью его линию.
узнать х-вся линия это ширина канвы *4(поскольку для каждой точки 4 байта) находишь точку по цвету -узнаёшь и х соответственно. итого у и х у тебя есть
а начальные х и у для начала поиска ты знаешь либо когда строишь либо координаты мыши для действий каких планируешь. проходишь по окружению находишь все точки-копируешь их в эрию

я бы поступил не так-создал бы двумерный массив(условно) по размерам канвы
при построении фигуры проходил бы по канве находил бы точки ставил бы на их месте флаги в массиве(допустим еденицы-можно индикатор цвета-решится проблема с наложением если обыграть наложения трёхмерным массивом)-если на их месте нет флага -то это точки новой фигуры
строил бы по ним эрию
соответственно решена проблема с закраской. контур в эрию прекинуть.и затем закраску в массиве тоже отметить

Почитал эту статью и взглянул на код фреймворка от DreamTheater (вроде такой же подход отлова событий используется как и в статье).
И никак не могу понять как там отлавливаются события для элемента (вроде рисуется как обычно, не могу догнать как запоминается элемент :) ), и каковы плюсы такого подхода в отличии от использования эрии ?

я так полагаю этим:

context.isPointInPath(event.mouseX, event.mouseY)

ЗЫ и откуда эта мода пошла строка кода - 4 строки комментов....

из статьи-Это трудности в синхронизации и, главное, невозможность реализации более сложных фигур.
Но, как раз трудностей и нет-да и в вариате с визуальным рисованием фигур любой сложности всё будет проще(хоть каляку маляку-определить только внешние точки для эрии-не сложно.заодно можно и каляки маляки не замкнутые делать). Если фигура не закрашена и клик внутри её, то жизнь с алгоритмом с хабра значительно усложнится.Да и насколько понимаю при одинаковом цвете с наложением будет не так всё просто(это о преимуществе массива над объектом в этом случае в массиве 3х мерном можно индексы по типу z ставить,хотя что мешает с объектом тоже их ставить.. ).
хотя по поводу быстрее-наверное быстрее отработает взаимодействие со множеством эриий чем его код со множеством фигур.хотя,на объектах ресурсов меньше сожрёт,но сложность фигур ограничена и вычислений поболее со сложной фигурой(например-не многоугольник из прямых,а фигура комбинация прямых и дуг-нарисованная в визуальном режиме.либо фигура в форме бублика-уже никак без наворотов кода).И в итоге для сложных он так разрастётся,чего не произойдёт с массивом и эриями. да и с эриями и массивом можно готовые изображения вставлять(закидывать в канву тоже фото) и с лёгкостью манипулировать им
у всего плюсы и минусы есть.

dmitriymar, на самом деле, есть заблуждение, что реализованное на нативном dom будет быстрее, чем на js. Так вот. Не забывайте, что dom - ужасно медлителен по своей сути и тащит за собой кучу абстракций. это не всегда так

Автору темы - дока по LC лежит на ГитХабе: https://github.com/theshock/libcanva...master/Docs/Ru

Shock,
сделал реализацию подобного через canvas+svg. на скорость нареканий нет-меня устраивает. а dom-реализация событий у вас на канве его всё равно используtт. дак и смысл используя его говорить что он не используется?
а как это? всегда считал что результат добивается взаимодействием(грубо) js(vbs..) и Dom ,но не по отдельности