uni-app 鸿蒙 NEXT 系统 canvas 组件 touch 事件缺少 x 和 y 坐标

发布于 1周前 作者 sinazl 来自 Uni-App

uni-app 鸿蒙 NEXT 系统 canvas 组件 touch 事件缺少 x 和 y 坐标

产品分类

uniapp/App

开发环境、版本号及项目创建方式

项⽬信息 详细信息
PC开发环境操作系统 Mac
PC开发环境操作系统版本号 12.7.6
HBuilderX类型 正式
HBuilderX版本号 4.29
手机系统 HarmonyOS NEXT
手机系统版本号 HarmonyOS NEXT Developer Beta1
手机厂商 模拟器
手机机型 Huawei Phone
页面类型 vue
vue版本 vue3
打包方式 离线
项目创建方式 HBuilderX

操作步骤

示例代码

<!-- 手写板区域 -->  
<view class="sign-content">  
    <!-- 手写板 -->  
    <canvas  
        canvas-id="sign"  
        class="sign"  
        :disable-scroll="true"  
        @touchstart="onTouchStart"  
        @touchmove="onTouchMove"  
        @touchend="onTouchEnd"  
        @touchcancel="onTouchEnd"  
    />  
</view>

/**  
 * 手指按下事件  
 * @param {TouchEvent & WechatMiniprogram.TouchCanvas} event 触摸事件  
 */  
function onTouchStart(event: TouchEvent & WechatMiniprogram.TouchCanvas): void {  
    console.log(JSON.stringify(event))  
}  

/**  
 * 手指移动事件  
 * @param {TouchEvent & WechatMiniprogram.TouchCanvas} event 触摸事件  
 */  
function onTouchMove(event: TouchEvent & WechatMiniprogram.TouchCanvas): void {  
    console.log(JSON.stringify(event))  
}  

/**  
 * 手指抬起事件  
 * @param {TouchEvent & WechatMiniprogram.TouchCanvas} event 触摸事件  
 */  
function onTouchEnd(event: TouchEvent & WechatMiniprogram.TouchCanvas): void {  
    console.log(JSON.stringify(event))  
}

预期结果

changedTouches 字段与 touches 字段有手指按下，移动，抬起时的横纵坐标值（x 与 y）

实际结果

changedTouches 字段与 touches 字段为空对象

bug描述

项目组使用 uni-app 开发一套跨平台的 APP，vue3 + TypeScript 模式，其中有一个电子签名的功能，使用 uni-app 的 canvas 组件进行开发，开发完成后在微信小程序，Android 和 iOS 端能正常进行签名操作，但是在鸿蒙 NEXT 系统上，无法正常进行签名操作，签名时无笔迹。

通过打印日志查看，微信小程序，Android 和 iOS 端 uni-app 的所有 touch 事件（touchstart，touchmove，touchend，touchcancel）中，参数 event 的 touch 字段、changedTouches 字段均有触摸及滑动时的 x，y 坐标。

但是在鸿蒙 NEXT 系统中，触摸事件参数 event 的 touch 字段、changedTouches 字段为空对象，打印的对象示例如下：

{  
    "defaultPrevented": false,  
    "timeStamp": 15058.199999999255,  
    "_stop": false,  
    "_end": false,  
    "type": "onTouchstart",  
    "bubbles": false,  
    "cancelable": false,  
    "changedTouches": {},  
    "currentTarget": {  
        "dataset": {  
            "vCc6f878c": ""  
        },  
        "id": "",  
        "offsetLeft": 0,  
        "offsetTop": 0  
    },  
    "detail": {},  
    "target": {  
        "dataset": {  
            "vCc6f878c": ""  
        },  
        "id": "",  
        "offsetLeft": 0,  
        "offsetTop": 0  
    },  
    "touches": {}  
}

更多关于uni-app 鸿蒙 NEXT 系统 canvas 组件 touch 事件缺少 x 和 y 坐标的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

Harmonyos Next教程
1 回复

更多关于uni-app 鸿蒙 NEXT 系统 canvas 组件 touch 事件缺少 x 和 y 坐标的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在uni-app中，尤其是在鸿蒙 NEXT 系统上开发时，如果遇到 canvas 组件的 touch 事件缺少 x 和 y 坐标的问题，这通常是由于事件对象的结构在不同平台上存在差异导致的。为了解决这个问题，我们可以通过一些通用的方法来获取触摸点的坐标。

以下是一个示例代码，展示了如何在uni-app的canvas组件中处理触摸事件，并获取触摸点的坐标。

首先，确保你的页面或组件中包含了canvas元素，并为其绑定触摸事件：

<template>
  <view>
    <canvas canvas-id="myCanvas" style="width: 300px; height: 300px;" @touchstart="handleTouchStart" @touchmove="handleTouchMove" @touchend="handleTouchEnd"></canvas>
  </view>
</template>

然后，在脚本部分，定义处理触摸事件的函数：

<script>
export default {
  methods: {
    handleTouchStart(event) {
      this.getTouchCoordinates(event, 'start');
    },
    handleTouchMove(event) {
      this.getTouchCoordinates(event, 'move');
    },
    handleTouchEnd(event) {
      this.getTouchCoordinates(event, 'end');
    },
    getTouchCoordinates(event, eventType) {
      let touchList = event.touches || event.changedTouches;
      if (touchList && touchList.length > 0) {
        let touch = touchList[0];
        let canvas = this.$mp.page.selectComponent('#myCanvas');
        let rect = canvas.boundingClientRect;
        let x = touch.clientX - rect.left;
        let y = touch.clientY - rect.top;
        console.log(`Event: ${eventType}, X: ${x}, Y: ${y}`);
      }
    }
  }
}
</script>

在这个示例中，我们定义了三个方法来处理touchstart、touchmove和touchend事件。getTouchCoordinates方法用于计算触摸点的坐标。由于不同平台可能返回的事件对象结构不同，我们统一使用event.touches或event.changedTouches来获取触摸点的信息。然后，我们通过canvas组件的boundingClientRect来获取canvas的位置和大小，从而计算出触摸点相对于canvas左上角的坐标。

这种方法的好处是，它可以在不同平台上保持一致性，并且能够处理多个触摸点（尽管在这个示例中我们只处理了第一个触摸点）。通过这种方式，即使touch事件对象在某些平台上缺少x和y坐标，我们也可以自己计算出这些坐标。

回到顶部