微信小游戏 Three.js UI 2D text 简单方案

在微信小游戏中使用 THREE.js 引擎，没有合适的 UI 库可用，只能自己动手。图片啥的都还好，text 不好弄。text 要计算 width 和 height，不然事件响应范围不对。

function draw(canvas, params){
  let ctx = canvas.getContext('2d')

  ctx.font = params.font
  ctx.lineWidth = params.lineWidth
  canvas.width = Math.max(2, ctx.measureText(params.str).width * ratio)
  canvas.height = Math.ceil((parseFloat(params.font) + 4)  * ratio) // 手机上可以正常显示

  ctx.restore() // 还原画布状态
  ctx.save() // 保存画布状态
  ctx.clearRect(0, 0, canvas.width, canvas.height) // 清除画布
  ctx.scale(ratio, ratio) // 缩放到像素比，使之高清

  // 背景，方便调试
  if (params.bgColor) {
    ctx.fillStyle = params.bgColor
    ctx.fillRect(0, 0, canvas.width, canvas.height)
  }

  ctx.fillStyle = params.fillStyle
  ctx.font = params.font
  ctx.lineWidth = params.lineWidth
  ctx.textAlign = params.textAlign
  ctx.textBaseline = params.textBaseline || 'top'
  ctx.fillText(params.str, 0, 0)
}

坑: game.json 中如果设置 deviceOrientation 为 "deviceOrientation": "landscape"，UI 显示很可能会不正常。而如果是 portrait 模式，就不会有问题。

原因：

我原来的代码中只在代码加载时取了一次 window.innerWidth 和 window.innerHeight (或 wx.getSystemInfoSync().width ), 然后保存下这两个值，供以后的代码直接读取。导致这两个值可能是设备竖屏时的参数，然而用 wx.onDeviceOrientationChange 监听横竖屏切换事件却并没有卵用。

解决：

每次需要这两个参数时，重新读取。

徒手编写微信小游戏示例代码：wechat_minigame_threejs_ui