uni-app uniCloud admin pc端 canvas组件返回鼠标点击坐标漂移

uni-app uniCloud admin pc端 canvas组件返回鼠标点击坐标漂移

开发环境 版本号 项目创建方式
Windows windows 10 专业版 HBuilderX

示例代码：

<template >
<view class="body">
<canvas ref="canvasId"  canvas-id="canvasId"  id="canvasId"
style="{width:'3000px',height:'2000px'}"
@mousedown ="mouseDown($event)"   
</canvas>
</view>
</template>
<script>
const ctx={}
export default {
data() {
return {}
},
onReady(){
ctx=uni.createCanvasContext('canvasId')
ctx.strokeStyle = 'red';
},
methods: {
mouseDown(e){
let x=e.pageX-e.currentTarget.offsetLeft;
let y= e.pageY-e.currentTarget.offsetTop
ctx.strokeRect(x, y,80,50);
ctx.draw(true)  
}  
}  
}  
</script>

操作步骤：

点击canvas区域

预期结果：

以鼠标点击作上坐标，在屏幕上画方框

实际结果：

如果没有滚动滚动条，画框正确。若滚动滚动条后，画方框向左上方漂移，位置不正确

bug描述：

uniCloud admin 1.5.6版 我们利用canvas组件，需要正确返回鼠标点击位置坐标，在图上标记位置。但在有侧菜单情况下，右侧在滚动条后，就无法正确标记。原因是不论怎么滚动，e.clientX始终等于e.pageX e.clientY也始终等于e.pageY。 若在pages,josn中，“leftWindow”:fase,关闭左侧菜单，右侧在滚动条滚动后，e.clientX小于e.pageX返回正左确，能正确标记点击位置，正常了。 我们猜测可能是系统布局中的哪个css影响了.pageX .pageY返回，但是我们找遍整个框架，都找不到。


更多关于uni-app uniCloud admin pc端 canvas组件返回鼠标点击坐标漂移的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app uniCloud admin pc端 canvas组件返回鼠标点击坐标漂移的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在uni-app的PC端canvas组件中，鼠标坐标漂移问题通常与页面布局和滚动偏移计算有关。从你的代码和描述来看，问题确实出现在滚动后的坐标计算上。

关键问题在于：当页面存在滚动时，e.pageX和e.pageY返回的是相对于整个文档的坐标，而e.currentTarget.offsetLeft和e.currentTarget.offsetTop获取的是相对于父元素的偏移量，这种计算方式在滚动场景下会产生偏差。

建议改用以下方式计算坐标：

mouseDown(e){
  const rect = e.currentTarget.getBoundingClientRect();
  const x = e.clientX - rect.left;
  const y = e.clientY - rect.top;
  
  ctx.strokeRect(x, y, 80, 50);
  ctx.draw(true);
}

使用getBoundingClientRect()可以准确获取canvas元素相对于视口的位置，结合e.clientX和e.clientY（相对于视口的坐标），能够避免滚动带来的影响。

另外，检查你的样式设置。canvas的style使用对象语法不正确，应该改为：

style="width:3000px;height:2000px;"
回到顶部