UITextField
UITextField 组件提供文本的显示功能;
文本组件依赖于
BMFont
图集,你需要先加载字体图集到引擎中,文本才能被正常显示出来。
ts
import { Engine3D } from '@orillusion/core';
// 加载 BMFont 文件
await Engine3D.res.loadFont('fnt/0.fnt');
// 创建用于显示UI的面板
let panelRoot: Object3D = new Object3D();
panelRoot.addComponent(ViewPanel);
// 面板加入到系统canvas中
renderJob.guiCanvas.addGUIChild(panelRoot);
// 创建文本节点
let textQuad = new Object3D();
panelRoot.addChild(textQuad);
this.text = textQuad.addComponent(UITextField);
this.text.uiTransform.resize(400, 60);
this.text.uiTransform.y = 100;
this.text.text = 'Hello,Orillusion!';
this.text.fontSize = 32;
this.text.alignment = TextAnchor.MiddleCenter;
设置字体
文本组件依赖于 BMFont
图集,你需要先加载 fnt
图集文件到引擎中,然后文本才能被正常显示出来
ts
// 加载 BMFont字体
await Engine3D.res.loadFont('path/to/font.fnt');
text.font = '微软雅黑';
设置内容
ts
// 修改组件text
text.text = 'Hello,Orillusion!';
字体大小
ts
text.fontSize = 32;
对齐方式
参考 TextAnchor,有九种对齐方式
ts
text.alignment = TextAnchor.UpperLeft;
字体颜色
ts
text.color = new Color(1.0, 0.0, 0.0, 1.0);// 默认为白色
行间距
ts
text.lineSpacing = 1.5; //设置行距为字号尺寸的1.5倍。
文本框大小
可以通过 resize
调整大小
ts
text.resize(200, 200);//设置文本块为(200,200)。
ts
import { Engine3D, Scene3D, Object3D, Camera3D, ForwardRenderJob, ViewPanel, TextAnchor, UITextField, DirectLight, HoverCameraController, Color } from "@orillusion/core";
async function demo() {
// initializa engine
await Engine3D.init();
// create new scene as root node
let scene3D:Scene3D = new Scene3D();
// create camera
let cameraObj:Object3D = new Object3D();
let camera = cameraObj.addComponent(Camera3D);
// adjust camera view
camera.perspective(60, window.innerWidth / window.innerHeight, 1, 5000.0);
// set camera controller
let controller = cameraObj.addComponent(HoverCameraController);
controller.setCamera(0, -20, 15);
// add camera node
scene3D.addChild(cameraObj);
// create light
let light:Object3D = new Object3D();
// add direct light component
let component:DirectLight = light.addComponent(DirectLight);
// adjust lighting
light.rotationX = 45;
light.rotationY = 30;
component.lightColor = new Color(1.0, 1.0, 1.0, 1.0);
component.intensity = 1;
// add light object
scene3D.addChild(light);
await Engine3D.res.loadFont('https://cdn.orillusion.com/fnt/0.fnt');
// create new forward rendering job
let renderJob:ForwardRenderJob = new ForwardRenderJob(scene3D);
// start rendering
Engine3D.startRender(renderJob);
// create panel root
let panelRoot: Object3D = new Object3D();
panelRoot.addComponent(ViewPanel);
renderJob.guiCanvas.addGUIChild(panelRoot);
// create text node
let textQuad = new Object3D();
panelRoot.addChild(textQuad);
// create textfield component
let text: UITextField = textQuad.addComponent(UITextField);
// set textfield size
text.uiTransform.resize(400, 60);
// set text value
text.text = 'Hello,Orillusion!';
text.fontSize = 32;
text.alignment = TextAnchor.MiddleCenter;
}
demo();