Wie man anklickbare Punkte in HTML5 Canvas machen kann?

Question

Ich spiele mit einem simple tutorial für die Zeichnung Linie in HTML5 Canvas. Da es auf jQuery basiert, ist es einfach, der Zeichnung viele Effekte hinzuzufügen.

Wie kann ich den Punkt anklickbar/moveable machen, um jQuery-Effekte beim Klicken/Hover (Mouseenter/Mouselave) hinzuzufügen? Die Punkte werden gezeichnet von

c.fillStyle = '#333'; 

for(var i = 0; i < data.values.length; i ++) { 
    c.beginPath(); 
    c.arc(getXPixel(i), getYPixel(data.values[i].Y), 4, 0, Math.PI * 2, true); 
    c.fill(); 
} 

Wie jquery Selektor hinzufügen? Grundsätzlich möchte ich die Punktkoordinaten beim Klick oder Hover zeigen.

Answer 1

Das Problem ist, dass jQuery mit DOM und keine Zeichnungen auf der Leinwand arbeitet. Was Sie tun müssen, ist, diese Punkte irgendwo zu speichern und wenn Sie über das Canvas-Element gehen, überprüfen Sie, ob die Koordinaten der Maus relativ zur Leinwand sind (dh wenn Sie die Maus über die obere linke Ecke der Leinwand bewegen, sind die Koordinaten [ 0,0]) liegen im Bereich der Spitze/Form. Ist dies der Fall, wird der Punkt mit der Maus überfahren und Sie können den Effekt anzeigen.

Psuedocode besser zu verstehen:

// adding shapes to the canvas 
var shapes = []; // make that rects for simplicity. 
For (condition): 
    shapes.push (new Rect(x,y,width,height)); 
    canvas.rect(x, y, width, height); 

// testing hover. 
$("#canvas").mousemove(function(e) { 
    var offsetX = e.pageX - $(this).position().left; 
    var offsetY = e.pageY - $(this).position().top; 

    Foreach shape in shapes: 
     if(shape.contains(offsetX, offsetY)) // a fictious method, implement it yourself...lookup for collision detection; not exactly that but something like that... 
      Mouse hovers! do something great. 
}); 

Ok, vielleicht, wenn ein Punkt in einem Rechteck enthalten sind, um herauszufinden, ist, Sie so etwas wie diese verwenden:

function contains(rect, x, y) { 
    return (x >= rect.x && 
      x <= rect.x + rect.width && 
      y >= rect.y && 
      y <= rect.y + rect.height) 
} 

Answer 2

Sie einen Rahmen verwenden könnte wie EaselJS, die die ganze harte Arbeit der Handhabung von Mausereignissen auf Objekten, die Sie einer Leinwand hinzufügen, abstrahiert.