HTML5 canvas Mouseover event

Question

Jak powiązać najechanie kursorem myszy lub dowolne zdarzenie w tej sprawie z narysowanym obiektem na kanwie? Na przykład próbowałem tego:

var c=document.getElementById("myCanvas"); 
var ctx=c.getContext("2d"); 
ctx.beginPath(); 

//STEP ONE 
var stepOneRec = ctx.rect(20, 60, 266, 50); 
ctx.stroke(); 
stepOneRec.addEventListener("mouseover", function() { alert('it works!'); }); 

Na jednej stronie, na którą patrzyłem, przedstawiono metodę wykorzystującą Kinetic.js. Jeśli to jedyny sposób, użyję go, po prostu przyjmuję, że istnieje sposób na powiązanie zdarzeń z narysowanymi elementami bez dodatkowych wtyczek. Przepraszam Płótno noob. Zrobiłem skrzypce z moim kod tutaj: http://jsfiddle.net/jyBSZ/2/

Answer 1

(zacząłem to jako dydaktyczna komentarza, wówczas realizowany jest to rzeczywista odpowiedź.)

Niestety, w javascript na swój własny, nie można. Nie ma obiektów płótna, tylko płótna jako całości i cokolwiek przyciągnęło do jego kontekstu. Wtyczki, takie jak kinetyczne, mogą tworzyć obiekty dla ciebie, ale cały punkt płótna jest taki, że przeglądarka może myśleć o nim jak o pojedynczym statycznym obrazie.

Jeśli chcesz, możesz powiązać zdarzenia mousemove z płótnem, śledzić jego położenie i położenie, w którym rysowałeś rzeczy, i sugerować samemu, że to koniec "tego obiektu" (efektywnie to, co robią wtyczki), ale to wszystkie zdarzenia mousemove na jednym kanwie, a nie zdarzenia mouseover na jego składnikach. (Można nawet ustawić powiązanie zdarzeń, symulując zdarzenie mouseover dla "obiektów", ale pod spodem, wciąż opiera się na sprawdzaniu ruchu i sprawdzaniu konfiguracji własnego obiektu).

Answer 2

Obiekty rysowane w elemencie canvas nie są elementami HTML , po prostu pikselami, a zatem nie będzie rzutować zdarzeń DOM w sposób, w jaki powstałyby elementy HTML.

Musisz samodzielnie śledzić położenie obiektów i obsługiwać zdarzenie "onmousemove" płótna, aby określić, kiedy mysz znajduje się nad jednym z narysowanych obiektów.

Answer 3

można użyć jCanvas, spójrz here

Zrobiłem jsfiddle przykładem dla swojego problemu.

wystarczy zmodyfikować kolejne wywołania zwrotne dla pożądanego rezultatu

function mouseOut(layer){ 
$("#mouse-over-text").html('none options selected'); 
} 

function mouseIn(layer){ 
$("#mouse-over-text").html(getTextForId(layer.name)); 
}