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

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

0 голосов
/ 19 февраля 2020

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

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

1 Ответ

0 голосов
/ 19 февраля 2020

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

<!--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 canvas и холстом мини-программы WeChat (не WeChat mini-game canvas
  • другим простым или более интуитивным способом обработка сенсорных событий
...