uni-app nvue中的gcanvas无法通过点击事件获取canvas内部元素相对于canvas的偏移量

uni-app nvue中的gcanvas无法通过点击事件获取canvas内部元素相对于canvas的偏移量

开发环境 版本号 项目创建方式
Mac 11.3.1 HBuilderX 
### 操作步骤：

<gcanvas class="canvas" @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend" ref="gcanvess" fillStyle="#EEEEEE"></gcanvas>

touchstart(e) { console.log(e) }


### 预期结果：

detail对象有返回数据

实际结果：

{
"type": "touchstart",
"timeStamp": 1625369393899,
"target": {
"id": "",
"dataset": {},
"offsetLeft": 0,
"offsetTop": 0
},
"currentTarget": {
"id": "",
"dataset": {},
"offsetLeft": 0,
"offsetTop": 0
},
"detail": {},
"touches": [{
"screenY": 511.3333282470703,
"identifier": 4,
"force": 0,
"screenX": 170.66665649414062,
"pageY": 511.3333282470703,
"pageX": 170.66665649414062
}],
"changedTouches": [{
"screenY": 511.3333282470703,
"identifier": 4,
"force": 0,
"screenX": 170.66665649414062,
"pageY": 511.3333282470703,
"pageX": 170.66665649414062
}],
"stopPropagation": "function() { [native code] }"
}

bug描述：

touchstart事件的回调中的detail对象为空，无法获取内部元素偏移量，也无法获取当前点击的是哪个内部元素


更多关于uni-app nvue中的gcanvas无法通过点击事件获取canvas内部元素相对于canvas的偏移量的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

放弃吧 官方并不推荐使用gcanvas

更多关于uni-app nvue中的gcanvas无法通过点击事件获取canvas内部元素相对于canvas的偏移量的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在uni-app nvue的gcanvas中，touch事件返回的detail对象确实为空，这是gcanvas组件的事件机制限制。gcanvas的触摸事件提供的是基础触摸坐标信息，但无法直接获取canvas内部绘制元素的偏移量或识别具体被点击的元素。

从你提供的事件对象看，可以通过以下方式获取触摸位置：

  • touches[0].pageX和touches[0].pageY提供页面坐标
  • target.offsetLeft和target.offsetTop提供canvas元素本身的偏移量

要获取相对于canvas的坐标，需要手动计算：

touchstart(e) {
    const canvasX = e.touches[0].pageX - e.target.offsetLeft
    const canvasY = e.touches[0].pageY - e.target.offsetTop
    console.log(`Canvas内坐标: (${canvasX}, ${canvasY})`)
}
回到顶部