码迷，mamicode.com
首页 > Web开发 > 详细

HTML5 Canvas 的事件处理---转

时间：2015-02-16 13:00:16      阅读：163      评论：0      收藏：0      [点我收藏+]

标签：

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也无法获取到已经绘制好的图形元素。比如：

 

  1. cvs = document.getElementById(‘mycanvas‘);<?xml:namespace prefix = o ns = "urn:schemas-microsoft-com:office:office" />
  3. cvs.addEventListener(‘click‘, function(e){
  5. //...
  7. }, false);
复制代码


这段代码在canvas标签里绘制了一个矩形，首先可以看到绘制图形的rect方法没有返回值。如果打开浏览器的开发者工具，还可以看到canvas标签内部没有增加任何内容，而在js里获取到的canvas元素以及当前的上下文，也都没有任何表示新增图形的内容。

所以，前端常用的dom方法在canvas里是不适用的。比如点击上面Canvas里的矩形，实际点击的是整个Canvas元素。

给Canvas元素绑定事件

 

由于事件只能达到Canvas元素这一层，所以，如果想进一步深入，识别点击发生在Canvas内部的哪一个图形上，就需要增加代码来进行处理。基本思路是：给Canvas元素绑定事件，当事件发生时，检查事件对象的位置，然后检查哪些图形覆盖了该位置。比如上面的例子里画过一个矩形，该矩形覆盖x轴10-110、y轴10-110的范围。只要鼠标点击在这个范围里，就可以视为点击了该矩形，也就可以手动触发矩形需要处理的点击事件。思路其实比较简单，但是实现起来还是稍微有点复杂。不仅要考虑这个判断过程的效率，有些地方还需要重新判断事件类型，设置要重新定义一个Canvas内部的捕获和冒泡机制。

 

首先要做的，是给Canvas元素绑定事件，比如Canvas内部某个图形要绑定点击事件，就需要通过Canvas元素代理该事件：

  1. cvs = document.getElementById(‘mycanvas‘);<?xml:namespace prefix = o ns = "urn:schemas-microsoft-com:office:office" />
  3. ctx = canvas.getContext(‘2d‘);
  5. theRect = ctx.rect(10, 10, 100, 100);
  7. ctx.stroke();
  9. console.log(theRect); //undefined
复制代码

 

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

  1. function getEventPosition(ev){
  3. var x, y;
  5. if (ev.layerX || ev.layerX == 0) {
  7. x = ev.layerX;
  9. y = ev.layerY;
  11. } else if (ev.offsetX || ev.offsetX == 0) { // Opera
  13. x = ev.offsetX;
  15. y = ev.offsetY;
  17. }
  19. return {x: x, y: y};
  21. }
  23. //注：使用上面这个函数，需要给Canvas元素的position设为absolute。
复制代码


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

 

isPointInPath方法

 

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

  1. cvs = document.getElementById(‘mycanvas‘);
  3. ctx = canvas.getContext(‘2d‘);
  5. ctx.rect(10, 10, 100, 100);
  7. ctx.stroke();
  9. ctx.isPointInPath(50, 50); //true
  11. ctx.isPointInPath(5, 5); //false
复制代码


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

  1. cvs.addEventListener(‘click‘, function(e){
  3. p = getEventPosition(e);
  5. if(ctx.isPointInPath(p.x, p.y)){
  7. //点击了矩形
  9. }
  11. }, false);
复制代码


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

  1. cvs = document.getElementById(‘mycanvas‘);
  3. ctx = canvas.getContext(‘2d‘);
  5. ctx.beginPath();
  7. ctx.rect(10, 10, 100, 100);
  9. ctx.stroke();
  11. ctx.isPointInPath(20, 20); //true
  13. ctx.beginPath();
  15. ctx.rect(110, 110, 100, 100);
  17. ctx.stroke();
  19. ctx.isPointInPath(150, 150); //true
  21. ctx.isPointInPath(20, 20); //false
复制代码


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


循环重绘和事件冒泡


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

  1. arr = [
  3. {x:10, y:10, width:100, height:100},
  5. {x:110, y:110, width:100, height:100}
  7. ];
  9. cvs = document.getElementById(‘mycanvas‘);
  11. ctx = canvas.getContext(‘2d‘);
  13. draw();
  15. function draw(){
  17. ctx.clearRech(0, 0, cvs.width, cvs.height);
  19. arr.forEach(function(v){
  21. ctx.beginPath();
  23. ctx.rect(v.x, v.y, v.width, v.height);
  25. ctx.stroke();
  27. });
  29. }
复制代码


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

 

  1. cvs.addEventListener(‘click‘, function(e){
  3. p = getEventPosition(e);
  5. draw(p);
  7. }, false);
复制代码

 

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

 

  1. function draw(p){
  3. var who = [];
  5. ctx.clearRech(0, 0, cvs.width, cvs.height);
  7. arr.forEach(function(v, i){
  9. ctx.beginPath();
  11. ctx.rect(v.x, v.y, v.width, v.height);
  13. ctx.stroke();
  15. if(p && ctx.isPointInPath(p.x, p.y)){
  17. //如果传入了事件坐标，就用isPointInPath判断一下
  19. //如果当前环境覆盖了该坐标，就将当前环境的index值放到数组里
  21. who.push(i);
  23. }
  25. });
  27. //根据数组中的index值，可以到arr数组中找到相应的元素。
  29. return who;
  31. }
复制代码


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

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

原文链接：http://www.xyhtml5.com/

HTML5 Canvas 的事件处理---转

标签：

原文地址：http://www.cnblogs.com/tianmahygj/p/4293946.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！