必现

- 发布:2024-05-28 17:09
- 更新:2024-05-28 17:09
- 阅读:158
产品分类: uniapp/App
PC开发环境操作系统: Windows
PC开发环境操作系统版本号: win11
HBuilderX类型: 正式
HBuilderX版本号: 4.17
手机系统: Android
手机系统版本号: Android 14
手机厂商: 华为
手机机型: nova 10z
页面类型: nvue
vue版本: vue3
打包方式: 云端
项目创建方式: HBuilderX
操作步骤:
预期结果:
"target": {
"id": "zoom",
"dataset": {
"vEe5246b6": ""
},
"offsetTop": 5,
"offsetLeft": 6
},
"target": {
"id": "zoom",
"dataset": {
"vEe5246b6": ""
},
"offsetTop": 5,
"offsetLeft": 6
},
实际结果:
"target": {
"id": "",
"dataset": {},
"offsetLeft": 0,
"offsetTop": 0
},
"target": {
"id": "",
"dataset": {},
"offsetLeft": 0,
"offsetTop": 0
},
bug描述:
在video标签上层放一个图片,使用@touchstart和@touchmove去移动,在图片上有个按钮的时候,获取不到target.id。在H5端是正常的。
代码如下
<video :style="{width: '100%',height: (height-150)+'px'}" :src="liveUrl" autoplay="true" :controls="false"
:enable-progress-gesture="false">
<cover-view class="image_data" :style="{'height':(imageHeight+20)+'px','width':(imageWidth+20)+'px',...position}" v-if="showImage">
<view class="canvas-border" v-if="selected" @touchstart.stop="onTouchStart" @touchmove.stop="onTouchMove" :style="{'height':(imageHeight+20)+'px','width':(imageWidth+20)+'px'}" @touchend.stop="onTouchEnd">
<view class="image" :style="{'height':imageHeight+'px','width':imageWidth+'px',...imageCss}" >
<image :src="params.imageUrl" mode="widthFix" style="width: 100%;height: 100%;"
></image>
</view>
<view class="canvas-zoom icon" id="zoomicon" >
<image src="../../static/icon/zoom.png" mode="widthFix" style="width: 30rpx;" id="zoom" ref="zoom"></image>
</view>
</view>
</cover-view>
</video>
const onTouchStart = (e) => {
const currentX = e.touches[0].screenX || e.touches[0].clientX
const currentY = e.touches[0].screenY || e.touches[0].clientY
startPosition.x = currentX
startPosition.y = currentY
touchTarget.value = e.target.id
selected.value = true
}
const lastMoveTime = ref('')
const onTouchMove = (e) => {
const currentX = e.touches[0].screenX || e.touches[0].clientX
const currentY = e.touches[0].screenY || e.touches[0].clientY
const currentTime = new Date().getTime()
const offsetX = currentX - startPosition.x
const offsetY = currentY - startPosition.y
if (touchTarget.value == 'zoom') {
if (currentTime - lastMoveTime.value < 200) return
//放大缩小
const distance = Math.sqrt(
Math.pow(offsetX, 2) + Math.pow(offsetY, 2)
)
let scale = position.scales
if (currentX > startPosition.x) {
scale += distance / 100
} else {
scale -= distance / 100
}
//以中心放大
position.scales = scale < 0.5 ? 0.5 : (scale > 2 ? 2 : scale)
console.log(position,"opp")
position.transform = `scale(${position.scales}) rotate(${position.rotate}deg)`
} else {
if (currentTime - lastMoveTime.value < 80) return
//移动
const maxLeft = width.value - imageWidth.value - 10
const maxTop = height.value - imageHeight.value - 150
let newLeft = parseInt(position.left) + offsetX
let newTop = parseInt(position.top) + offsetY
// 判断是否超出容器边界
if (newLeft < -10) {newLeft = -10}
if (newLeft > maxLeft) {newLeft = maxLeft}
if (newTop < -10) {newTop = -10}
if (newTop > maxTop) {newTop = maxTop}
position.top = newTop + 'px'
position.left = newLeft + 'px'
}
startPosition.x = currentX
startPosition.y = currentY
lastMoveTime.value = currentTime
}
在H5中按住id为zoom的image去移动的时候 ontouchstart的回调为:{
"type": "touchstart",
"timeStamp": 53667,
"target": {
"id": "zoom",
"dataset": {
"vEe5246b6": ""
},
"offsetTop": 5,
"offsetLeft": 6
},
"detail": {},
"currentTarget": {
"id": "",
"dataset": {
"vEe5246b6": ""
},
"offsetTop": 0,
"offsetLeft": 0
},
"touches": [
{
"identifier": 0,
"pageX": 260.86956787109375,
"pageY": 301.0869445800781,
"clientX": 260.86956787109375,
"clientY": 301.0869445800781,
"force": 1
}
],
"changedTouches": [
{
"identifier": 0,
"pageX": 260.86956787109375,
"pageY": 301.0869445800781,
"clientX": 260.86956787109375,
"clientY": 301.0869445800781,
"force": 1
}
],
"__instance": true
}
在app中 回调为{
"type": "touchstart",
"timeStamp": 1716887278253,
"target": {
"id": "",
"dataset": {},
"offsetLeft": 0,
"offsetTop": 0
},
"currentTarget": {
"id": "",
"dataset": {},
"offsetLeft": 0,
"offsetTop": 0
},
"detail": {},
"touches": [
{
"screenY": 373.6666564941406,
"screenX": 234,
"pageX": 46.66666793823242,
"pageY": 121,
"identifier": 0
}
],
"changedTouches": [
{
"screenY": 373.6666564941406,
"screenX": 234,
"pageX": 46.66666793823242,
"pageY": 121,
"identifier": 0
}
],
"stopPropagation": "function() { [native code] }",
"preventDefault": "function() { [native code] }"
}
0 个回复