1

我无法让 DOM Image onclick 事件正常工作。

var context = document.getElementById('canvas').getContext('2d');

var image = new Image();
image.src = "foo.png"
image.onclick = function(e) { console.log("clicked"); }


setInterval(function() {

context.drawImage(image, 100, 100, 50, 50);    

};

为什么单击图像时没有收到日志消息。在开发人员工具中，我可以看到图像的 onclick 函数不为空。

4

4 回答 4

2

是的，穆萨所说的……以及其他一些事情。

对您的代码的一些更改

  • Image.src="foo.png" 应该在 image.onclick 函数之后
  • Context.drawImage 应该在 image.onclick 函数中
  • 据我所知，不需要 setInterval

尝试这个：

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ background-color: ivory; }
    canvas{border:1px solid red;}
</style>

<script>
$(function(){

    var context=document.getElementById("canvas").getContext("2d");

    var image=new Image();
    image.onload=function(){
       context.drawImage(image,0,0);
    }
    image.src="http://i.imgur.com/nJiIJIJ.png";

    document.getElementById("canvas").addEventListener("click", function(){console.log("clicked");}, false);


}); // end $(function(){});
</script>

</head>

<body>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>
于 2013-03-11T04:51:26.087 回答
1

您不能为添加到画布中的特定图像设置 onclick。您可以单独为整个画布设置 onclick，因此您必须使用任何第三方 js，否则您应该进行一些计算，发现您单击了画布的图像..

于 2013-03-11T05:07:23.677 回答
1

其他用户是对的。

您在画布上绘制的图像是一个 DOM 元素，但它呈现在未存储在 DOM 中的位置。

这并不意味着您可以访问它的位置并将其与鼠标位置进行比较。

我在这里使用了一个外部库，但它可以满足您的需要：http: //jsfiddle.net/Saturnix/cygUH/

这是使用的库。

由于我无法在不发布代码的情况下发布到 jsfiddles 的链接，因此这是我为您编写的脚本。

function demo(g) {
    g.ctx.font = "bold 16px Arial";

    g.draw = function () {
        g.ctx.clearRect(0, 0, g.width, g.height)

        var posX = 0;
        var posY = 0;
        g.ctx.drawImage(image, posX, posY);

        if (g.mouseX > posX && g.mouseX < image.width &&
            g.mouseY > posY && g.mouseY < image.height &&
            g.mousePressed)
        g.ctx.fillText("You're clicking the image!", g.mouseX, g.mouseY);

    }
}
于 2013-03-11T14:47:39.967 回答
1

您可以将光线（在画布上单击）投射到画布中，并手动测试图像是否与光线相交。你应该写一个

objectsUnderPoint( x, y );

函数返回与射线在 x、y 处相交的所有图像的数组。

这也是通常在 3D 引擎中完成的方式。您当然需要将图像位置保留为图像的属性以进行交叉测试。

于 2014-07-23T18:09:35.957 回答