j***@qq.com
j***@qq.com
  • 发布:2021-07-14 14:21
  • 更新:2021-07-14 14:21
  • 阅读:295

【报Bug】uniCloud admin pc端,canvas组件返回鼠标点击坐标漂移

分类:uni-app

产品分类: uniapp/H5

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: windows 10 专业版

HBuilderX类型: 正式

HBuilderX版本号: 3.1.18

浏览器平台: Chrome

浏览器版本: 78.0.3904.108

项目创建方式: 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返回,但是我们找遍整个框架,都找不到。

2021-07-14 14:21 负责人:无 分享
已邀请:

该问题目前已经被锁定, 无法添加新回复