Image HTML5 Canvas'da Etkinlik Tıkla

Bir HTML5 tuvalim var ve ona bir resim ekledim ve resmin tıklama olayını çağırmak istiyorum ancak etkinlik patlamıyor. Bir html kodu ve jqmobileImage HTML5 Canvas'da Etkinlik Tıkla

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

kaynak

2014-04-07 Rizwan Qureshi

bir vclick nedir? JQuery mobil kullanır bir şey mi? Ya da sadece "tık" da yazım hatası var mı? Bu sorun neden olabilir –

Ayrıca, bir görüntü oluşturmak, bir kimlik vermek ve sonra tuvalde yerleştirmek, ancak tuvalinde görüntülerin kimlikleri yok, bence –

Şimdi size ulaşmak için çalışıyoruz anlamak, bir tuval bir resim koymadan ve sonra görüntü üzerinde tıklandığında görmek için jquery kullanmak istiyorum. Ne yazık ki, bu şekilde çalışmıyor. Tuvaldeki resimler artık dom elementleri değildir, sadece tuvalin kendisi birdir. Bu Arayabileceğin anlamı:

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

ama #canvasImage orijinal görüntü dom düğümü bile, yok Çünkü

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

diyemezsin. Projenizle gitme başka bir yolu gerçekten varsa fabricjs yardımcı olabilir:

http://fabricjs.com/

kaynak

2014-04-07 11:20:35

çok teşekkür ederim Jonas Grumann. Kumaşlar için bana –

Yay için çalışıyor! –

-1

O eksik tıklama etkinliğinde dinleyicisi gibi görünüyor bazı kod yazıyorum. bu şekilde yapıyor hakkında ne:

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

kaynak

2014-04-07 10:44:09 merosss

merosss teşekkür, ama işe yaramıyor –

Ne çalışmıyor? Tarayıcımdaki kodu test ettim ve W3C'de doğruladım ve everithing tamamdı, açılır pencere görüntülenir. Sorunun ne olduğuna biraz daha spesifik olabilir misiniz? – merosss

Sadece bu sorun varsa sepet görüntülemek için kodu ekledim;) – merosss

görüntü tuval üzerine boyanmış, bir element olarak kabul edilemez.

Görüntünüzde yer alıyorsa, tıklamanın koordinatlarını kontrol etmek gibi yapabilirsiniz.
burada bir örnektir.

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

kaynak

2014-04-07 11:22:05 singhiskng

Programlanmış bir ton görüntüye sahip olduğunuzda, bu tamamen pratik bir çözümdür. Bunu nasıl ele almayı önerirsiniz? – Axl

Görüntü üzerine EventListener ekleyin veya tuval böylece görüntüyü drawed olan piksellere EventListener eklemek zorunda üzerinde drawed biçimlendirmeyecektir örneğin şu anlama gelir:

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

});

kaynak

2014-04-07 11:49:50 pareshm

Image HTML5 Canvas'da Etkinlik Tıkla

cevap

İlgili konular