跳到主要内容
中文系列课

文本

⚠️ 已弃用：推荐使用数据绑定（Data Binding）替代直接操作文本运行。

高级 API 用法​

读取文本​

使用 Rive 实例上的 .getTextRunValue() API：

public getTextRunValue(textRunName: string): string | undefined

设置文本​

使用 Rive 实例上的 .setTextRunValue() API：

public setTextRunValue(textRunName: string, textRunValue: string): void

示例​

import {Rive} from '@rive-app/canvas'

const r = new Rive({
    src: "my-rive-file.riv",
    artboard: "my-artboard-name",
    autoplay: true,
    stateMachines: "State Machine 1",
    onLoad: () => {
        console.log("My design-time text is ", r.getTextRunValue("MyRun"));
        r.setTextRunValue("MyRun", "New text value");
    },
})

低级 API 用法​

获取 Rive Artboard 引用，按名称查找文本运行，然后获取/更新文本值。

import RiveCanvas from '@rive-app/canvas-advanced';

const bytes = await (await fetch(new Request('./my-rive-file.riv'))).arrayBuffer();
const myRiveFile = await rive.load(new Uint8Array(bytes));

const artboard = myRiveFile.defaultArtboard();
const textRun = artboard.textRun("MyRun");
console.log(`My design-time text is ${textRun.text}`);
textRun.text = "Hello JS Runtime!";

嵌套画板中的文本​

读取文本​

public getTextRunValueAtPath(textRunName: string, path: string): string | undefined

设置文本​

public setTextRunValueAtPath(textRunName: string, textRunValue: string, path: string): void

示例​

const r = new Rive({
    src: "my-rive-file.riv",
    artboard: "my-artboard-name",
    autoplay: true,
    stateMachines: "State Machine 1",
    onLoad: () => {
        r.setTextRunValueAtPath("MyRun", "New text value", "path/to/run");
    },
})

无障碍语义​

添加 ARIA Label​

<canvas
    id="rive-canvas"
    width="500"
    height="500"
    role="img"
    aria-label="Hello friend, welcome to my page"
></canvas>

使用 ARIA Live Region​

ARIA live region 允许你控制屏幕阅读器何时读出动态文本内容，适用于文本在特定状态变化时可见或改变的场景。

<canvas role="img" tabindex="0" aria-describedby="rating-animation-live" id="canvas"></canvas>
<p id="rating-animation-live" class="sr-only" aria-live="assertive">
    An interactive rating simulation.
</p>

示例​