时间戳

首页 > 解决方案 > 微信小程序Canvas上的触摸事件处理

canvas - 微信小程序Canvas上的触摸事件处理

问题描述

我创建了一个3D模拟微信小游戏。出于某种原因，我应该将其重新实现为微信小程序。所以我在index.wxml.

<!--index.wxml-->
<view class="container">
  <canvas type="webgl" id="myCanvas" style="height: 750rpx; width: 750rpx;"></canvas>
</view>

我尝试像以前在 HTML5 中一样在画布上捕获触摸事件。

const app = getApp()

Page({
  onReady() {
    const query = wx.createSelectorQuery()
    query.select('#myCanvas').node().exec((res) => {
      const canvas = res[0].node
      canvas.addEventListener("touchstart", function (e) {
        console.log(getTouchPos(canvas, e))
      }, false);
    })
  }
})

但是我收到一条错误消息并且小程序没有运行。

VM379:1 thirdScriptError
canvas.addEventListener is not a function;at SelectorQuery callback function
TypeError: canvas.addEventListener is not a function

在小游戏上，就是这样wx.onTouchStart()搞的。

如何在微信小程序的 canvas 上获取 Touch 事件？

标签： canvastouchwechat

解决方案

我更改了一些代码，以便可以收听触摸事件。

<!--index.wxml-->
<view class="container">
  <canvas
    type="webgl"
    id="myCanvas"
    style="height: 750rpx; width: 750rpx;"
    bindtap="onTap"
    ></canvas>
</view>

// index.js
Page({
  onReady() {},
  onTap: (event) => {
    console.log(event)
  }
})

虽然我解决了这个问题，但欢迎更多答案和评论。例如：

  • 详解HTML5画布和微信小程序画布（不是微信小游戏画布）的区别
  • 其他直接或更直观的触摸事件处理方式

推荐阅读