显示图片

要显示图片，你需要使用 Image 元素。

定义图片

你可以通过提供 IImageUserConfig 对象来构建图片。

import {Image} from "narraleaf-react";

const character1Happy = new Image({
    src: "https://你的图片链接",
    zoom: 0.5, // 图片的缩放比例
    position: {
        yalign: 0.3, // 图片的垂直对齐方式
        xalign: 0.5, // 图片的水平对齐方式
    },
});

这张图片将以 0.5 的比例显示在屏幕的左侧。

显示图片

你可以通过向场景添加动作来显示图片。

scene1.action([
    character1Happy.show(),
]);

图片将立即显示在屏幕上。

你可以使用缓动效果显示图片。

scene1.action([
    character1Happy.show({
        ease: "easeInOut",
        duration: 1000,
    }),
]);

隐藏图片

你可以通过向场景添加动作来隐藏图片。

scene1.action([
    character1Happy.hide(),
]);

图片将立即从屏幕上隐藏。

你可以使用缓动效果隐藏图片。

scene1.action([
    character1Happy.hide({
        ease: "easeInOut",
        duration: 1000,
    }),
]);

更改图片

基于 Src 的图片

你可以通过更新图片源来更改图片。

scene1.action([
    character1Happy.char("https://新图片链接"),
]);

或者使用 transition。

import {Fade} from "narraleaf-react";

scene1.action([
    character1Happy.char("https://新图片链接", new Fade(300)),
]);

使用基于标签的图片

你可以使用基于标签的图片来显示图片。

注意：基于标签的图片是一项功能，允许你通过提供标签来更改图片外观。

你不能将基于标签的图片配置与普通图片配置混合使用。普通图片配置没有 tag 属性，其 src 属性应为字符串。

import {Image} from "narraleaf-react";

const image = new Image({
    tag: {
        groups: [
            ["happy", "sad", "angry"], // 组 1
            ["shirt", "jacket", "t-shirt"], // 组 2
            ["trousers", "skirt", "shorts"], // 组 3
        ],
        defaults: ["happy", "shirt", "trousers"], // 默认外观
    } as const,
    src: (emotion, top, bottom) => `https://你的/图片/路径/${emotion}_${top}_${bottom}.png`, // 图片源
});
// 默认图片将是 `https://你的/图片/路径/happy_shirt_trousers.png`
 
scene1.action([
    image.show(),
    image.char(["angry", "shorts"], new Fade(1000)), // 将图片更改为 `https://你的/图片/路径/angry_shirt_shorts.png`
]);

有关基于标签的图片的更多信息，请阅读e Image 文档.

动画化图片

你可以使用 Transform 对图片进行动画处理。

import {Transform, CommonPosition} from "narraleaf-react";

// 将图片移动到屏幕右侧
scene1.action([
    character1Happy.transform(
        Transform.create()
            .position("right")
            .commit({ duration: 120, ease: "easeOut" })
    ),
]);
 
// 或者
 
scene1.action([
    character1Happy.transform(Transform.left(120, "easeOut")),
]);

图片将以 120 毫秒的持续时间和缓出效果移动到屏幕右侧。

有关 Transform 的更多信息，请查看 Transform 文档.

显示对话播放故事