canvas点击事件，以及点击之后获取数据的方法

canvas点击事件可以看这里。

canvas 点击事件中主要有2个问题：

　　1. 如何点击到自己想要的元素（圆或者矩形）等，的时候响应点击事件

　　2. 点击到的时候如何获取数据。

1. 第一个 canvas 提供了一个方法 isPointInPath()：如果指定的点位于当前路径，返回true,否则返回 false。

　　就是在一个路径你鼠标点击的时候有一个 x,y 坐标，如果这个点在当前路径中，就会返回true, 可以看上面文章的例子。

　　canvas 中 beginPath 就是重置路径，就是你要点击响应的图形，要在最后一个路径中，使用 isPointInPath();方法才会返回true

2. 就是点击之后，要取到自己想要的数据。

这个问题可以看这个视频慕课网使用canvas 交互和 isPointInPath 可以看这个视频。

案例

下面是点击方法画布的方法监听，拿到点击事件在画布中的位置 x, y 之后，重新调一下生产球形的方法

 // 画布点击事件-- 来判断是否点击到技能点
  click: function(e){
    let { detail:{x,y} } = e;
    this.ctxArc(x,y);
  },

下面代码是画球形的代码，因为有很多，这里是二维数组来存储业务数据，坐标也是二维数组

// 画球形
  ctxArc: function(x,y){
    const { list, zpoints } = this.data;
　　 // list： 业务数据， zpoints: 所有球形的坐标
    ctx.save();
    ctx.translate(0, 0);
    list.map((arr, index)=> {
      arr.map((item,indexx)=>{
        let str = item.name.slice(0,2);
        let pointItem = zpoints[index][indexx];
          let color = this.getArcColor(item.status);
          // 画球形
          ctx.fillStyle = color;
          ctx.beginPath();
          ctx.moveTo(pointItem.x, pointItem.y);
          ctx.arc(pointItem.x, pointItem.y, 20, 0, 2 * Math.PI, false);
          ctx.fill();
          // 这里是判断，如果 该方法传入了坐标，表示是点击事件响应的，
          if (x && y) {
            // 判断当前画的路径中是否存在该坐标，如果存在 那么 ，刚刚点击的就是 这个球形，则可以拿到对应的数据
            if (ctx.isPointInPath(x, y)) {
              console.log(item);
            }
          }
          // 文字
          ctx.font="12px Georgia";
          ctx.fillStyle = '#FFF';
          ctx.moveTo(pointItem.x, pointItem.y);
          ctx.fillText(str,pointItem.x, pointItem.y - 10);
      });
    });
    ctx.closePath();
  },

还有一点需要注意，我这里是画布是全屏的，所以事件响应坐标，就是画布所在的坐标，实际用的时候，画布对应的坐标是需要计算的

function detect(event){
    var x = event.clientX - canvas.getBoundingClientRect.left;
    var y = event.clientY - canvas.getBoundingClientRect.top;
}

用文档坐标，减去画布距离顶部和左边的距离，得到的值，才是在画布中的坐标

canvas点击事件，以及点击之后获取数据的方法

相关推荐