Evento de vinculación a la forma en el lienzo

¿Cómo puedo vincular un evento a una forma dibujada en un lienzo? Supuse que esto funcionaría, pero obtuve un error.Evento de vinculación a la forma en el lienzo

<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>

Fuente

2010-05-09 Ben Shelock

Salida [Fabric.js] (http://fabricjs.com). – kangax

puso a los controladores de eventos en el elemento canvas, y luego usar la posición del ratón para decidir qué parte conceptual de la tela se produce el evento en.

No he jugado mucho con canvas, pero no me sorprendería que ya hubiera algunas bibliotecas que lo ayuden a administrar la delegación de eventos a tales elementos imaginarios.

Fuente

2010-05-09 16:50:43 goat

Parece que debería estar utilizando svg en su lugar, ya que le permite agregar detectores de eventos en las formas. Recomiendo comprobar raphaeljs.com para empezar.

Fuente

2010-05-10 08:00:56

Usando Kineticsjs, puede controlar los eventos de forma en un lienzo de la siguiente manera: la biblioteca de lona

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

Fuente

2012-09-29 08:54:20 Pith

Evento de vinculación a la forma en el lienzo

Respuesta

Cuestiones relacionadas