首页 专题 H5案例 前端导航 UI框架

物体对象

作者:TG 日期: 2016-06-05 阅读: 526
在前面的《用户交互》和《动画》两章中,我们分别介绍了用户交互事件,包括:鼠标事件,触摸事件和键盘事件,还有如何加载多张图片,如何用window.requestAnimationFrame()来执行动画。

接下来,我们介绍一下在动画中的一个重要角色:物体。要使用物体对象,我们就必须捕获到物体对象。

不过,在canvas中,我们不能像在DOM中那样进行操作,为什么呢?

因为在Canvas里,所有图形都绘制在帧上,绘制方法不会将绘制好的图形元素作为一个返回值输出,所以JavaScript也无法获取到已经绘制好的图形元素。
比如,我们在canvas中画了一个矩形

cxt.fillRect(20,50,50,50);

可是,当我们打开浏览器的开发者工具,我们会看到canvas标签内部并没有增加任何内容,而在js里获取到的canvas元素以及当前的上下文,也都没有任何表示新增图形的内容。

所以,我们现在只能把事件绑定到canvas这一层上,如果我们想进一步深入,识别点击发生在Canvas内部的哪一个图形上,就需要增加代码来进行处理。

基本思路是:给Canvas元素绑定事件,当事件发生时,检查事件对象的位置,然后检查哪些图形覆盖了该位置。

1.1 矩形判别法


我们用一张图来看看吧,红色块代表物体(body),(x,y)为它的左上角坐标,width是它的宽,height是它的高。当鼠标点击或手指触摸在红色块上,就表示我们捕获了这个物体,那我们如何判断鼠标或手指落在上面呢?
只要满足以下四个条件

mouse.x > body.x

mouse.x < body.x + body.width

mouse.y > body.y

mouse.y < body.y + body.height


1.2 圆形判别法


其实,如果是较小的圆形,我们也可以采取矩形判别法的四个判断条件。但是,如果你要很精确的话,那么我们可以根据圆形的半径,也就是鼠标位置距离圆心的距离来判断。

dx = mouse.x -body.x; dy = mouse.y - body.y; dist = Math.sqrt(dx*dx + dy*dy) if(dist < body.radius){  

    //获取到物体

 }








关注”全栈技术杂货铺“

全栈技术杂货铺