zoukankan      html  css  js  c++  java
  • 微信小游戏 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.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)
    
      ctx.restore() // 还原画布状态
    }
    

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

  • 相关阅读:
    代码对比软件——code compare
    IAR调试和keil调试的一点小区别
    谷访问歌助手
    X86架构的寄存器
    ant-design-pro
    js 闭包 作用域
    《三体》总结
    如何通过SQL注入盗取数据库信息
    《看见》总结
    《欲望的演化》总结
  • 原文地址:https://www.cnblogs.com/hangj/p/10990988.html
Copyright © 2011-2022 走看看