Comment faire des points cliquables dans le canevas html5?

Je suis à jouer avec un tutoriel simple pour le dessin de la ligne dans HTML5 toile. Depuis, il est basé sur jQuery, il est facile d'ajouter beaucoup d'effets pour le dessin.

Comment puis-je faire le point cliquable/hoverable pour ajouter des effets jquery sur cliquez/hover (mouseenter/mouseleave)? Les points sont tracés par

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

Comment ajouter un sélecteur jquery? Fondamentalement, je veux afficher les coordonnées d'un point sur cliquez ou passez.

source d'informationauteur Googlebot

  1. 16

    Le problème est que jQuery fonctionne avec DOM et pas des dessins sur la toile. Ce que vous devez faire est de stocker ces points quelque part et planant au-dessus de l'élément canvas, vérifier si les coordonnées de la souris par rapport à la toile ( par exemple, si vous placez la souris dans le coin supérieur gauche de la toile, les coordonnées sont [0,0] ) sont dans la zone du point de forme. Si oui, le sujet est survolé par la souris, et vous pouvez afficher l'effet.

    Psuedocode à mieux comprendre:

    //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, peut-être pour savoir si un point est contenu dans un rectangle, vous pouvez utiliser quelque chose comme ceci:

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

    Vous pouvez utiliser un framework comme EaselJS qui résume tout le travail de gestion des événements de souris sur les objets que vous ajoutez à une toile.