TheShock May 23 2011 at 04:03

Создание фреймворка для Canvas: объекты и мышь

4 min

+66

Comments 16

Anatoly_Piskunov May 23 2011 at 08:21

Можно узнать в каких браузерах все работает?
Я любитель Оперы, демка не работает. Даже при наведении на фигуры — цвет не меняют.
Спасибо.

Kindman May 23 2011 at 08:30

В 8ie тоже не работает (даже не отображает сами фигуры)

Seldon May 23 2011 at 10:06

ie до 9 версии не поддерживает canvas вообще. Вам или надо скачать плагин для ie но это все равно, что хром установить ибо все будет на вебките рендериться
либо реализовывать сходный функционал параллельно на VML

TheShock May 23 2011 at 17:23

Простите, в устаревших браузерах — не работает.

northicewind May 23 2011 at 09:32

Для совместимости с Opera нужно использовать не e.layerX, а e.offsetX. Так как первый возвращает undefined

TheShock May 23 2011 at 17:23

Вы правы, спасибо.

TheShock May 23 2011 at 17:23

Пофиксил. Работает во всех современных браузерах.

Seldon May 23 2011 at 10:11

Автору спасибо за труд, но думаю стать скорее смутить начинающих. Как вы и заметили в заключении, тут ещё много тонкостей, а небольшое api для отрисовки фигур ничего как таковое не даст. Нужно во первых понимать как работает канва, чтобы грамотно оптимизировать отрисовку, кешировать результаты, сделать чтобы отрисовывались меняющиеся части а не весь холст и тд.
Так что тут для написание постов непочатый край )).

TheShock May 24 2011 at 17:29

Я думаю, что даже если новички не осилят реализацию и детали, то, как минимум, осилят идею, а это — достаточно важно. Желательно понимать, как оно работает.

vooD May 23 2011 at 11:45

Мне одному уже сразу ясно, кто автор статьи если речь идет о HTML5?

TheShock May 23 2011 at 17:18

Нууу… Я иногда вижу статьи о HTML5 другого авторства…
Я Вам надоел? =)

vooD May 23 2011 at 18:19

Нет, как раз-таки наоборот.

spmbt May 23 2011 at 11:52

> использование map + area
— и ещё area медленее работает, чем вычисление расположения мыши в JS (проверено однажды в проекте с пробками на карте). Поэтому приложения, критичные ко времени, лучше сразу писать в подобной оболочке.

TheShock May 23 2011 at 17:24

Я думаю, у него есть одно классное преимущество. В Андроиде при клике на элемент будет активироваться не всё поле, а только элемент. Но спасибо за комментарий. Я не тестил, но ожидал, что map+area будет быстрее.

rwz May 24 2011 at 12:38

Я понимаю, конечно, что это только примитивный пример, но сходу возник вопрос.

Зачем в Mouse массив elements?

Получается, что каждый новый элемент приходится добавлять в this.elements объекта CF и делать this.mouse.add, чтобы он добавился в this.elements объекта mouse.

Не проще ли из Mouse дергать this.canvas.elements, сделав предварительно в инитиалайзере this.canvas = canvas?

TheShock May 24 2011 at 15:11

Ну это как бы разделение по ответственностям. В угоду ООП, скажем. Mouse ничего не знает про того, кто её вызвал.

В LibCanvas это разные массивы. Потому что не все объекты, которые отрисовываются слушают мышь и не все объекты, которые слушают мышь — отрисовываются.