Come rendere i punti cliccabili nella tela html5?

Question

Sto giocando con un simple tutorial per disegnare la linea nella tela HTML5. Dato che è basato su jQuery, è facile aggiungere molti effetti al disegno.

Come si può rendere il punto selezionabile/passibile per aggiungere effetti jQuery al clic/passaggio del mouse (mouseenter/mouseleave)? I punti sono disegnati da

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(); 
} 

Come aggiungere il selettore jquery? Fondamentalmente, voglio mostrare le coordinate del punto al clic o al passaggio del mouse.

Answer 1

Il problema è che jQuery funziona con DOM e non con disegni su tela. Quello che devi fare è memorizzare quei punti da qualche parte e passare il mouse sopra l'elemento canvas, controlla se le coordinate del mouse sono relative alla tela (cioè se posizioni il mouse sull'angolo in alto a sinistra della tela, le coordinate sono [ 0,0]) si trovano all'interno dell'area del punto/forma. Se è così, il punto è sopra il mouse e puoi visualizzare l'effetto.

psuedocodarlo per capire meglio:

// 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, forse per scoprire se un punto è contenuto all'interno di un rettangolo, si può usare qualcosa di simile:

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

Answer 2

Si potrebbe usare un quadro come EaselJS che astrae tutto il duro lavoro di gestione degli eventi del mouse sugli oggetti che aggiungi a una tela.