24-播放暂停按钮_检测单击并获取位置

7.5.6　播放/暂停按钮：检测单击并获取位置

实现播放/暂停按钮的第一个步骤是为mousemove事件创建一个处理函数。这个函数其实就是本书前面介绍的如何追踪鼠标移动的标准代码，实现跨浏览器部分的代码取决于浏览器支持何种DOM属性：pageX/pageY还是e.clienX/e.clientY。每当鼠标在画布上移动时，就会调用这个函数以更新mouseX和mouseY变量。这些变量定义在整个canvasApp()作用域中，因此，所有在作用域中的函数都可以访问它们。

function eventMouseMove(event) {
　　var x;
　　var y;
 if (event.pageX || event.pageY) {
　　　x = event.pageX;
　　　y = event.pageY;
 }
 else {
　　　x = e.clientX + document.body.scrollLeft +
　　　document.documentElement.scrollLeft;
　　　y = e.clientY + document.body.scrollTop +
　　　　　document.documentElement.scrollTop;
 }
 x -= theCanvas.offsetLeft;
 y -= theCanvas.offsetTop;
 mouseX=x;
 mouseY=y;
}

现在，创建eventMouseUp()处理函数。当用户单击鼠标并释放按钮后，程序会调用这个函数。为什么不在单击鼠标时调用，而在之后调用呢？原因是，通常将鼠标按下事件mousedown作为一个“拖动”操作的开始点（稍后会向读者展示）。

和上一章的CH6EX11.html一样，首先需要测试变量timeWaited是否大于buttonWait的值：如果大于，则可以接受一个新的mouseUp事件；否则，不接受事件。

这个函数的核心功能是单击测试，也就是一个点与按钮做碰撞检测。第6章在视频拼图游戏（CH6EX10.html）中创建按钮时对此做过介绍。值得注意的是，在这里使用表示按钮x轴和y轴坐标位置的变量（playX，playY）和表示按钮宽度、高度的变量（bW，bH）来确定检测区域的边界。如果鼠标指针在这个边界中，就知道按钮被单击了。

function eventMouseUp(event){
　 if (timeWaited >= buttonW
　　　 timeWaited = 0;
　　　 if ( (mouseY >= playY)&& (mouseY <= playY+bH)&& (mouseX >= playX)&&
　　　　　　(mouseX <= playX+bW)){

提示

如果一个图像叠放在另一个图像上面，则需要存储类似于叠放次序或z-index的值，以便得知每次是哪个图像在上面并被单击了。由于画布是在实时模式下工作的，因此读者可以仿照介绍的其他功能自行定制。

单击检测之后，需要决定是应该调用play()方法还是pause()方法。两者都是audioElement变量所代表的HTMLAudioElement对象的方法。要确定需要调用哪个方法，仅需要查看音频是否暂停，也就是查看audioElement.paused属性。如果暂停，就调用play()方法；否则就调用pause()方法。注意，无论pause()是否被调用，只要音频没有在播放，HTMLAudioElement.paused属性就被设置为true。这就意味着，即使在程序启动时没有设置自动播放（autoplay）属性，也可以通过检测这个属性的值来显示正确的按钮。

　　　if (audioElement.paused){
　　　　 audioElement.play();
　　　} else {
　　　　 audioElement.pause();
　　　}
　  }
  }
}

现在，需要在drawScreen()函数中选择显示哪个按钮：是代表播放的绿色箭头，还是代表暂停的双竖线。播放按钮在音频暂停时显示，而暂停按钮在播放音频时显示。这是一个“呼唤动作”按钮，所以显示的内容是单击后将要发生的事情，而不是音频元素当前的播放状态。之所以存在这个反向关系，是因为这是音频播放器的标准工作方式。

如果audioElement对象被暂停，就显示buttonSheet图像中第一行的图形（buttonSheet所代表的audiocontrols.png图片参考图7-5）。如果没被暂停，就显示其正下方第二行的图形。由于这个按钮的起始点的y轴坐标是32，因此可以在调用drawImage()函数时直接使用数值。

if (audioElement.paused){
　 context.drawImage(buttonSheet, 0,0,bW,bH,playX,playY,bW,bH);//显示播放按钮
} else {
　 context.drawImage(buttonSheet, 0,32,bW,bH,playX,playY,bW,bH); //显示暂停按钮
}

提示

需要说明的是，本应该用一个变量来代表buttonSheet中的位置值，但是这里使用了数值。这样做是为了帮助读者区分是在指定buttonSheet的像素位置，还是在计算放置元素的宽度和距离。^[1]