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;
}

用文檔坐標，減去畫布 距離頂部 和左邊的距離，得到的 值，才是在畫布中的 坐標