HTML5 canvas

[Odrin]

Всем добрый день!

Занимаюсь веб-программированием не так давно. Появилась необходимость реализовать вот какую штуку- На странице по клику на кнопке рисуется окружность. Тут все просто, canvas, ctx.arc. Далее- при попадании курсора мыши на окружность, в этом месте окружности появляется небольшая точка (метка), которая следует за курсором в пределах окружности и исчезает, когда курсор выходит за ее границы. Но это не самое главное.

Главное - возможность мышкой изменять радиус окружности. Т.е. что- то вроде drag & drop, кликнуть по окружности и "перетащить" радиус.

С canvas раньше не работал никогда, по этому очень надеюсь на вашу помощь!

Заранее благодарен!

[Vlad]

Рекомендую начать изучение с этого ресурса.

https://developer.mozilla.org/en/canvas_tutorial

[Odrin]

Этот курс я изучил, но на русском - на английском читать доки для меня проблематично)

[psywalker]

  Odrin said:

Этот курс я изучил, но на русском - на английском читать доки для меня проблематично)

Недавно навоял такую задачку, как тебе?

http://psywalker.ru/Forum/JS/Primitive/Dom...vas/crug/1.html

[Int]

Вырвиглазненько.

[rus]

аж глаза запульсировали

[Odrin]

  psywalker said:

Недавно навоял такую задачку, как тебе?

http://psywalker.ru/Forum/JS/Primitive/Dom...vas/crug/1.html

Выглядит, конечно, не плохо... Но к моей задаче не имеет совершенно никакого отношения =)

Господа, подскажите хотя бы, как повесить эвент onMause на объект в канвасе. Т.е. чтоб срабатывал именно при наведении мыши на линию, а не на весь холст

[psywalker]

  Odrin said:

Выглядит, конечно, не плохо... Но к моей задаче не имеет совершенно никакого отношения =)

Ну почему же не имеет никакого отношения?

  Quote

Господа, подскажите хотя бы, как повесить эвент onMause на объект в канвасе. Т.е. чтоб срабатывал именно при наведении мыши на линию, а не на весь холст

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

  Quote

Т.е. что- то вроде drag & drop, кликнуть по окружности и "перетащить" радиус.

Тебе нужно как-то высчитывать координаты круга-радиуса, и когда мышь на них попадала и была нажата, передвигать её и всегда перерисовывать форму при передвижении, и снова запоминать координаты и т.д.

[Great Rash]

Надо писать свой обработчик событий. Т.е. объекты в канвасе кажись не сохраняются в DOM, таким образом это просто изображение, на которое навесить простой обработчик нельзя. Нужно при создании объекта (например круга) сохранять его координаты и размеры в некоем стеке, потом надо повесить на <canvas> обработчик onmousemove и следить за координатами курсора, которые потом сравнивать с координатами из стека. Если координаты совпали, значит срабатывает кастомный onmouseover.

Я вообще не очень хорошо знаком с API так что могу ошибаться...

[Odrin]

  Great Rash said:

Надо писать свой обработчик событий. Т.е. объекты в канвасе кажись не сохраняются в DOM, таким образом это просто изображение, на которое навесить простой обработчик нельзя. Нужно при создании объекта (например круга) сохранять его координаты и размеры в некоем стеке, потом надо повесить на <canvas> обработчик onmousemove и следить за координатами курсора, которые потом сравнивать с координатами из стека. Если координаты совпали, значит срабатывает кастомный onmouseover.

Я вообще не очень хорошо знаком с API так что могу ошибаться...

Хм... Ну я как- то так это себе и представлял... Просто была надежда, что можно работать непосредственно с объектами на холсте. =)

Ладно, тогда в общих чертах все понятно, буду пробовать...

Всем спасибо за помощь!

[Great Rash]

http://www.html5canvastutorials.com/advanc...path-mouseover/

[Odrin]

  Great Rash said:

http://www.html5canvastutorials.com/advanc...path-mouseover/

А вот за эту ссылку огромнейшее спасибо!

[psywalker]

  Odrin said:

А вот за эту ссылку огромнейшее спасибо!

Да кстати!

[rash]

А svg вам не подойдет?

Там можно работать с отдельными элементами изображения.

[Int]

  psywalker said:

Тебе нужно как-то высчитывать координаты круга-радиуса

x,y,r - центр и радиус окружности, mx, my - координаты мыши

(x-mx)^2+(y-my)^2 <= r^2 - мышь в пределах окружности

[Odrin]

Чтоб не создавать новую тему- тут спрошу.

Вот есть в IE8 нижняя полоса. Ну та, в которой отображается загрузка страницы, ошибки JS и все такое. Так вот, у меня нашелся на сайте странный баг (увы, кинуть ссылку на сайт не могу) - при прокрутке колеса мыши в этой полосе появляются цифры "1". Т.е. если покрутить колесо, там чтот типа того - "111111111111111111111111" =) На сайте по скроллу эвент обрабатывается, там сложно все, не я код писал. Мож кто знает, как вообще JS может влиять на содержимое этой нижней полосы IE??? В Опере, кстати, тож

Edited January 26, 2011 by Odrin

[Great Rash]

Это строка состояния (status bar). Ищите в коде слово status или window.status.

И на будущее: создавайте новую тему.

[Odrin]

Спасибо! Сразу нашел =) Опять вы меня выручили =)

[Paloskin]

Добрый день.

Возникла следующая проблема.

При клике по рабочей области канваса требуется перемещать фоновое изображение. Например при клике на кнопку, переместить фон на 100 пикселей вправо (фон заведомо больше рабочей области канваса).

Заранее спасибо.

[psywalker]

Paloskin

Создавай отдельную тему.