Lier l'événement à la forme sur le canevas

Comment lier un événement à une forme dessinée sur un canevas? J'ai supposé que cela fonctionnerait mais j'ai une erreur.Lier l'événement à la forme sur le canevas

<html> 
    <head> 
    <script type="application/javascript"> 
    function draw() { 
     var canvas = document.getElementById("canvas"); 
     var ctx = canvas.getContext("2d");  
     ctx.fillStyle = "rgb(200,0,0)"; 
     var rec = ctx.fillRect (0, 0, 55, 50); 

     rec.onclick = function(){ 
      alert('something'); 
     } 
    } 
    </script> 
    </head> 
    <body onLoad="draw()"> 
     <canvas id="canvas" width="300" height="300"></canvas> 
    </body> 
</html>

Source

2010-05-09 Ben Shelock

Découvrez la bibliothèque de toile [Fabric.js] (http://fabricjs.com). – kangax

Mettez les gestionnaires d'événements sur l'élément de toile, puis utiliser la position de la souris pour décider quelle partie conceptuelle de la toile l'événement se produit sur.

Je n'ai pas beaucoup joué à la toile, mais je ne serais pas surpris s'il existait déjà des bibliothèques qui vous aident à gérer la délégation d'événements à de tels éléments imaginaires.

Source

2010-05-09 16:50:43 goat

On dirait que vous devriez utiliser svg à la place, car il vous permet d'ajouter des écouteurs d'événements sur les formes. Je recommande de vérifier raphaeljs.com pour un début.

Source

2010-05-10 08:00:56

En utilisant Kineticsjs, vous pouvez gérer les événements de forme dans une toile comme suit:

<script> 
    shape.on('mousedown mouseover' function(evt) { 
    // do something 
    }); 
</script>

Source

2012-09-29 08:54:20 Pith

Lier l'événement à la forme sur le canevas

Répondre

Questions connexes