使用threejs和canvas创建中文文字精灵

在 threejs 和 jquery 的支持下，可以在三维空间里创建文字精灵，精灵模型始终面向用户，支持中文。参考代码如下：


// 创建文字精灵
var getTextCanvas = function ( text, opt ) {var option = {fontFamily: 'Microsoft Yahei',fontSize: 40,fontWeight: 'normal',lineHeight: 1.4,  // g 字符的空间color: '#000000',borderWidth: 4,borderRadius: 6,borderColor: 'transparent',backgroundColor: 'transparent',}, canvas, context, textWidth, texture, materialObj, spriteObj;$.extend( option, opt );canvas = document.createElement('canvas');context = canvas.getContext('2d');context.font = option.fontWeight + ' ' + option.fontSize + 'px ' + option.fontFamily;textWidth = context.measureText( text ).width;context.fillStyle  = option.backgroundColor;context.strokeStyle = option.borderColor;context.lineWidth = option.borderWidth;setBackground(context, option.borderWidth * 0.5, option.borderWidth * 0.5, textWidth + option.borderWidth,option.fontSize * option.lineHeight + option.borderWidth, option.borderRadius);context.fillStyle = option.color;context.fillText(text, option.borderWidth, option.fontSize + option.borderWidth);texture = new THREE.Texture(canvas);texture.needsUpdate = true;materialObj = new THREE.SpriteMaterial({map: texture, color: 0xffffff});spriteObj = new THREE.Sprite( materialObj );spriteObj.scale.set(30, 20, 20);function setBackground(ctx, x, y, w, h, r) {ctx.beginPath();ctx.moveTo(x+r, y);ctx.lineTo(x+w-r, y);ctx.quadraticCurveTo(x+w, y, x+w, y+r);ctx.lineTo(x+w, y+h-r);ctx.quadraticCurveTo(x+w, y+h, x+w-r, y+h);ctx.lineTo(x+r, y+h);ctx.quadraticCurveTo(x, y+h, x, y+h-r);ctx.lineTo(x, y+r);ctx.quadraticCurveTo(x, y, x+r, y);ctx.closePath();ctx.fill();ctx.stroke();}return spriteObj;}

使用threejs和canvas创建中文文字精灵相关推荐

THREEJS在场景图上动态标识一些文字方法二（文字精灵sprite）
threejs文字精灵sprite的实现 1.手动添加文字精灵 2.通过json动态获取文字精灵,并进行交互 3.point模型只表示位置 4.CircleGeometry实现 5.3.PlaneGe ...
three.js给模型添加动态的文字精灵(vue)
1.创建2D文字canvas makeLabelCanvas(baseWidth, size, name) {const borderSize = 2;const ctx = document.cre ...
【OpenCV 例程200篇】23. 图像添加中文文字
[OpenCV 例程200篇]23. 图像添加中文文字欢迎关注『OpenCV 例程200篇』系列,持续更新中欢迎关注『Python小白的OpenCV学习课』系列,持续更新中 OpenCV ...
【OpenCV 例程200篇】22. 图像添加非中文文字
[OpenCV 例程200篇]22. 图像添加非中文文字欢迎关注『OpenCV 例程200篇』系列,持续更新中欢迎关注『Python小白的OpenCV学习课』系列,持续更新中函数 cv2 ...
uniapp canvas 图片加上文字合成一张新图并保存到手机相册
uniapp canvas 图片加上文字合成一张新图并保存到手机相册背景图上是奖章徽章,中间加上自定义文本,我这个图是因为背景图上原来就有字,随便找的,所以跟我写的文字层叠了具体实现代码 < ...
java设置text字体颜色_java itext添加中文文字和设置文字颜色
java itext添加中文文字和设置文字颜色下面是示例代码 import java.io.FileOutputStream; import java.io.IOException; import ...
从头开始创建背景和精灵
您将要创造的在本系列的前一部分中,我对Scratch及其使用的主要组件进行了介绍. 在这一部分中,我们将通过添加背景和一些精灵来开始创建项目. 在Scratch中,背景和精灵是资产. 资产还包括服装 ...
js 最简单的方法使用canvas创建水印图片
js 最简单的方法使用canvas创建背景水印 /*** 文字水印* @param {any} text */ function watermark(text) {//创建画布var dom = do ...
VUE+Canvas实现输入文字生成对应的字体图片小功能
你是不是经常浏览字体网站的时候,发现他们的"字体生成器"和预览功能很好奇,为什么输入框输入文字之后,点击预览,下面都会修改对应的字体内容,以便达到了没有安装字体也可以预览这个字体效 ...

使用threejs和canvas创建中文文字精灵

使用threejs和canvas创建中文文字精灵相关推荐

最新文章

热门文章