three,js项目开发总结 - 创建精灵字体

makeTextSprite(message, parameters) {if (parameters === undefined) parameters = {}var fontface = parameters.hasOwnProperty("fontface") ? parameters["fontface"] : "Arial"/* 字体大小 */var fontsize = parameters.hasOwnProperty("fontsize") ? parameters["fontsize"] : 18/* 边框厚度 */var borderThickness = parameters.hasOwnProperty("borderThickness") ? parameters["borderThickness"] : 5/* 边框颜色 */var borderColor = parameters.hasOwnProperty("borderColor") ? parameters["borderColor"] : {r: 0,g: 0,b: 0,a: 1.0}/* 背景颜色 */var backgroundColor = parameters.hasOwnProperty("backgroundColor") ? parameters["backgroundColor"] : {r: 255,g: 255,b: 255,a: 1.0}/* 创建画布 */var canvas = document.createElement('canvas')var context = canvas.getContext('2d')/* 字体加粗 */context.font = "Bold " + fontsize + "px " + fontface/* 获取文字的大小数据，高度取决于文字的大小 */var metrics = context.measureText(message)var textWidth = metrics.width/* 背景颜色 */context.fillStyle = "rgba(" + backgroundColor.r + "," + backgroundColor.g + "," + backgroundColor.b + "," +backgroundColor.a + ")"/* 边框的颜色 */context.strokeStyle = "rgba(" + borderColor.r + "," + borderColor.g + "," + borderColor.b + "," + borderColor.a + ")"context.lineWidth = borderThickness/* 绘制圆角矩形 */this.roundRect(context, borderThickness / 2, borderThickness / 2, textWidth + borderThickness, fontsize * 1.4 +borderThickness, 6)/* 字体颜色 */context.fillStyle = "rgba(0, 0, 0, 1.0)"context.fillText(message, borderThickness, fontsize + borderThickness)/* 画布内容用于纹理贴图 */var texture = new THREE.Texture(canvas)texture.needsUpdate = truevar spriteMaterial = new THREE.SpriteMaterial({map: texture})var sprite = new THREE.Sprite(spriteMaterial)/* 缩放比例 */sprite.scale.set(10, 5, 0)return sprite
}

three,js项目开发总结 - 创建精灵字体相关推荐

vue router 参数_Vue.js项目开发技术解析
Vue.js项目开发技术解析一.Vue.js实例在一个Vue.js工程中,用于显示内容最基层的实例称之为根实例.通过该实例可以进行页面或组件的更新和显示.对于项目本身而言,无论是什么样的页面,都要 ...
OpenHarmony JS项目开发流程
2022 CSDN OpenHarmony应用学习挑战赛火热报名中,平板电脑.智能手表.智能手环等你来拿!点击链接了解详情:2022CSDN Openharmony应用学习挑战赛(点我立即报名) 一. ...
前端React项目的Next.js项目通过CSS引入自定义字体文件
最近在Web3的项目,需要引入自定义字体,做下记录: 1. 如果是下载的字体文件,直接能使用的就不需要转换,如果是TTF格式则需要转换成eot.svg.woff.woff2,这里提供一个网站Font ...
【第一个项目开发】创建domain包中的类
数据库表的创建在sqlyog中使用sql语句创建表回到eclipse 让我们先了解一下项目中的分层: 通过下图(用户注册功能)来讲解下,项目中常见的分层(分包). 一般项目中的层: view层作用 ...
项目开发中引入外部字体库
前端web项目下载字体库(如:方正兰亭中黑_GBK.ttf) 全局引入 @font-face {font-family: "方正兰亭中黑_GBK";src: url(" ...
JS项目开发中常用的一些小功能
目录字符串技巧 1.比较时间 2.格式化money 3.生成随机ID 4.生成随机 HEX 颜色值 5.Generate star ratings 6.网址查询参数 7. ...
在项目开发时创建上传微服务，我们一些纠结的点
微服务除了可以进行业务处理之外,也可以针对上传功能进行创建,所有的上传微服务依然需要向Eureka中注册,这样就可以在zuul中进行微服务代理操作. 注意:不建议构建上传微服务在实 ...
iOS项目开发实战——Label中字体字号与Label多行显示
我们如何通过OC代码来设置Label中显示的文本呢?代码如下: #import "ViewController.h"@interface ViewController ()@end ...
创建基于Webpack的Vue.js项目
创建基于Webpack的Vue.js项目本文目录: 一.Webpack简介二.创建基于Webpack的Vue.js项目 1.前提条件 (1).检查node 和npm版本信息 (2).升级你的 No ...

three,js项目开发总结 - 创建精灵字体

three,js项目开发总结 - 创建精灵字体相关推荐

最新文章

热门文章