00002-微信小遊戲--觸摸事件

響應用戶與屏幕的交互是遊戲中必不可少的部分，小遊戲參照 DOM 中的 TouchEvent 提供了以下監聽觸摸事件的 API：

    wx.onTouchStart()
    wx.onTouchMove()
    wx.onTouchEnd()
    wx.onTouchCancel()

實例代碼：
onTouchStart、onTouchEnd、onTouchCancel執行一次
onTouchMove每幀執行一次

let ctx = canvas.getContext('2d')
export default class Main{
  constructor(){
	this.TouchEvent();
  }

  TouchEvent(){
	wx.onTouchStart(function (e) {
		console.log(e.touches);
		
		console.log("移動開始"+e.touches[0].clientX +" "+e.touches[0].clientY)
	  })
	  
	  wx.onTouchMove(function (e) {
		let x = e.touches[0].clientX;
		let y = e.touches[0].clientY;
		console.log("移動中"+e.touches[0].clientX +" "+e.touches[0].clientY)
	  })
	  
	  wx.onTouchEnd(function (e) {
		console.log(e.touches)//移動結束的時候觸摸點列表長度爲0
	  })
	  
	  wx.onTouchCancel(function (e) {//移動取消的時候觸摸點列表長度爲0
		console.log("取消移動")
		console.log(e.touches)
	  })
  }
}

我們結合上一篇博客可以實現讓一張圖片跟隨這鼠標或者手指的移動而移動

let ctx = canvas.getContext('2d')

let image = wx.createImage();
image.onload=function(){

	ctx.drawImage(image,0,0,53,33)
}
image.src = "images/Unity.jpg"

export default class Main{
  constructor(){

	this.TouchEvent();
  }

  TouchEvent(){
	wx.onTouchStart(function (e) {
		console.log(e.touches);
		
		console.log("移動開始"+e.touches[0].clientX +" "+e.touches[0].clientY)
	  })
	  
	  wx.onTouchMove(function (e) {
		let x = e.touches[0].clientX;
		let y = e.touches[0].clientY;
		//每次清除一下畫布
		ctx.clearRect(0, 0, canvas.width, canvas.height)
		//重新繪製一張圖片並指定位置
		ctx.drawImage(image,x,y,53,33)
		console.log("移動中"+e.touches[0].clientX +" "+e.touches[0].clientY)
	  })
	  
	  wx.onTouchEnd(function (e) {
		console.log(e.touches)//移動結束的時候觸摸點列表長度爲0
	  })
	  
	  wx.onTouchCancel(function (e) {//移動取消的時候觸摸點列表長度爲0
		console.log("取消移動")
		console.log(e.touches)
	  })
  }
}

效果如下：