点击canvas中指定图形触发事件

问题：

给canvas绘制的某个图片区域绑定点击事件

分析：

canvas绘制时可取得图形位置，绘制完成时无法获取每一个图形的位置

解决：

重绘一遍图形，一边绘制一边比较点击事件发生的位置，看点击事件发生在了哪一个图形上面

在canvas标签中添加属性

bindtap='CanvasTap'

下面两个属性可用来自定义长按还是单击，官方给出的bindlongtap 作为长按是500毫秒，个人感觉这个长按事件和单击不太区分得开

bindtouchstart='touchStart' 
bindtouchend='touchEnd'

在当前页面变量里面添加point记录点击发生的位置和类别

  data: {
    point: {
      x: 0,
      y: 0,
      isLongTap:false
    },
    // 触摸开始时间
    touchStartTime: 0,
    // 触摸结束时间
    touchEndTime: 0,
 }

在绘制canvas中每个图形结束之后，判断点击是否发生在了改图形区域内，此处以画圆举例

//如果点击
    if (this.data.point) {
      var x = this.data.point.x
      var y = this.data.point.y
      // var d = (x - pro.X) ^ 2 + (y - pro.Y) ^ 2
      var d = (x - pro.X) * (x - pro.X) + (y - pro.Y) * (y - pro.Y)
      var d_width = x - this.data.albumtext.x // 点击的宽度
      var d_heigh = y - this.data.albumtext.y //点击的长度
      console.log("d < pro.r * pro.r:" + (d < pro.r * pro.r))
      if (d < pro.r * pro.r) {//判断点击事件是否发生在圆圈内
        if (!this.data.point.isLongTap){//单击
          this.DoTap(pro)
        }else{//双击
          this.DoLongTap(pro)
        }
        
      }

缺点：

二次绘图耗时，可以考虑记录每一个图形的覆盖区域，如果图形较多，就比较浪费内存了。