问题:
给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)
}
}
缺点:
二次绘图耗时,可以考虑记录每一个图形的覆盖区域,如果图形较多,就比较浪费内存了。