HTML5中Canvas的事件处理介绍
DOM是Web前端领域非常重要的组成部分,不仅在处理HTML元素时会用到DOM,图形编程也同样会用到。比如SVG绘图,各种图形都是以DOM节点的形式插入到页面中,这就意味着可以使用DOM方法对图形进行操作。比如有一个 元素,可以直接用jquery增加click事件$('#p1')k(function(){…})"。然而这种DOM处理方法在HTML5的Canvas里不再适用,Canvas使用的是另外一套机制,无论在Canvas上绘制多少图形,Canvas都是一个整体,图形本身实际都是Canvas的一部分,不可单独获取,所以也就无法直接给某个图形增加JavaScript事件。
Canvas的限制
在Canvas里,所有图形都绘制在帧上,绘制方法不会将绘制好的图形元素作为一个返回值输出,js也无法获取到已经绘制好的图形元素。比如:
代码如下:
cvs = lementById('mycanvas');
ctx = ontext('2d');
theRect = (10, 10, 100, 100);
ke();
(theRect); //undefined
这段代码在canvas标签里绘制了一个矩形,首先可以看到绘制图形的rect方法没有返回值。如果打开浏览器的开发者工具,还可以看到canvas标签内部没有增加任何内容,而在js里获取到的canvas元素以及当前的上下文,也都没有任何表示新增图形的内容。
所以,前端常用的dom方法在canvas里是不适用的。比如点击上面Canvas里的矩形,实际点击的是整个Canvas元素。
给Canvas元素绑定事件
由于事件只能达到Canvas元素这一层,所以,如果想进一步深入,识别点击发生在Canvas内部的哪一个图形上,就需要增加代码来进行处理。基本思路是:给Canvas元素绑定事件,当事件发生时,检查事件对象的位置,然后检查哪些图形覆盖了该位置。比如上面的例子里画过一个矩形,该矩形覆盖x轴10-110、y轴10-110的范围。只要鼠标点击在这个范围里,就可以视为点击了该矩形,也就可以手动触发矩形需要处理的点击事件。思路其实比较简单,但是实现起来还是稍微有点复杂。不仅要考虑这个判断过程的效率,有些地方还需要重新判断事件类型,设置要重新定义一个Canvas内部的捕获和冒泡机制。
首先要做的,是给Canvas元素绑定事件,比如Canvas内部某个图形要绑定点击事件,就需要通过Canvas元素代理该事件:
代码如下:
cvs = lementById('mycanvas');
ventListener('click', function(e){
//...
}, false);
接下来需要判断事件对象发生的位置,事件对象e的layerX和layerY属性表示Canvas内部坐标系中的坐标。但是这个属性Opera不支持,Safari也打算移除,所以要做一些兼容写法:
代码如下:
function getEventPosition(ev){
var x, y;
if (rX || rX == 0) {
x = rX;
y = rY;
} else if (etX || etX == 0) { // Opera
x = etX;
y = etY;
}
return {x: x, y: y};
}
//注:使用上面这个函数,需要给Canvas元素的position设为absolute。
现在有了事件对象的坐标位置,下面就要判断Canvas里的图形,有哪些覆盖了这个坐标。
isPointInPath方法
Canvas的isPointInPath方法可以判断当前上下文的图形是否覆盖了某个坐标,比如:
代码如下:
cvs = lementById('mycanvas');
ctx = ontext('2d');
(10, 10, 100, 100);
ke();
intInPath(50, 50); //true
intInPath(5, 5); //false
接下来增加一个事件判断,就可以判断一个点击事件是否发生在矩形上:
代码如下:
ventListener('click', function(e){
p = getEventPosition(e);
if(intInPath(p.x, p.y)){
//点击了矩形
}
}, false);
以上就是处理Canvas事件的基本方法,但是上面的代码还有局限,由于isPointInPath方法仅判断当前上下文环境中的路径,所以当Canvas里已经绘制了多个图形时,仅能以最后一个图形的上下文环境来判断事件,比如:
代码如下:
-
WAP的简介
WAP协议被设计用来在无线客户端(比如移动电话)上展示因特网内容。您应当具备的基础知识在继续学习之前,您需要对下面的知识有基本的了解:WWW,HTML以及有关网页构建的基础知识JavaScriptXML如果您希望首先学习这些项目,请在我们的首页访问这些教程。什么是WAP?无线产...
-
JavaScript数据结构与算法中集合的实现
集合(Set)说起集合,就想起刚进高中时,数学第一课讲的就是集合。因此在学习集合这种数据结构时,倍感亲切。集合的基本性质有一条:集合中元素是不重复的。因为这种性质,所以我们选用了对象来作为集合的容器,而非数组。虽然数组也能做到所有不重复,但终究过于繁琐,不如集...
-
ASP.NET新型的投票结果显示方法
一个投票功能模块少不了查看投票结果,用进度条显示各个投票结果可以起到一目了然的效果。以下是我的方法,请大家不吝赐教:1:做一张图片用于做进度条,只需要很小的一个图片就可以了,如高20px,宽1px。2:在要显示进度条的单元格中插入image控件,其imageUrl设置为已做好的...
-
如何理解Javascript的caller,callee,call,apply区别
在提到上述的概念之前,首先想说说javascript中函数的隐含参数:argumentsarguments该对象代表正在执行的函数和调用它的函数的参数。[function.]arguments[n]参数function:选项。当前正在执行的Function对象的名字。n:选项。要传递给Function对象的从0开始的参数值...