文档
核心
元素
图片

图像

⚠️

本页面正在建设中

⚠️

测试功能，可能会有变动

此类继承自 Displayble

图像对于视觉小说非常重要。它用于显示角色的外观

在 NarraLeaf-React 中，图像仅控制角色的外观。它不控制角色的对话。为此，你可以使用 Character

公共方法

构造函数

⚠️

你不能在同一图像中混合使用基于标签的图像和基于 src 的图像

Tag-based Image

例如，如果你有一个带有 happy、sad、angry 等标签的图像，你可以使用基于标签的图像

以下是一个基于标签的图像的示例

const image = new Image({
    src: {
        groups: [
        ["happy", "sad", "angry"],
        ["shirt", "jacket", "t-shirt"],
        ["trousers", "skirt", "shorts"],
        ],
        defaults: ["happy", "shirt", "trousers"],
        resolve: (emotion, top, bottom) => `https://你的/图片/路径/${emotion}_${top}_${bottom}.png`
    } as const,
});
// 默认图片将是 `https://你的/图片/路径/happy_shirt_trousers.png`
⚠️

注意: 你不能在同一组或不同组中有两个相同的标签

const image = new Image({
    src: {
        groups: [
        ["a", "b", "c"],
        ["1", "2", "3"],
        ["a"], // 无效，标签 "a" 已在第一组中
        ["x", "y", "y"], // 无效，标签 "y" 重复
        ],
        defaults: ["a"], // 无效，默认定义必须包含完整的标签集
    } as const,
    /* ... */
});

Src-based Image

如果你没有标签，你可以使用基于 src 的图像

const image = new Image({
    src: "https://你的/图片/路径.png",
});

Wearable Image

你可以为图像添加一些可穿戴物品 可穿戴图像将随主图像一起移动/缩放/动画

const child = new Image({
    /* ... */
});
const parent = new Image({
    /* ... */
}).wear(child);

注意: 图像只能有一个父图像

copy

复制图像

  • 返回 Image
const newImage = image.copy();

useLayer

为图像使用图层

const layer = new Layer(/* ... */);
 
image.useLayer(layer);

链式方法

char

设置角色的形象

  • src: ImageSrc | Color | SelectElementFromEach<Tags> | FlexibleTuple<SelectElementFromEach<Tags>> - 图像的源
  • transition?: ImageTransition - 对于 ImageTransition，参见 Transition
image.char("你的/图片/路径", new Fade(1000));

或对于基于标签的图像

// happy, shirt, trousers
const image = new Image({
    tag: {
        groups: [
            ["happy", "sad", "angry"],
            ["shirt", "jacket", "t-shirt"],
            ["trousers", "skirt", "shorts"],
        ],
        defaults: ["happy", "shirt", "trousers"],
    } as const,
    /* ... */
});
 
//  happy , [jacket], [t-shirt]
image.char(["jacket", "t-shirt"], new Fade(1000));
 
// [angry],  jacket ,  t-shirt
image.char(["angry"], new Fade(1000));

darken

设置图像的黑暗程度

  • darkness: number - 图像的黑暗程度，介于 0 和 1 之间。0 是全亮，1 是全黑
  • duration?: number - 过渡的持续时间
  • easing?: TransformDefinitions.EasingDefinition - 见 TransformDefinitions.EasingDefinition
image.darken(0.5, 500, "easeIn");

公共方法

addWearable

为图像添加可穿戴物品

可穿戴物品是一项功能，允许你添加与主图像相关的图像。例如，你可以为角色添加一顶帽子 并且该可穿戴图像将随主图像一起移动/缩放/动画

  • children: Image | Image[] - 可穿戴图像或图像数组
  • 返回 this
const childImage = new Image(/* ... */);
 
image.addWearable(childImage);

wear

addWearable 的别名

bindWearable

将此图像作为可穿戴物品绑定到父图像

  • parent: Image - 父图像
  • 返回 this
childImage.bindWearable(parentImage);

asWearableOf

Alias of bindWearable

停顿声音