微信小游戏 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
微信小游戏 Three.js UI 2D text 简单方案的更多相关文章
- 微信小游戏 three.js jsonloader request:fail invalid url
微信小游戏中,用 THREE.JSONLoader 直接加载本地的 json 文件,报错.估计是跨域访问的问题 解决:把 json 文件放到服务器上,通过 url 来访问. 临时测试的话,在本地起一个 ...
- 微信小游戏 main.js没有被压缩
发布时,发现main.js没有被压缩. 在config.wxgame.ts里增加如下图.
- 微信小游戏的本地缓存和清除的使用 (text.js image.js file-util.js)
参考: 微信小游戏,文件系统 UpdateManager-小游戏 一.Egret提供的本地缓存工具类( 备注:新版本进行了修改,并增加了sound.js等) 在微信小游戏项目中,Egret提供了fil ...
- 【转】利用 three.js 开发微信小游戏的尝试
前言 这是一次利用 three.js 开发微信小游戏的尝试,并不能算作是教程,只能算是一篇笔记吧. 微信 WeChat 6.6.1 开始引入了微信小游戏,初期上线了一批质量相当不错的小游戏.我在查阅各 ...
- 微信小游戏 demo 飞机大战 代码分析 (一)(game.js, main.js)
微信小游戏 demo 飞机大战 代码分析(一)(main.js) 微信小游戏 demo 飞机大战 代码分析(二)(databus.js) 微信小游戏 demo 飞机大战 代码分析(三)(spirit. ...
- 微信小游戏开发之四:使用three.js引擎
一.前言 微信小游戏中最魔性的'跳一跳'就是基于three.js 引擎开发的 源码放到github上了:GitHub地址 请自行下载. 二.下载 three.min.js 打开页面,复制代码到本地 ...
- three.js 微信小游戏
最近在 https://classroom.udacity.com/courses/cs291 学习了一些 3D 引擎和 three.js 的知识 把 three.js 弄到微信小游戏里,先随便跑一跑 ...
- pixi.js 微信小游戏 入手
pixi是什么?一款h5游戏引擎 优点:简单简洁性能第一 缺点:大多数用的国产三大引擎,pixi资料少,工具少, 为什么学,装逼 用pixi开发小游戏行吗? 行.但要简单处理下 下载官网上的 weap ...
- 微信小游戏 demo 飞机大战 代码分析(四)(enemy.js, bullet.js, index.js)
微信小游戏 demo 飞机大战 代码分析(四)(enemy.js, bullet.js, index.js) 微信小游戏 demo 飞机大战 代码分析(一)(main.js) 微信小游戏 demo 飞 ...
随机推荐
- python基础之读取xml
python怎么操作xml文件详细介绍链接:https://www.jb51.net/article/50812.htm 从结构上来说,xml很像常见的HTML超文本标记语言.不过超文本语言被设计用来 ...
- 2021最新Java基础知总结,助力大厂offer
本文是我花了三周时间整理出来的,希望对Java初学者有帮助~ Java概述 Java的特点 Java是一门面向对象的编程语言.面向对象和面向过程是一种软件开发思想. 面向过程就是分析出解决问题所需要的 ...
- js中变量提升和函数提升
变量提升和函数提升的总结 我们在学习JavaScript时,会遇到变量提升和函数提升的问题,为了理清这个问题,现做总结如下,希望对初学者能有所帮助 我们都知道 var 声明的变量有变量提升,而 let ...
- Discuz 7.x/6.x 全局变量防御绕过导致代码执行
地址 http://192.168.49.2:8080/viewthread.php?tid=13&extra=page%3D1 安装成功后,找一个已存在的帖子,向其发送数据包,并在Cooki ...
- LeetCode通关:数组十七连,真是不简单
分门别类刷算法,坚持,进步! 刷题路线参考:https://github.com/chefyuan/algorithm-base https://github.com/youngyangy ...
- [GXYCTF2019]Ping Ping Ping(ping命令执行绕过Waf)
记一道ping注入的题.过滤了很多字符. 分析 简单的测了一下,很容易就拿到了flag.php和index.php. 但是存在waf无法直接查看.直接?ip=127.0.0.1|cat flag.ph ...
- 那些 22 岁毕业做Android开发的人,他们 50 岁左右时的人生轨迹是怎样的?
本人今年35了,已经干了14年程序员,是14年不是13年,因为我是专科毕业. 一直就是普普通通的程序员,特别纯的码农,从没做过管理岗位,并且很可能以后也是如此. 现在已经上有老下有小. 曾经在某著名互 ...
- CMMI相关图书
Integrating CMMI and Agile Development: Case Studies and Proven Techniques for Faster Performance Im ...
- Linux中的DNS反解析
安装bind软件包 yum -y install bind 查找配置文件路径 修改系统配置文件 配置反向解析文件 修改网卡信息,关闭防火墙 测试实验
- 【笔记】衡量线性回归法的指标 MSE,RMS,MAE以及评价回归算法 R Square
衡量线性回归法的指标 MSE,RMS,MAE以及评价回归算法 R Square 衡量线性回归法的指标 对于分类问题来说,我们将原始数据分成了训练数据集和测试数据集两部分,我们使用训练数据集得到模型以后 ...