Orillusion

Appearance

本页内容

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）。


Orillusion powered by WebGPU on Chrome/Edge 113+
Please upgrade to latest Chrome/Edge

<
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();