Immagine Fare clic su evento in HTML5 Canvas

Ho una tela HTML5 e ho aggiunto un'immagine al suo interno e voglio chiamare click evento di immagine ma l'evento non si attiva. Sto scrivendo un codice html e un codice di jqmobileImmagine Fare clic su evento in HTML5 Canvas

<html> 
<head> 
    <script src="jquery-1.10.2.min.js"></script> 
    <script src="jquery.mobile-1.2.1.js"></script> 
    <script src="jquery.mobile-1.2.1.min.js"></script> 
</head> 
<body> 
    <canvas id="canvas1" style="position: absolute; left: 0px; top: 0px;" width="1280" height="960">This text is displayed if your browser does not shown. 
    </canvas> 
    <script> 
     $(function() { 

      var ctx = document.getElementById("canvas1").getContext("2d"); 
      var imgBasket = new Image(); 
      imgBasket.id = "imgBasket"; 
      imgBasket.src = "Basket.png"; 
      ctx.drawImage(imgBasket, 580, 260, 200, 200); 


      //this jquery mobile event not working in canvas 
      $("document").on("vclick", "#imgBasket", function() { 
       alert("Hello"); 
      }); 
     }); 
    </script> 
</body> 
</html>

fonte

2014-04-07 Rizwan Qureshi

che cosa è un VCLIC? è qualcosa che usa jquery mobile? O è solo che hai un errore di battitura in "click"? Ciò potrebbe causare il problema –

Inoltre, puoi creare un'immagine, dargli un ID e poi posizionarlo nella tela, ma le immagini nella tela non hanno ID, penso che –

Ora capisco quello che si sta cercando di ottenere, si vuole mettere l'immagine in una tela e quindi utilizzare jQuery per vedere quando si fa clic sull'immagine. Beh, purtroppo, non funziona così. Le immagini nella tela non sono più elementi dom, solo la tela stessa è una sola. Ciò significa che è possibile chiamare:

$('#canvas').on('click', function() {});

, ma non si può chiamare

$("document").on("click", "#canvasImage", function() {});

Perché il #canvasImage non c'è, anche se l'immagine originale era un nodo DOM. Se c'è davvero altro modo di andare con il vostro progetto, fabricjs potrebbero aiutare:

http://fabricjs.com/

fonte

2014-04-07 11:20:35

grazie mille Jonas Grumann. Funziona per me –

Yay per fabricjs! –

-1

Sembra che l'ascoltatore per l'evento click è mancante. Che dire di farlo in questo modo:

<!DOCTYPE html><html> 
    <head><title>Canvas HTML5 Test Page</title> 
    <script> 
     function newCanvasListen() { 
      var canvas = document.getElementById("canvas1"); 
      var ctx = canvas.getContext("2d"); 

      var imgBasket = new Image(); 
      imgBasket.src = "Basket.png"; 
      imgBasket.id = "imgBasket"; 

      imgBasket.onload = function() { 
       var imageBasket = ctx.drawImage(imgBasket, 0, 0); 
       ctx.fillStyle = imageBasket; 
      }; 

      canvas.addEventListener("mousedown", doMouseDown, false); 

     } 
     function doMouseDown(event) { 
      alert("Hello"); 
     } 
    </script> 
    </head> 
    <body onLoad=newCanvasListen()> 
    <canvas width="256" HEIGHT="256" ID="canvas1"> 
     This text is displayed if your browser does not shown. 
    </canvas> 
    </body> 
</html>

fonte

2014-04-07 10:44:09 merosss

grazie merosss, ma non funziona –

Cosa non funziona? Ho testato il codice sul mio browser e convalidato su W3C e everithing era ok, viene visualizzato popup. Puoi essere un po 'più specifico su quale è il problema? – merosss

Ho appena aggiunto il codice per visualizzare anche il cestino se questo era il problema;) – merosss

immagine è dipinta su tela, non si può considerare come un elemento.

puoi farlo come controllare le coordinate del clic, se si trova sull'immagine o no.
qui è un esempio.

var canvas = document.getElementById("canvas1"); 
canvas.addEventListener("mousedown", clicked, false); 

function clicked(e){ 
    e.preventDefault(); 
    var x = e.clientX; 
    var y = e.clientY; 

    if(x>580 && x<780 && y>260 && y>460){ //780 = 580+(200) <- image width 
     alert('Hello'); 
    } 
}

fonte

2014-04-07 11:22:05 singhiskng

Questa è una soluzione totalmente poco pratica quando si hanno tonnellate di immagini generate in modo programmatico. Come suggeriresti di gestirlo? – Axl

Non è possibile aggiungere EventListener sull'immagine o la forma disegnati su tela quindi bisogna aggiungere EventListener sui pixel in cui è stato drawed l'immagine significa, per esempio:

var img=document.getElementById("img1"); 
//ctx.drawImage(img,x,y,height,width);   
ctx.drawImage(img,10,10,20,20); 
    $("#canvas1").on("click",function(event){ 

var totalOffsetX = 0; 
var totalOffsetY = 0; 
var canvasX = 0; 
var canvasY = 0; 
var currentElement = this; 

do{ 
    totalOffsetX += currentElement.offsetLeft - currentElement.scrollLeft; 
    totalOffsetY += currentElement.offsetTop - currentElement.scrollTop; 
} 
while(currentElement = currentElement.offsetParent) 

canvasX = event.pageX - totalOffsetX; 
canvasY = event.pageY - totalOffsetY; 

    //Image x y cordinates adding width and height 

if((canvasX>=10 && canvasX<=30) && (canvasY>=10 && canvasY<=30)) 
     { 
      alert("canvasX:"+canvasX+" "+"canvasY:"+canvasY); 
     } 

});

fonte

2014-04-07 11:49:50 pareshm

Immagine Fare clic su evento in HTML5 Canvas

risposta

Problemi correlati