Hình ảnh Nhấp vào Sự kiện trong HTML5 Canvas

Tôi có canvas HTML5 và tôi đã thêm hình ảnh vào đó và tôi muốn gọi sự kiện nhấp chuột của hình ảnh nhưng sự kiện không kích hoạt. Tôi viết một mã html và một số mã của jqmobileHình ảnh Nhấp vào Sự kiện trong 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>

Nguồn

2014-04-07 Rizwan Qureshi

một vclick là gì? nó là một cái gì đó jquery điện thoại di động sử dụng? Hoặc chỉ là bạn có một lỗi đánh máy trong "bấm"? Điều đó có thể gây ra vấn đề –

Ngoài ra, bạn tạo một hình ảnh, cung cấp cho nó một id và sau đó đặt nó trong canvas, nhưng hình ảnh trong canvas không có id, tôi nghĩ rằng –

Bây giờ tôi hiểu những gì bạn đang cố gắng để đạt được, bạn muốn đặt một hình ảnh trong một khung và sau đó sử dụng jquery để xem khi bạn nhấp vào hình ảnh. Vâng, thật đáng buồn, nó không hoạt động như thế này. Hình ảnh trong canvas không còn là phần tử dom, chỉ bản thân canvas là một. Điều này có nghĩa bạn có thể gọi:

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

nhưng bạn không thể gọi

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

Vì #canvasImage là không có, ngay cả khi hình ảnh ban đầu là một nút dom. Nếu có thực sự không có cách nào khác đi với dự án của bạn, fabricjs có thể giúp:

http://fabricjs.com/

Nguồn

2014-04-07 11:20:35

cảm ơn bạn rất nhiều Jonas Grumann. Nó hoạt động cho tôi –

Yay cho fabricjs! –

-1

Nó có vẻ như các nghe cho sự kiện nhấp chuột là mất tích. Thế còn làm nó theo cách này:

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

Nguồn

2014-04-07 10:44:09 merosss

cảm ơn bạn merosss, nhưng nó không hoạt động –

Điều gì không hoạt động? Tôi đã thử nghiệm mã trên trình duyệt của tôi và xác nhận trong ngày W3C và everithing là ok, popup được hiển thị. Bạn có thể cụ thể hơn một chút về vấn đề gì không? – merosss

Tôi vừa thêm mã để hiển thị cũng là giỏ nếu đó là vấn đề;) – merosss

hình ảnh được vẽ trên vải, bạn không thể coi đây là một yếu tố.

bạn có thể làm điều đó như kiểm tra tọa độ nhấp chuột, nếu nó nằm trên ảnh của bạn hay không.
đây là mẫu.

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

Nguồn

2014-04-07 11:22:05 singhiskng

Đây là một giải pháp hoàn toàn không thực tế khi bạn có một tấn hình ảnh được tạo ra theo chương trình. Bạn đề nghị xử lý như thế nào? – Axl

Bạn không thể thêm eventlistener trên hình ảnh hoặc hình bạn drawed trên vải vì vậy bạn phải thêm eventlistener trên pixel mà bạn đã drawed hình ảnh nghĩa ví dụ:

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

});

Nguồn

2014-04-07 11:49:50 pareshm

Hình ảnh Nhấp vào Sự kiện trong HTML5 Canvas

Trả lời

Các vấn đề liên quan