canvas交互之addHitRegion()接口的使用

最新推荐文章于 2023-03-01 12:35:42 发布

weixin_33832340

最新推荐文章于 2023-03-01 12:35:42 发布

阅读量209

点赞数

原文链接：http://www.cnblogs.com/ruoji/p/6406056.html

版权

　　这段时间研究canvas，在交互这里遇到了比较大的坑。

　　据我目前所知，canvas纳入标准的常用交互接口（可能也就这一个）是 isPointInPath() ，它可以判断js设置的事件条件是否处于当前绘图路径中，或者说最后一个路径，具体使用如下

 1 //获取鼠标指针坐标
 2 function getMousePos(evt) {
 3     var rect = document.getElementById('canvas').getBoundingClientRect();
 4     return {
 5         x: evt.clientX - rect.left,
 6         y: evt.clientY - rect.top
 7     };
 8 }
 9 
10 document.getElementById(selector).addEventListener('click', function (evt) {
11     var mousePos = getMousePos(evt);
12     if (context.isPointInPath(mousePos.x, mousePos.y)) {
13         //重绘
14     }
15 }, false);

　　由于canvas不保存绘图路径，绘完了就bia在页面上，成死的了，因此无法对最后一条路径之前的路径重新拿出来处理。那么传统方法如何处理？--重绘，再针对每一个绘图路径使用 isPointInPath() 判断，核心代码使用如下（来自脚儿网，谢谢作者）

 1 ...
 2 function draw () {
 3 ...
 4 }
 5 function circle () {
 6 ...
 7 }
 8 
 9 draw();
10 ctx.fill()
11 circle();
12 ctx.fill()
13 
14 var fns = [draw,circle];
15 cvs.onmousemove = function (e) {
16   var x = e.offsetX, y = e.offsetY;
17   ctx.clearRect(0,0,400,300)
18   for(var i = fns.length;i--;) {
19     fns[i]();
20     if(ctx.isPointInPath(x,y)) {
21       ctx.fillStyle = "#f00"
22     } else {
23       ctx.fillStyle = "#000"
24     }
25     ctx.fill()
26   }
27 }

　　canvas只有一张画布，对之前任何一个路径作刷新，需要重绘所有受到影响的路径，因此，当需要重绘的动作越来越多时，就会对性能造成极大考验。作为HTML5的新宠儿，不应就此中道崩殂，我们也不想写如上略显累赘的代码。今天在查阅资料后，发现一个尚在讨论的新接口 addHitRegion() MDN，使用简单而且可以实现良好的交互效果，目前在chrome和firefox下测试可用（需要在chrome://flags中启用【实验性画布功能】或在firefox中输入about:config使canvas.hitregions.enabled值为true）

　　具体使用如下

　　绘图时在需要添加交互事件的路径中添加如下代码

1 try {
2     //id为空会报错
3     ctx.addHitRegion({ "id": "excited" });
4 } catch (e) {
5     alert("请在chrome://flags中启用【实验性画布功能】或在firefox中输入about:config使canvas.hitregions.enabled值为true以开启更多功能~~~///(^v^)\\\~~~");
6 }

　　需要注意的是id的值不能为空

　　然后，这样引用

1 document.getElementById(selector).addEventListener('click', function (event) {
2     if (event.region === 'excited') {
3         ...
4     }
5 }, false);