Question

我使用HTML画布来创建枪支模型以及控制按钮（例如开火按钮），但是一旦向下滚动页面按钮就不起作用，按钮仅在滚动到页面顶部时起作用。有什么想法吗？

我使用以下代码检测点击次数/翻转次数 -

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

在计算鼠标位置时，您必须考虑画布元素滚动的距离。

在考虑滚动后，您可以使用getBoundingClientRect来获取画布的最高位置。

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

然后您可以像这样准确计算画布中的鼠标位置：

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

如果您计算offsetX＆amp; offsetY仅响应窗口的滚动事件。这样，您就不必为每个鼠标事件执行getBoundingClientRect。

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

HTML5画布 - 向下滚动页面时按钮不起作用

1 个答案: