HTML5 Canvas的事件处理介绍


Posted in HTML / CSS onApril 24, 2015

DOM是Web前端领域非常重要的组成部分,不仅在处理HTML元素时会用到DOM,图形编程也同样会用到。比如SVG绘图,各种图形都是以DOM节点的形式插入到页面中,这就意味着可以使用DOM方法对图形进行操作。比如有一个<path id="p1">元素,可以直接用jquery增加click事件$('#p1').click(function(){…})"。然而这种DOM处理方法在HTML5的Canvas里不再适用,Canvas使用的是另外一套机制,无论在Canvas上绘制多少图形,Canvas都是一个整体,图形本身实际都是Canvas的一部分,不可单独获取,所以也就无法直接给某个图形增加JavaScript事件。

Canvas的限制

在Canvas里,所有图形都绘制在帧上,绘制方法不会将绘制好的图形元素作为一个返回值输出,js也无法获取到已经绘制好的图形元素。比如:

复制代码
代码如下:

cvs = document.getElementById('mycanvas');
ctx = canvas.getContext('2d');
theRect = ctx.rect(10, 10, 100, 100);
ctx.stroke();
console.log(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 = document.getElementById('mycanvas');
cvs.addEventListener('click', function(e){
//...
}, false);

接下来需要判断事件对象发生的位置,事件对象e的layerX和layerY属性表示Canvas内部坐标系中的坐标。但是这个属性Opera不支持,Safari也打算移除,所以要做一些兼容写法:

复制代码
代码如下:

function getEventPosition(ev){
var x, y;
if (ev.layerX || ev.layerX == 0) {
x = ev.layerX;
y = ev.layerY;
} else if (ev.offsetX || ev.offsetX == 0) { // Opera
x = ev.offsetX;
y = ev.offsetY;
}
return {x: x, y: y};
}
//注:使用上面这个函数,需要给Canvas元素的position设为absolute。

现在有了事件对象的坐标位置,下面就要判断Canvas里的图形,有哪些覆盖了这个坐标。

isPointInPath方法

Canvas的isPointInPath方法可以判断当前上下文的图形是否覆盖了某个坐标,比如:

复制代码
代码如下:

cvs = document.getElementById('mycanvas');
ctx = canvas.getContext('2d');
ctx.rect(10, 10, 100, 100);
ctx.stroke();
ctx.isPointInPath(50, 50); //true
ctx.isPointInPath(5, 5); //false

接下来增加一个事件判断,就可以判断一个点击事件是否发生在矩形上:

复制代码
代码如下:

cvs.addEventListener('click', function(e){
p = getEventPosition(e);
if(ctx.isPointInPath(p.x, p.y)){
//点击了矩形
}
}, false);

以上就是处理Canvas事件的基本方法,但是上面的代码还有局限,由于isPointInPath方法仅判断当前上下文环境中的路径,所以当Canvas里已经绘制了多个图形时,仅能以最后一个图形的上下文环境来判断事件,比如:
复制代码
代码如下:

cvs = document.getElementById('mycanvas');
ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.rect(10, 10, 100, 100);
ctx.stroke();
ctx.isPointInPath(20, 20); //true
ctx.beginPath();
ctx.rect(110, 110, 100, 100);
ctx.stroke();
ctx.isPointInPath(150, 150); //true
ctx.isPointInPath(20, 20); //false

从上面这段代码可以看到,isPointInPath方法仅能识别当前上下文环境里的图形路径,而之前绘制的路径,无法回溯判断。这种问题的解决方法是:当点击事件发生时,重绘所有图形,每绘制一个就使用isPointInPath方法,判断事件坐标是否在该图形覆盖范围内。

循环重绘和事件冒泡

为了实现循环重绘,所以就要将图形的基本参数事先保存下来:

复制代码
代码如下:

arr = [
{x:10, y:10, width:100, height:100},
{x:110, y:110, width:100, height:100}
];

cvs = document.getElementById('mycanvas');
ctx = canvas.getContext('2d');

draw();

function draw(){
ctx.clearRech(0, 0, cvs.width, cvs.height);
arr.forEach(function(v){
ctx.beginPath();
ctx.rect(v.x, v.y, v.width, v.height);
ctx.stroke();
});
}


上面的代码事先将两个矩形的基本参数保存下来,每次调用draw方法,就会循环调用这些基本参数,用于绘制两个矩形。这里还使用了clearRect方法,用于在重绘时清空画布。接下来要做的是增加事件代理,以及在重绘时对每一个上下文环境使用isPointInPath方法:

复制代码
代码如下:

cvs.addEventListener('click', function(e){
p = getEventPosition(e);
draw(p);
}, false);

事件发生时,将事件对象的坐标传给draw方法处理。这里还需要对draw方法做一些小改动:

复制代码
代码如下:

function draw(p){
var who = [];
ctx.clearRech(0, 0, cvs.width, cvs.height);
arr.forEach(function(v, i){
ctx.beginPath();
ctx.rect(v.x, v.y, v.width, v.height);
ctx.stroke();
if(p && ctx.isPointInPath(p.x, p.y)){
//如果传入了事件坐标,就用isPointInPath判断一下
//如果当前环境覆盖了该坐标,就将当前环境的index值放到数组里
who.push(i);
}
});
//根据数组中的index值,可以到arr数组中找到相应的元素。
return who;
}

在上面代码中,点击事件发生时draw方法会执行一次重绘,并在重绘过程中检查每一个图形是否覆盖了事件坐标,如果判断为真,则视为点击了该图形,并将该图形的index值放入数组,最后将数组作为draw方法的返回值。在这种处理机制下,如果Canvas里有N个图形,它们有一部分是重叠的,而点击事件恰巧发生在这个重叠区域上,那么draw方法的返回数组里会有N个成员。这时就有点类似事件冒泡的情况,数组的最后一个成员处于Canvas最上层,而第一个成员则在最下层,我们可以视为最上层的成员是e.target,而其他成员则是冒泡过程中传递到的节点。当然这只是最简单的一种处理方法,如果真要模拟DOM处理,还要给图形设置父子级关系。

以上就是Canvas事件处理的基本方法。在实际运用时,如何缓存图形参数,如何进行循环重绘,以及如何处理事件冒泡,都还需要根据实际情况花一些心思去处理。另外,click是一个比较好处理的事件,相对麻烦的是mouseover、mouseout和mousemove这些事件,由于鼠标一旦进入Canvas元素,始终发生的都是mousemove事件,所以如果要给某个图形单独设置mouseover或mouseout,还需要记录鼠标移动的路线,给图形设置进出状态。由于处理的步骤变得复杂起来,必须对性能问题提高关注。

HTML / CSS 相关文章推荐
CSS3悬停效果案例应用
Nov 21 HTML / CSS
用React加CSS3实现微信拆红包动画效果
Mar 13 HTML / CSS
浅谈CSS3中的变形功能-transform功能
Dec 27 HTML / CSS
CSS3 实现雷达扫描图的示例代码
Sep 21 HTML / CSS
html5利用canvas绘画二级树形结构图的示例
Sep 27 HTML / CSS
HTML5的结构和语义(4):语义性的内联元素
Oct 17 HTML / CSS
HTML5自定义data-* data(obj)属性和jquery的data()方法的使用
Dec 13 HTML / CSS
Html5游戏开发之乒乓Ping Pong游戏示例(二)
Jan 21 HTML / CSS
HTMl5的存储方式sessionStorage和localStorage详解
Mar 18 HTML / CSS
canvas 阴影和图形变换的示例代码
Jan 02 HTML / CSS
详解CSS不定宽溢出文本适配滚动
May 24 HTML / CSS
详解CSS故障艺术
May 25 HTML / CSS
HTML5 audio标签使用js进行播放控制实例
Apr 24 #HTML / CSS
HTML5全屏(Fullscreen)API详细介绍
Apr 24 #HTML / CSS
HTML5 video播放器全屏(fullScreen)方法实例
Apr 24 #HTML / CSS
HTML5 video标签(播放器)学习笔记(二):播放控制
Apr 24 #HTML / CSS
HTML5 video标签(播放器)学习笔记(一):使用入门
Apr 24 #HTML / CSS
HTML5 Video标签的属性、方法和事件汇总介绍
Apr 24 #HTML / CSS
HTML5 Canvas中绘制椭圆的4种方法
Apr 24 #HTML / CSS
You might like
不用数据库的多用户文件自由上传投票系统(1)
2006/10/09 PHP
试用php中oci8扩展
2015/06/18 PHP
php根据命令行参数生成配置文件详解
2019/03/15 PHP
js获取变量
2006/08/24 Javascript
parseInt parseFloat js字符串转换数字
2010/08/01 Javascript
Jquery实现仿新浪微博获取文本框能输入的字数代码
2013/02/22 Javascript
Google官方支持的NodeJS访问API,提供后台登录授权
2014/07/29 NodeJs
javascript给span标签赋值的方法
2015/11/26 Javascript
详解如何使用babel进行es6文件的编译
2018/05/29 Javascript
vue项目中使用百度地图的方法
2018/06/08 Javascript
vue2.0 可折叠列表 v-for循环展示的实例
2018/09/07 Javascript
axios对请求各种异常情况处理的封装方法
2018/09/25 Javascript
在vue中v-bind使用三目运算符绑定class的实例
2018/09/29 Javascript
解决node-sass偶尔安装失败的方法小结
2018/12/05 Javascript
Vue.js的模板语法详解
2020/02/16 Javascript
vue使用video插件vue-video-player详解
2020/10/23 Javascript
python通过ftplib登录到ftp服务器的方法
2015/05/08 Python
Python 正则表达式入门(中级篇)
2016/12/07 Python
更改Ubuntu默认python版本的两种方法python-&gt; Anaconda
2016/12/18 Python
关于Python中空格字符串处理的技巧总结
2017/08/10 Python
python画一个玫瑰和一个爱心
2020/08/18 Python
Python实现对adb命令封装
2020/03/06 Python
Python while true实现爬虫定时任务
2020/06/08 Python
python实现感知机模型的示例
2020/09/30 Python
什么是Assembly(程序集)
2014/09/14 面试题
同步和异步有何异同,在什么情况下分别使用他们
2013/04/09 面试题
程序员岗位职责
2013/11/11 职场文书
后进生转化工作制度
2014/01/17 职场文书
教师年度考核自我鉴定
2014/01/19 职场文书
大学理论知识学习自我鉴定
2014/04/28 职场文书
暑期培训班招生方案
2014/08/26 职场文书
初婚未育证明样本
2014/10/24 职场文书
2014年教学工作总结
2014/11/13 职场文书
2015国际残疾人日活动总结
2015/03/24 职场文书
2019年干货:自我鉴定
2019/03/25 职场文书
入党心得体会
2019/06/20 职场文书