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：如何處理畫布兒童點擊事件？

回答

相關問題