HTML5 Canvas Souris

Question

Quelque chose comme je suis ont:

 

    function mouseClick(event) { 
     ... 
    } 
    canvas.addEventListener("mousedown", mouseClick, false); 
    function drawRect(x, y) { 
     context.fillRect(x, y, 16, 16); 
    }; 
    drawRect(10, 10); 

Comment faire quelque chose comme si je suis cliquer sur mon Rect Canvas obtenir quelque chose? quelque chose comme Si je suis, cliquez sur Rect obtenir alerte;

Désolé pour ma langue anglaise.

Answer 1

Une zone de dessin n'est rien d'autre qu'une image bitmap. Il n'y a aucun enregistrement gardé qu'il y avait un rectangle dessiné sur la toile, donc si vous voulez détecter que le clic était dans une zone sur laquelle vous avez dessiné un rectangle, vous devez garder un enregistrement des zones que vous avez dessinées et testées contre eux. par exemple:

var rects= []; 

function mouseClick(event) { 
    // Get position of click relative to canvas. This is not reliable! Requires 
    // standards mode, and the canvas not being nested in other offsetParents. 
    // Getting page-relative co-ordinates reliably in all cases is outside the 
    // scope of this question... 
    // 
    var x= event.clientX-document.documentElement.scrollLeft-canvas.offsetLeft; 
    var y= event.clientY-document.documentElement.scrollTop-canvas.offsetTop; 

    // Hit-test each rectangle in the list of those drawn 
    // 
    for (var i= rects.length; i-->0;) { 
     var x0= rects[i][0], y0= rects[i][1], x1= rects[i][2], y1= rects[i][3]; 
     if (x0<=x && x<x1 && y0<=y && y<y1) { 
      alert('you clicked on a rectangle!'); 
     } 
    } 
} 
function drawRect(x, y) { 
    rects.push([x, y, x+16, y+16]) 
    context.fillRect(x, y, 16, 16); 
}; 
drawRect(10, 10); 

Si vous faites beaucoup de ce genre de chose que vous êtes susceptible d'être mieux à l'aide d'un système de dessin en mode retenu comme SVG à la place de la toile pure bitmap. En SVG, vous pouvez écouter les événements click directement sur un objet rectangle, déplacer le rectangle, le reutiliser et ainsi de suite.

Answer 2

addEventListener est délicat. Ce que je voudrais essayer est

canvas.addEventListener.apply(canvas, ["mousedown", mouseClick, false]);

ou utiliser une fonction anonyme.

canvas.addEventListener.apply(canvas, ["mousedown", function(){ mouseClick(); }, false]);

Utilisation de la fonction peut aider à appliquer se assurer que le eventListener est appliqué à l'élément droit. Vous pouvez lire à ce sujet here.

Answer 3

Je pense que ce que vous dites est que vous souhaitez que les événements se produire lorsque vous cliquez sur les objets que vous avez dessiné sur une toile. J'ai écrit quelques tutorials sur la façon de faire des formes persistantes et les déplacer avec des clics de souris. Cela devrait vous donner un bon point de départ pour cela.

Answer 4

$(canvas).mousedown(function myDown(e) 
{ 
    var position = $(canvas).position(); 
    var x = e.pageX-position.left; 
    var y = e.pageY-position.top; 
    ... 
}); 

Ceci est bien meilleure façon de le faire!

Answer 5

Vous pouvez également essayer Concrete.js http://www.concretejs.com qui est un cadre de toile légère qui ajoute de l'interactivité. Vous voulez bien faire quelque chose comme ceci:

touche var = canvas.getIntersection (x, y);

si x, y croise un graphique que vous avez dessiné avec une clé donnée, elle renvoie la clé, et vous savez ce qui a été plané/cliqué.

C'est une bien meilleure solution car elle fonctionne sur tout ce que vous dessinez, y compris des cercles, des lignes, des courbes, des polygones, des blobs arbitraires, etc.