微信小游戏 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 飞 ...
随机推荐
- 什么是ETL--ETL定义、过程和工具选型思路
ETL代表"提取.转换和加载".ETL 过程在数据集成策略中起着关键作用.ETL允许企业从多个来源收集数据并将其整合到一个集中的位置.ETL还使不同类型的数据可以协同工作. 概述 ...
- 构建后端第4篇之---spring 源码阅读构建环境
解决 IDEA 创建 Gradle 项目没有src目录问题 in new model named zyt-study root dir there are a build.gradle plug ...
- 多个filter如何决定调用顺序
答案是:web-inf中的web.xml决定
- Object.defineProperty 中 get set 用法
就是两个函数,只要搞清楚get.set的执行时机就可以了.执行时机如下代码: <!DOCTYPE html> <html lang="en"> <he ...
- Apache解析漏洞
多解析特性 在Apache1.x,2.x中Apache 解析文件的规则是从右到左开始判断解析,如果后缀名为不可识别文件解析,就再往左判断.因此对于apache而言,一个test.php.qwea文件依 ...
- .user.ini和.htaccess
.user.ini .user.ini的使用条件 (1)nginx/apache/IIS,只要是以fastcgi运行的php都可以用这个方法 php配置访问级别 不同的php配置项根据其访问级别具有不 ...
- 40k*16 薪,五年Android开发4轮面试拿下腾讯 Offer !(附真题)
概述 感觉毕业后时间过得真快啊,从16年6月本科毕业入职了一家不大的公司,到现在快五年了,前段时间金三银四想着找一个新的工作,前前后后花了一个多月的时间复习以及面试,前几天拿到了腾讯的offer,想把 ...
- [TensorFlow2.0]-手写神经网络实现鸢尾花分类
本人人工智能初学者,现在在学习TensorFlow2.0,对一些学习内容做一下笔记.笔记中,有些内容理解可能较为肤浅.有偏差等,各位在阅读时如有发现问题,请评论或者邮箱(右侧边栏有邮箱地址)提醒. 若 ...
- iptables 及容器网络分析
本文独立博客阅读地址:https://ryan4yin.space/posts/iptables-and-container-networks/ 本文仅针对 ipv4 网络 iptables 提供了包 ...
- elsa-core—2.Hello World: HTTP
在本快速入门中,我们将了解一个执行工作流的最小 ASP.NET Core 应用程序.工作流将侦听传入的 HTTP 请求并写回一个简单的响应. 我们将: 创建 ASP.NET Core 应用程序. 使用 ...