EUI-NEO
文档中心GitHub

图片、网络图片与 SVG

EUI-NEO 技术文档。

图片、网络图片与 SVG

当前项目有图片 DSL：ui.image(id)。它和 ui.rect、ui.text 一样由 core::dsl::Runtime 管理，不需要页面或组件直接创建 OpenGL primitive。

DSL 写法

ui.image("logo")
    .size(96.0f, 96.0f)
    .source("assets/icon.svg")
    .radius(18.0f)
    .opacity(0.92f)
    .cover()
    .build();

ui.image("remote")
    .size(260.0f, 150.0f)
    .url("https://example.com/picture.png")
    .cover()
    .radius(16.0f)
    .build();

ui.image("bing")
    .size(260.0f, 150.0f)
    .bingDaily(0, "zh-CN")
    .cover()
    .radius(16.0f)
    .build();

components::image(ui, id) 会返回一个已经套用默认 theme token 的 ImageBuilder。如果页面有自己的 light/dark token，推荐传入：

components::image(ui, "avatar", tokens)
    .source("assets/icon.png")
    .cover()
    .build();

支持能力

Fit 模式

默认是 ImageFit::Cover。

.cover()    // 铺满区域，保持比例，超出部分裁剪
.contain()  // 完整显示图片，保持比例，区域可能留空
.stretch()  // 拉伸到区域，可能变形
.fit(core::ImageFit::Cover)

Gallery 的 about logo 和 Bing 图片都使用 cover，因此图片不会被压缩变形，而是适应裁剪。

可动画属性

Image 进入 dirty rect 流程，支持这些属性动画：

示例：

ui.image("avatar")
    .size(active ? 120.0f : 88.0f, active ? 120.0f : 88.0f)
    .source("assets/icon.png")
    .radius(active ? 32.0f : 18.0f)
    .rotate(active ? 0.25f : 0.0f)
    .transition(0.28f, core::Ease::OutCubic)
    .animate(core::AnimProperty::Frame |
             core::AnimProperty::Radius |
             core::AnimProperty::Transform)
    .build();

交互

Image 支持通用交互：

ui.image("github.logo")
    .size(96.0f, 96.0f)
    .source("assets/icon.png")
    .onClick([] {
        core::platform::openUrl("https://github.com/sudoevolve/EUI-NEO");
    })
    .build();

但 Image 没有内置 hover / pressed 视觉状态。需要 hover 变色、按压缩放等效果时，推荐外层使用 Stack + Rect + Image 组合，或封装成组件。

网络文本 API 示例

通用网络文本请求在 core/network.h：

core::network::requestText(
    "bing.meta",
    "https://www.bing.com/HPImageArchive.aspx?format=js&n=1&idx=0&mkt=zh-CN");

const core::network::TextResult result = core::network::textResult("bing.meta");
if (result.ready && result.ok) {
    ui.text("api.text")
        .size(520.0f, 72.0f)
        .text(result.body)
        .wrap(true)
        .build();
}

requestText 是后台请求，不阻塞 UI。请求完成后会唤醒 GLFW 事件循环，app/dsl_app.h 会在收到网络文本完成信号后重新 compose。

Gallery 的 Bing 页面包含本地 PNG、本地 SVG、Bing daily 图片和 Bing API 文本示例。

当前限制

实现位置