HTML5 Canvas 中的图像点击事件

Question

我有一个 HTML5 画布，我在其中添加了一个图像，我想调用图像的单击事件，但事件不会触发。 我正在编写一个 html 代码和一些 jqmobile 的代码

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

Answer 1

现在我了解您要实现的目标，您想将图像放在画布中，然后使用 jquery 查看单击图像的时间。 好吧，可悲的是，它不是这样工作的。 画布中的图像不再是 dom 元素，只有画布本身是一个。 这意味着您可以调用：

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

但你不能打电话

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

因为 #canvasImage 不存在，即使原始图像是 dom 节点。 如果您的项目真的没有其他方法，fabricjs 可能会有所帮助：

http://fabricjs.com/

Answer 2

您不能在画布上绘制的图像或形状上添加事件监听器，因此您必须在绘制图像的像素上添加事件监听器，例如：

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

});

Answer 3

图像是在画布上绘制的，您不能将其视为元素。

你可以像检查点击的坐标一样，如果它位于你的图像上。
这是一个示例。

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

Answer 4

好吧，您实际上可以使用一种解决方法， converting您的图像转换为矢量SVG图像（您可以使用PNGtoSVG来实现）

然后，您需要从 svg 文件中提取path （如果您在文本编辑器中打开 SVG 文件中的'd'属性）并在画布中使用它：

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

const yourImg = new Path2D('d'); // extracted path as parameter
ctx.fill(yourImg);

// Listen for click event
canvas.addEventListener('click', (e) => {

   // See if it lies inside the given path
   if (ctx.isPointInPath(yourImg, e.offsetX, e.offsetY)) 
       alert('Hello'); // clicked on your Image

   // Draw Image
   ctx.clearRect(0, 0, canvas.width, canvas.height);
   ctx.fill(yourImg);
});

它使用 Path2D() 创建一个可跟踪元素，然后精确检查该元素是否在内部被点击、事件并原则上应满足 OP 的需求。

 const canvas = document.getElementById('canvas'); canvas.style.border = 'solid 1px #000'; const ctx = canvas.getContext('2d'); const yourImg = new Path2D('M17.21 9l-4.38-6.56c-.19-.28-.51-.42-.83-.42-.32 0-.64.14-.83.43L6.79 9H2c-.55 0-1 .45-1 1 0 .09.01.18.04.27l2.54 9.27c.23.84 1 1.46 1.92 1.46h13c.92 0 1.69-.62 1.93-1.46l2.54-9.27L23 10c0-.55-.45-1-1-1h-4.79zM9 9l3-4.4L15 9H9zm3 8c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z'); ctx.fill(yourImg); canvas.addEventListener('click', (e) => { if (ctx.isPointInPath(yourImg, e.offsetX, e.offsetY)) { alert('Hello') } ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.fill(yourImg); });

 <h4>Try clicking the 'bucket' icon:</h4> <canvas id="canvas" width="400" height="250"></canvas>

Answer 5

似乎缺少单击事件的侦听器。 这样做怎么样：

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