Как я могу зарегистрировать события мыши на элементах холста?

Question

Я хочу сделать небольшую настольную игру, используя canvas, чтобы познакомиться с javascript и canvas.Я могу рисовать доску хорошо и хорошо, но теперь я хочу, чтобы определенные элементы реагировали на события мыши.Я могу это сделать?Или мне нужен элемент canvas для каждого элемента доски, который я хочу нарисовать, и зарегистрировать событие мыши для каждого из них?

Или, более вероятно, я безнадежно потерялся в javascript?

Сом фон: я системный разработчик, и после знакомства с flex и flash я решил попробовать свои силы в некотором javascript.Так что не ударяйте!

Answer 1

Короче говоря: нет. Холст - это просто пиксели.Что вам нужно, так это SVG (или VML на IE) - или лучше что-то вроде Raphaël , который позаботится об этом за вас (он использует VML на IE и SVG на всем остальном).

Теперь более длинный ответ: вы могли бы сделать это, используя холст, но тогда вам придется отслеживать все ваши объекты и формы самостоятельно и вычислять, на каком объекте щелкнули, и так далее, чтовероятно не то, что вы хотите. ОБНОВЛЕНИЕ: теперь есть библиотеки, которые могут сделать это для вас, например EaselJS , KineticJS , Paper.js , Fabric.js и некоторые другие (см. Это сравнение библиотек холста для получения дополнительной информации).

С другой стороны, используя Raphaël, вы пишете такой код:

var circle = r.circle(50, 50, 40);

circle.attr({fill: "red"});

circle.mouseover(function (event) {
    this.attr({fill: "red"});
});

что, скорее всего, то, что вы хотите.Это очень естественно, если вы привыкли работать с HTML DOM и событиями.Кроме того, он намного более переносим - даже работает в IE6.

Answer 2

Вы должны сделать все отслеживание самостоятельно, сохранив позиции нарисованных вами элементов на холсте, их границы и добавьте прослушиватель событий мыши для тега canvas.

Вот примериз другого потока:

получить событие щелчка каждого прямоугольника внутри холста?

Answer 3

Другой альтернативой может быть плагин AI to canvas, если у вас есть доступ к Adobe Illustrator. В этом видео они демонстрируют методику определения интерактивной области для ваших векторных фигур: http://visitmix.com/work/ai2canvas/tutorial9.html