焦点（Focus）
概述
Rive 图形可以定义焦点节点：可获得焦点的元素，例如按钮、列表项或菜单项。Web (JS) 运行时会把这些焦点节点接到键盘上，因此用户可以用 Tab、Shift + Tab 和方向键在图形中移动，方式和在页面其余部分一样。
焦点节点及其顺序在 Rive 编辑器中设置，运行时会自动检测如何用焦点导航遍历它们。当正在播放的状态机包含焦点节点时，运行时会：
- 允许
<canvas>可聚焦，使图形成为页面 Tab 顺序中的一个停靠点。 - 在
<canvas>上监听键盘事件，并将其路由到图形中的焦点节点。
运行时本身不会在已聚焦节点上绘制视觉焦点指示器。已聚焦节点的外观（例如高亮或轮廓）应在图形本身中设计。
如果图形没有焦点节点，或用户 Tab 过了最后一个焦点节点，焦点会按常理移到页面上的下一个元素。
当 shouldDisableRiveListeners 为 true 时，Rive 不会从浏览器接收焦点。
用键盘导航
| 按键 | 行为 |
|---|---|
| Tab | 将焦点移到下一个焦点节点。 |
| Shift + Tab | 将焦点移到上一个焦点节点。 |
| ← / → / ↑ / ↓ | 将焦点移到该方向上最近的焦点节点。 |
当 Rive 图形处理了某个按键时，浏览器对该键的默认行为会被抑制。否则，浏览器按通常方式处理该键。其他按键和输入的文本如何到达图形，请参阅文本与按键输入。
进入和离开图形
从页面角度看，<canvas> 是一个 Tab 停靠点。在它内部，图形有自己的焦点顺序：
- Tab 进入 - 用户从页面上更早的元素按 Tab 进入画布时，焦点落在第一个焦点节点上。从更晚的元素按 Shift + Tab 进入画布时，焦点落在最后一个焦点节点上。如果图形已有聚焦节点，焦点会留在该节点上。
- 点击进入 - 点击画布会给它浏览器焦点。运行时不会在点击时把焦点移到某个节点，不过图形自身的监听器可能会。下一次 Tab 会进入图形。
- Tab 离开 - 在最后一个焦点节点上按 Tab，或在第一个上按 Shift + Tab，会把焦点交给页面上的下一个或上一个元素。也可以把图形的焦点节点设为循环或在边缘停下，此时焦点会留在图形内。
- 离开 - 当浏览器焦点离开画布到页面其他位置时（例如用户点击了另一个元素），运行时会清除图形内的焦点。切换浏览器标签页或窗口不会清除它。
方向焦点
一旦某个焦点节点获得焦点，方向键会根据节点在屏幕上的位置，把焦点移到按下方向上最近的焦点节点。若该方向没有焦点节点，焦点保持不变。
- 当焦点节点拥有焦点时，方向键不会滚动页面。
- 与 Alt、Ctrl 或 Cmd 一起按下的方向键留给浏览器，因此前进/后退等快捷键仍可用。
- 如果已聚焦节点本身处理该键（例如通过键盘监听器），该键会交给该节点，焦点不会移动。这对 Tab 同样适用。
设置 tab index
当图形有焦点节点，且 <canvas> 没有 tabindex（或其 tabindex 为 -1）时，运行时会将其设为 0，从而按 DOM 位置把画布放入页面的 Tab 顺序。若要使用其他值，可传入 tabIndex 参数，或在 <canvas> 上将 tabindex 属性设为非 -1 的值。
例如，传入 tabIndex: -1 可让画布不进入页面的 Tab 顺序。用户随后通过点击（或通过下文的 allowFocusInterrupt）进入图形，进入后仍可使用 Tab 和方向键。
const rive = new Rive({
canvas: document.getElementById("rive-canvas"),
src: "menu.riv",
stateMachine: "State Machine 1",
autoplay: true,
tabIndex: -1, // 可点击到达，但在页面 Tab 浏览时被跳过
});
允许 Rive 获取浏览器焦点
图形可以自行移动焦点。例如，状态动作可以在状态开始时聚焦某个节点。默认情况下，这不会移动浏览器焦点：节点可以在图形内获得焦点，但如果用户的浏览器焦点在页面其他位置，它会留在那里。
作为选择启用的行为，可将 focusOptions.allowFocusInterrupt 设为 true，让 Rive 从页面任意位置把浏览器焦点拉到画布上。
const rive = new Rive({
canvas: document.getElementById("rive-canvas"),
src: "menu.riv",
stateMachine: "State Machine 1",
autoplay: true,
autoBind: true,
focusOptions: {
allowFocusInterrupt: true,
},
});
| 选项 | 类型 | 说明 |
|---|---|---|
allowFocusInterrupt | boolean | 为 true 时，每当图形从「没有聚焦节点」变为「有聚焦节点」时，即使用户焦点在页面其他位置，画布也会获取浏览器焦点。默认为 false。 |
仅在图形确实需要时开启 allowFocusInterrupt。把焦点从用户正在做的事情上挪走可能造成突兀的体验。用户会失去在页面上的位置，浏览器可能会滚动到画布，键盘和屏幕阅读器用户可能在填写表单或操作控件时被拉走。
这种选择启用的行为最适合图形是页面上的主要体验时，例如全页菜单或游戏界面。
清除焦点
在 Rive 实例上调用 clearFocus()，可清除图形中焦点节点上的焦点，例如在关闭或隐藏画布时。
这只清除图形内部的焦点，不会把浏览器焦点从 <canvas> 上移走。若希望焦点落到某个具体元素，请自行聚焦该元素。一旦焦点被清除（无论是通过 clearFocus() 还是图形自身），下一次 Tab 会离开画布，而不是重新进入图形。
rive.clearFocus();