HTML 5 Canvas Mouse over event na prvku (show tooltip) - html5-plátno, mouseevent, kineticjs

Pracujem na vizualizačnom projekte. Na základe mojich údajov vykreslujem stovky malých kruhov na plátne. Chcem pridať myš nad udalosť tak, aby vždy, keď je myš ohraničujúcou oblasťou kruhu, zobrazila nejakú vlastnosť uzla z mojich údajov ako tip nástroja alebo ako text na plátne. Moja súčasná metóda drawCircle

function drawCircle(canvas,x,y,r)
{
canvas.strokeStyle = "#000000";
canvas.fillStyle = "#FFFF00";
canvas.lineWidth = 2;
canvas.beginPath();
canvas.arc(x,y,r,0,Math.PI*2,true);
canvas.stroke();
canvas.fill();
canvas.closePath();
}

Pozrel som sa kinetic.js Ale nedokážem zistiť, ako môžem volať svoju metódu drawCircle [opakovane] pomocou ich knižnice.

Akákoľvek pomoc bude vysoko cenená.

odpovede:

Ak stále chcete používať KineticJS, dali by ste do rutiny drawCircle vložiť materiál kinetického tvaru. To je v podstate vytiahnuté ich výučba a vyzliekol:

function drawCircle(stage,x,y,r) {
var circle = new Kinetic.Shape(function(){
var context = this.getContext();
// draw the circle here: strokeStyle, beginPath, arc, etc...
});
circle.addEventListener("mouseover", function(){
// do something
});
stage.add(circle);
}

Ak nechcete používať KineticJS po všetkom, musíte si pamätať polohy a polomery každého kruhu, ktorý ste nakreslili, a potom urobiť niečo také:

canvas.onmouseover = function onMouseover(e) {
var mx = e.clientX - canvas.clientLeft;
var my = e.clientY - canvas.clientTop;
// for each circle...
if ((mx-cx)*(mx-cx)+(my-cy)*(my-cy) < cr*cr)
// the mouse is over that circle
}