¿Cómo hacer puntos seleccionables en el lienzo html5?

Question

estoy jugando con un simple tutorial para dibujar la línea en HTML5 lienzo. Como está basado en jQuery, es fácil agregar muchos efectos al dibujo.

Cómo puedo hacer que el punto se puede hacer clic/hoverable añadir efectos jQuery sobre Click/vuelo estacionario (MouseEnter/mouseleave)? Los puntos están dibujados por

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

Cómo agregar jquery selector? Básicamente, quiero muestran las coordenadas del punto al clic o flotar.

Answer 1

El problema es que funciona con jQuery DOM y no dibujos sobre tela. Lo que debe hacer es almacenar esos puntos en algún lugar y al pasar el cursor sobre el elemento canvas, verificar si las coordenadas del mouse están relacionadas con el lienzo (es decir, si coloca el mouse sobre la esquina superior izquierda del lienzo, los coords son [ 0,0]) están dentro del área del punto/forma. Si es así, el punto está sobrevolado por el mouse y puede mostrar el efecto.

psuedocode para comprender mejor:

// 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, tal vez para averiguar si un punto está contenido dentro de un rectángulo, se puede usar algo como esto:

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

Answer 2

Se puede usar un marco como EaselJS, que abstrae todo el trabajo arduo de manejar eventos de mouse en objetos que agrega a un lienzo.