html5：如何处理画布儿童点击事件？

<canvas id="myCanvas" width="578" height="400"></canvas> 
<script> 
    var canvas = document.getElementById('myCanvas'); 
    var context = canvas.getContext('2d'); 
    var imageObj = new Image(); 
    imageObj.onload = function() { 
    context.drawImage(imageObj, 128, 128); 
    }; 
    imageObj.src = 'http://xxx/yyy/zzz.jpg'; 
</script>

我怎样才能得到通知或与事件处理程序挂钩，当点击imageObj，画布对象（不是画布）的孩子是什么时候？html5：如何处理画布儿童点击事件？

来源

2015-04-01 David

做到这一点的方式，是通过处理画布的单击事件，然后找出自己被点击什么画布的一部分：

canvas.addEventListener("mouseup", doMouseClick, false); 

var doMouseClick = function(event) 
{ 
    //Some magic to have the exact coordinates in the canvas: 
    var clickPos = { 
    x : event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft - Math.floor($(canvas).offset().left);, 
    y : event.clientY + document.body.scrollTop + document.documentElement.scrollTop - Math.floor($(canvas).offset().top) + 1 
    } 

    //check the image 
    if (clickPos.x > 128 && clickPos.y < 128 + imageObj.width 
     && clickPos.y > 128 && clickPos.y < 128 + imageObj.height){ 
     console.log("Oh boy! Someone clicked the image!"); 
    } 

}

为什么我们要做这种方式的原因，是因为你不会将你的图像作为孩子“添加”到画布上，而是在画布上“画”它。画布仅显示像素，并不知道实际绘制的是什么。

来源

2015-04-01 12:42:38 Jordumus

你最好使用getBoudingClientRect检索画布位置。 https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect – GameAlchemist 2015-04-01 12:53:06

如何将图像添加为画布的子项？谢谢！ – David 2015-04-01 13:02:04

@大卫，你不能“添加它作为一个孩子”。这不是它的工作方式。你必须按照上面的方式来检查它。如果您希望imageObj在我的功能中可用，请将其设为全局变量。 – Jordumus 2015-04-01 13:04:04

html5：如何处理画布儿童点击事件？

回答

相关问题