HTML5 Canvas - 向下滚动页面后按钮不起作用

Question

我使用 HTML canvas 创建了一个枪支模型以及控制按钮（例如开火按钮），但是向下滚动页面后按钮不起作用，只有按钮滚动到页面顶部时工作。有什么想法吗？

我使用以下代码来检测点击/滚动 -

function defineRollovers() {
    dartsOver = hudCheck(hudLX,dy-(60*units),colHalf,140*units);
    missilesOver = hudCheck(hudLX+colHalf,dy-(60*units),colHalf,140*units);
    explodeOver = hudCheck(dx,dy+(230*units),60*units,50*units);
    dartFireOver = hudCheck(dx+(70*units),dy+(230*units),60*units,50*units);
    missileFireOver = hudCheck(dx+(140*units),dy+(230*units),60*units,50*units);
    rotateYOver = hudCheck(dx-(116*units),fullY-(116*units),108*units,116*units);
    rotateXOver = hudCheck(dx-(224*units),fullY-  (116*units),108*units,116*units);
   }

Answer 1

计算鼠标位置时必须考虑 canvas 元素滚动的距离。

考虑到滚动后，您可以使用 getBoundingClientRect 获得 canvas 的顶部位置。

BB=canvas.getBoundingClientRect();
var offsetY = BB.top;

然后你可以像这样准确计算鼠标在你的 canvas 中的位置：

function handleMouseMove(e){

    // get the bounding box of the canvas
    // relative to the scrolled window
    BB=canvas.getBoundingClientRect();
    var offsetX=BB.left;
    var offsetY=BB.top;

    // get the mouse position relative to the canvas
    mouseX=parseInt(e.clientX-offsetX);
    mouseY=parseInt(e.clientY-offsetY);
}

如果仅在响应 window 的滚动事件时计算 offsetX 和 offsetY，您可以获得更好的性能。这样您就不必对每个鼠标事件都执行 getBoundingClientRect。

window.onscroll=function(e){
    var BB=canvas.getBoundingClientRect();
    offsetX=BB.left;
    offsetY=BB.top;
}

HTML5 Canvas - 向下滚动页面后按钮不起作用

HTML5 Canvas - Buttons doesn't work once scroll down the page

html

canvas