Обработка сенсорных событий на Canvas в мини-программе WeChat

Я создал 3D-симуляцию мини-игры WeChat. По какой-то причине я должен повторно реализовать его как мини-программу WeChat. Итак, я создал холст на 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() или что-то в этом роде.

Как получить события Touch на холсте в мини-программе WeChat?


canvas touch wechat
person Hotte Shen    schedule 19.02.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Я изменил часть своего кода, чтобы я мог прослушивать событие касания.

<!--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 и холстом мини-программы WeChat (не холст мини-игры WeChat
  • другой простой или более интуитивно понятный способ обработки сенсорных событий
person Hotte Shen    schedule 19.02.2020