跳到主要内容
中文系列课

概览（Overview）

Rive 内容在运行时容器（canvas / view / widget / texture）中，往往尺寸不一致。
Layout（布局）相关参数决定了：

  • 如何缩放（Fit）
  • 如何对齐（Alignment）
  • 是否使用响应式布局引擎（Fit.Layout）

Fit（适配模式）

常用模式​

  • Layout：启用 Rive 布局引擎（响应式）
  • Contain（默认）：等比缩放，完整显示
  • Cover：等比缩放，容器铺满，可能裁切
  • Fill：非等比拉伸，铺满容器
  • FitWidth：宽度贴合
  • FitHeight：高度贴合
  • ScaleDown：仅在内容更大时缩小
  • None：不缩放，按原始尺寸

Alignment（对齐）

在 Layout/Fill 之外，可能会出现留白或裁切，此时使用对齐：

  • TopLeft / TopCenter / TopRight
  • CenterLeft / Center / CenterRight
  • BottomLeft / BottomCenter / BottomRight

默认通常为 Center。

Bounds（边界）

部分 runtime 支持通过 minX/minY/maxX/maxY 指定绘制边界。
该方式通常会覆盖 alignment 的效果。

各 Runtime 设置示例

Web​

const layout = new rive.Layout({
  fit: rive.Fit.Cover,
  alignment: rive.Alignment.TopCenter,
});

const r = new rive.Rive({
  src: 'https://cdn.rive.app/animations/vehicles.riv',
  canvas: document.getElementById('canvas'),
  layout,
  autoplay: true,
});

React​

<Rive
  src="https://cdn.rive.app/animations/vehicles.riv"
  layout={new Layout({ fit: Fit.Contain, alignment: Alignment.TopCenter })}
/>

React Native​

<RiveView
  file={riveFile}
  fit={Fit.Contain}
  alignment={Alignment.Center}
  style={styles.rive}
/>

Flutter​

RiveWidget(
  controller: controller,
  fit: Fit.contain,
  alignment: Alignment.center,
)

Apple（新版）​

let rive = try await Rive(file: file, fit: .contain(alignment: .center))

Android（Compose）​

Rive(
  riveFile,
  fit = Fit.Cover(Alignment.TopCenter)
)

Responsive Layouts（响应式布局）

如果你的文件在编辑器中配置了 Layouts（约束/布局规则），运行时请设置 Fit.Layout。

关键点​

  1. fit = Layout（必须）
  2. 可选 layoutScaleFactor 控制视觉比例
  3. 在 Web 场景，窗口变化后应触发 resize

Web 示例（关键调用）​

const rive = new Rive({
  src: 'your.riv',
  canvas,
  layout: new Layout({ fit: Fit.Layout }),
  onLoad: () => rive.resizeDrawingSurfaceToCanvas(),
});

window.onresize = () => rive.resizeDrawingSurfaceToCanvas();

React Native 示例​

<RiveView
  file={riveFile}
  fit={Fit.Layout}
  layoutScaleFactor={2.0}
  autoPlay
/>

Flutter 示例​

RiveWidget(
  controller: controller,
  fit: Fit.layout,
  layoutScaleFactor: 2.0,
)

实践建议

  1. UI 自适应优先尝试 Fit.Layout
  2. 图形容器比例固定时，优先 Contain 或 Cover
  3. 避免 Fill 造成图形拉伸变形（除非明确需要）
  4. 跨平台调试时关注 DPI 与设备像素比差异

参考