跳到主要内容

FAQ

常见问题解答

Web 运行时的常见问题。

常见问题​

我们整理了使用基于 Web 运行时时的常见问题。请查看以下各节以了解如何在应用程序中解决这些问题。

为什么我在获取 Rive 文件时遇到 CORS 错误？​

在某些情况下，你可能决定通过 CDN 托管你的 .riv 文件，例如将它们存储在 AWS S3 中。在运行时，一些用户可能会遇到 CORS 问题，导致无法在 Web 运行时加载 .riv 文件。当这种情况发生时，请确保在主机平台上设置 CORS 头，这样当在 Web 应用/网站中访问 Rive 文件内容时，浏览器就不会阻止数据下载。

了解更多关于 CORS 是什么。点击这里查看如何在 AWS S3 中配置 CORS 的更多文档。

有没有更小的依赖包可以使用？我的 Rive 图形不需要所有的 Rive 功能。​

是的！你可能注意到从 Web 运行时的 v2.0.0 版本开始，浏览器请求的 rive.wasm 文件大小增加了。这是因为在 WASM 构建中包含了一个新的依赖项，用于支持强大且灵活的 Rive Text 功能的文本引擎。

但是，如果你不需要使用原生的 Rive Text 功能（或者更喜欢使用导入的 SVG 文本），你可以使用 @rive-app/canvas-lite，它提供了与 @rive-app/canvas 相同的 API 和类似的渲染功能，但包体积更小。

为什么 canvas 的 width/height 属性值发生了变化？​

你可能注意到 DOM 中 <canvas> 的 width/height 属性比你最初设置的值大了一些倍数。在内部，高级 API 会尝试通过考虑 window.devicePixelRatio 来调整原始设置（或默认）的 canvas width/height 属性。通过这种内部计算，我们能够适应高 DPI 屏幕，使 Rive 动画不会出现"模糊"的输出。但是，我们不会尝试调整 canvas 元素相对于 DOM 的实际大小。这最终由你来配置。

为什么我的动画在运行时模糊？​

这可能是因为 <canvas> 元素上没有设置 width/height 属性来确定画布的绘制大小，或者默认值不够大，无法满足动画画板的边界。我们建议至少在 canvas 上设置一些 CSS 样式的 width/height 属性来确定页面上画布的大小，因为运行时将使用这些值来尝试为画布元素设置最佳拟合的绘制大小。

此外，你可以利用实例化的 Rive 对象上的公共函数 resizeDrawingSurfaceToCanvas，它可以根据用户的 devicePixelRatio 帮助调整 DOM 中画布的 width/height 属性。（注意：这适用于画布的绘制表面，而不是画布元素的边界框大小）。

<canvas
    id="some-canvas-element-id"
    style="width: 400px; height: 400px;"
></canvas>
const canvasElement = document.getElementById('some-canvas-element-id');

const r = new Rive({
  src: 'some-file.riv',
  canvas: canvasElement,
  autoplay: true,
  onLoad: () => {
    r.resizeDrawingSurfaceToCanvas();
  },
});

如果你使用 resizeDrawingSurfaceToCanvas 函数，请确保将画布的实际样式大小限制在所需的值，否则画布可能会变成两倍大小。

canvas 的 width/height 属性和 CSS width/height 有什么区别？​

好问题！对于 <canvas> 元素，有两种类型的空间大小需要考虑。

一个是页面上画布元素本身的大小，这通常是大多数人在元素上设置 width/height 样式时所想到的。这涉及设置元素上的 CSS width/height 属性。

<canvas style="width: 400px; height: 400px;"></canvas>

Image

然后是 <canvas> 元素上的 width/height 属性，它决定了画布的绘制表面大小。在某些情况下，如果元素的 width/height 没有设置 CSS 样式，这些值也可能影响实际的画布大小。但主要是，这些 width/height 属性帮助确定画布元素本身内部有多少可用的绘制空间。与 CSS width/height 属性不同，这些值是无单位的。

<canvas width="800" height="800"></canvas>

Image

理想情况下，你要确保画布上的 width/height 属性至少要等于或大于画布上的 CSS width/height 属性，否则可能会出现模糊的输出（参见上文关于如何解决模糊动画的内容）。

为什么我的状态机没有播放？​

确保在实例化 Rive 时指定了带有状态机名称的 stateMachines 属性。要自动播放状态机，别忘了在实例化 Rive 对象时设置 autoplay: true。

如何让其他 Web 框架支持 Rive？​

目前，除了这里的普通 JS/TS 运行时外，我们官方支持 React 运行时。社区已经创建了支持其他基于 Web 的库/框架（如 Angular）的包装器。我们建议查看 rive-react 源项目，了解它如何将这个 JS 运行时包装成 React 友好的组件和钩子，以便在基于 React 的应用程序中更好地使用 Rive。我们鼓励你探索为任何其他你可能感兴趣的基于 Web 的框架/库构建 Rive！

我的 Content-Security-Policy 设置为阻止 unsafe-eval，现在 Rive 无法加载。我该怎么办？​

我们的 Web (JS) 运行时建立在提供渲染抽象的 cpp 运行时层之上。Web 运行时使用 Web Assembly (WASM) 将 cpp 层绑定到 JS API。我们使用名为 Emscripten 的工具来完成这个编译。作为该工具源代码和绑定技术的一部分，它可能使用一些 unsafe-eval 策略会阻止的技术来生成 JS API。因此，运行时可能无法成功加载 Web Assembly，从而导致 Rive 加载失败，因为 Web Assembly 对于在 Web 中运行 Rive 至关重要。在这里查看更多关于该问题的信息。

要解决这个问题，有一个新的 CSP 设置可以让你仍然阻止 unsafe-eval，但同时也给予 WASM 执行一些自由；wasm-unsafe-eval。虽然这不是完美的解决方案，但比允许任何不安全的 JS 评估要好，同时还允许 Web 应用程序继续使用 WASM 构建。