点击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)
        }
        
      }

缺点:

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

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值