跳到主要内容
中文系列课

常见问题

关注点​

我们汇编了使用基于 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 文本 功能的文本引擎。

但是，如果你不需要使用原生 Rive 文本功能（或更倾向于使用导入的 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 的绘制大小，或者默认值不够大，无法满足动画的画板边界。我们建议至少在 canvas 上设置一些 CSS 样式 width/height 属性，以确定页面上 canvas 框的大小，因为运行时随后将使用这些值来尝试为 canvas 元素设置最佳适配的绘制大小估计。

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

<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 的实际样式大小绑定到所需值，否则 canvas 可能会翻倍增大。

Canvas 上的 width/height 属性和 CSS width/height 之间有什么区别？​

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

一种是页面上 canvas 元素本身的大小，这通常是大多数人在设置元素上的 width/height 样式时所考虑的。这涉及设置元素上的 CSS width/height 属性。

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

Image

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

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

Image

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

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

确保在实例化 Rive 时指定了 stateMachines 属性，并提供你的状态机名称。要自动播放状态机，不要忘记在实例化 Rive 对象时设置 autoplay: true。

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

目前，除了纯 JS/TS 运行时外，我们官方支持 React 运行时。已经有社区驱动的封装创建来支持其他基于 Web 的库/框架。我们建议查看 rive-react 源项目，了解它如何将此 JS 运行时包装为 React 友好的组件和 hooks，以使在基于 React 的应用中使用 Rive 更好。我们鼓励你探索为你感兴趣构建 Rive 的任何其他基于 Web 的框架/库做同样的事情！

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

我们的 Web (JS) 运行时构建在提供渲染抽象的 cpp 运行时层之上。Web 运行时使用 web assembly (WASM) 将 cpp 层绑定到 JS API。我们使用名为 Emscripten 的工具来进行此编译。作为该工具源代码和绑定技术的一部分，它可能使用一些技术来生成 J​​S API，这些技术会被 unsafe-eval 策略阻止。因此，运行时可能无法成功加载 web assembly，从而 Rive 将无法加载，因为 web assembly 对于在 Web 中运行 Rive 至关重要。参见此处了解更多关于该问题的信息。

为了解决这个问题，有一个新的 CSP 设置你可以设置，它仍然允许你阻止 unsafe-eval，但也为 WASM 的执行提供了一些自由度：wasm-unsafe-eval。虽然不是完美的解决方案，但它比允许任何不安全的 JS 评估更好，同时允许 Web 应用仍然采用 WASM 构建。