UIImage

UIImage 组件提供图片的显示功能, 你可以通过加载单个图片或通过 loadAtlas 加载精灵图集 GUISprite 的列表到引擎中，然后指定 GUISprite 赋予图片组件供渲染。

TIP

制作 Atlas 精灵图集依赖外部第三方工具，请自行搜索制作方法。默认 UIImage 组件未设置精灵图，将以白色方块形式呈现

import { Engine3D } from '@orillusion/core';

// 创建用于显示UI的面板
let panelRoot: Object3D = new Object3D();
panelRoot.addComponent(ViewPanel);
// 激活UICanvas
let canvas = this.scene.view.enableUICanvas();
// 面板加入到系统canvas中
canvas.addChild(panelRoot);
// 创建图片节点
let imageQuad = new Object3D();
panelRoot.addChild(imageQuad);
this.image = imageQuad.addComponent(UIImage);
this.image.uiTransform.resize(400, 60);
this.image.uiTransform.y = 100;

// 加载 Atlas 图集素材
await Engine3D.res.loadAtlas('atlas/UI_atlas.json');
this.image.sprite = Engine3D.res.getGUISprite('logo');

加载图集

Atlas 封装了一组位图图片对象，我们可以通过 Engine3D.res.loadAtlas 加载全部图集，然后通过 Engine3D.res.getGUISprite 获取其中某一个元素图片，赋予组件进行渲染。

// 加载 Atlas 图集素材
await Engine3D.res.loadAtlas('atlas/UI_atlas.json');
// 在 UI_atlas.json 定义了 logo 素材
image.sprite = Engine3D.res.getGUISprite('logo');

加载单个图片

我们也可以通过已经创建好的 Texture2D 对象来主动生成一个 GUISprite，然后赋予 UIImage 组件供显示：

let bitmapTexture2D = new BitmapTexture2D();
//设置y轴翻转
bitmapTexture2D.flipY = true;
//加载贴图
await bitmapTexture2D.load('images/webgpu.png');
//创建GUISprite
let mySprite = makeAloneSprite('webgpu', bitmapTexture2D);
//将GUISprite赋予UIImage组件
this.image.sprite = mySprite;

修改图片颜色

通过设置 color 属性更改图片颜色，如果组件有设置贴图，会乘法叠加贴图像素颜色

image.color = new Color(1.0, 0.0, 0.0, 1.0); //red

修改图片大小

通过调用 uiTransform.resize() 来进行图片大小的调节

image.uiTransform.resize(150, 150)

组件visible（可见/隐藏）

image.visible = false;//true

销毁图片

image.destroy();

拉伸/平铺类型

精灵图类型：参考 ImageType，设置精灵的渲染类型；

• Simple：默认类型，精灵图被拉伸平铺到指定区域
• Sliced：按照九宫格的方式进行拉伸渲染
• Tiled：未支持
• Filled：未支持

image.imageType = ImageType.Simple;

WebGPU is not supported in your browser
Please upgrade to latest Chrome/Edge

<

import { Engine3D, Scene3D, Object3D, Camera3D, View3D, ViewPanel, UIImage, HoverCameraController, Color, ImageType, AtmosphericComponent, BitmapTexture2D, makeAloneSprite, WorldPanel, GPUCullMode, UIPanel } from '@orillusion/core';

class Sample_Image {
    async run() {
        // initializa engine
        await Engine3D.init();
        // create new scene as root node
        let scene3D: Scene3D = new Scene3D();
        scene3D.addComponent(AtmosphericComponent);
        // create camera
        let cameraObj: Object3D = new Object3D();
        let camera = cameraObj.addComponent(Camera3D);
        // adjust camera view
        camera.perspective(60, Engine3D.aspect, 1, 5000.0);
        // set camera controller
        let controller = cameraObj.addComponent(HoverCameraController);
        controller.setCamera(0, -20, 100);
        // add camera node
        scene3D.addChild(cameraObj);

        let view = new View3D();
        view.scene = scene3D;
        view.camera = camera;
        Engine3D.startRenderView(view);

        // create panel root
        let panelRoot: Object3D = new Object3D();
        let panel: UIPanel = panelRoot.addComponent(WorldPanel);
        panel.cullMode = GPUCullMode.none;
        panelRoot.localScale.set(0.1, 0.1, 0.1);
        let canvas = view.enableUICanvas();
        canvas.addChild(panelRoot);

        // load a BitmapTexture2D
        let bitmapTexture2D = new BitmapTexture2D();
        bitmapTexture2D.flipY = true;
        await bitmapTexture2D.load('https://cdn.orillusion.com/images/webgpu.png');

        // create image node
        let imageQuad = new Object3D();
        panelRoot.addChild(imageQuad);
        // create image component
        let image: UIImage = imageQuad.addComponent(UIImage);
        // set image size
        image.uiTransform.resize(50, 50);
        // set image source
        image.sprite = makeAloneSprite('webgpu', bitmapTexture2D);
    }
}

new Sample_Image().run();