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)
	  })
  }
}

效果如下：