एचटीएमएल 5 कैनवास

में छवि पर क्लिक करें मेरे पास एक HTML5 कैनवास है और मैंने इसमें एक छवि जोड़ दी है और मैं छवि के क्लिक ईवेंट को कॉल करना चाहता हूं लेकिन घटना आग नहीं है। मैं एक एचटीएमएल कोड और jqmobileएचटीएमएल 5 कैनवास

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

स्रोत

2014-04-07 Rizwan Qureshi

एक vclick क्या है? क्या यह कुछ jquery मोबाइल उपयोग करता है? या बस यह है कि आपके पास "क्लिक" में एक टाइपो है? इससे समस्या हो सकती है –

इसके अलावा, आप एक छवि बनाते हैं, इसे एक आईडी देते हैं और फिर इसे कैनवास में रखते हैं, लेकिन कैनवास में छवियों में आईडी नहीं हैं, मुझे लगता है कि –

अब मैं समझता हूँ कि आप क्या हासिल करने की कोशिश कर रहे हैं, आप एक कैनवास में एक छवि रखा और फिर jQuery का उपयोग करके देखें कि आपने छवि पर क्लिक किया करना चाहते हैं। खैर, दुख की बात है, यह इस तरह काम नहीं करता है। कैनवास में छवियां अब डोम तत्व नहीं हैं, केवल कैनवास ही एक है। इसका मतलब है आप कॉल कर सकते हैं:

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

लेकिन आप कॉल नहीं कर सकते

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

क्योंकि #canvasImage वहाँ नहीं है, भले ही मूल छवि एक डोम नोड था। यदि बहुत वास्तव में अपनी परियोजना के साथ जाने का कोई दूसरा रास्ता नहीं, fabricjs मदद कर सकता है:

http://fabricjs.com/

स्रोत

2014-04-07 11:20:35

आपको बहुत धन्यवाद जोनास ग्रूमैन। यह मेरे लिए काम करता है –

कपड़े के लिए यय! –

-1

यह क्लिक करें घटना के लिए श्रोता की तरह लगता है याद आ रही है में से कुछ कोड लिख रहा हूँ। क्या यह इस तरह से करने के बारे में:

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

स्रोत

2014-04-07 10:44:09 merosss

आपको धन्यवाद, लेकिन यह –

काम नहीं करता है क्या काम नहीं कर रहा है मैंने अपने ब्राउज़र पर कोड का परीक्षण किया है और डब्ल्यू 3 सी पर सत्यापन किया है और कभी-कभी ठीक है, पॉपअप प्रदर्शित होता है। क्या आप समस्या के बारे में थोड़ा और विशिष्ट हो सकते हैं? – merosss

मैंने टोकरी को प्रदर्शित करने के लिए कोड भी जोड़ा है यदि वह समस्या थी;) – merosss

छवि कैनवास पर चित्रित है, आप इसे एक तत्व के रूप में नहीं माना जा सकता है।

आप इसे क्लिक के समन्वय की जांच करने की तरह कर सकते हैं, अगर यह आपकी छवि पर है या नहीं।
यहां एक नमूना है।

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

स्रोत

2014-04-07 11:22:05 singhiskng

यह एक पूरी तरह से अव्यवहारिक समाधान है जब आपके पास छवियों का एक टन होता है जो प्रोग्रामेटिक रूप से उत्पन्न होते हैं। आप इसे संभालने का सुझाव कैसे देंगे? – Axl

आप नहीं eventlistener छवि पर जोड़ सकते हैं या आकार आप कैनवास ताकि आप पिक्सल जहाँ आप छवि drawed है पर eventlistener जोड़ने के लिए पर drawed कर सकते हैं, उदाहरण के लिए मतलब है:

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

});

स्रोत

2014-04-07 11:49:50 pareshm

एचटीएमएल 5 कैनवास

उत्तर

संबंधित मुद्दे