zoukankan      html  css  js  c++  java
  • canvas交互之addHitRegion()接口的使用

      这段时间研究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);

      相当于把需要的路径标识出来后面使用,非常方便。

      注意:该接口目前尚在实验中,在未来版本的浏览器中其语法和行为可能有所改变。未纳入标准之前,可以玩玩

      demo: https://dachow.github.io/canvas-demo/client/

  • 相关阅读:
    HDU 4024 Dwarven Sniper’s hunting(数学公式 或者是二分)
    二分图最大匹配总结
    HDU 4022 Bombing (STL应用)
    HDU 1847 Good Luck in CET4 Everybody!(组合博弈)
    HDU 1556 Color the ball(树状数组)
    HDU 4023 Game(博弈)
    HDU 1406 完数(水题)
    HDU 4021 24 Puzzle
    Oracle 多表查询优化
    【编程之美】字符串移位包含的问题(续)
  • 原文地址:https://www.cnblogs.com/ruoji/p/6406056.html
Copyright © 2011-2022 走看看