在 Fabric.js 画布上集成 Flash 动画（或派生格式）

Posted 2023-03-25

【中文标题】在 Fabric.js 画布上集成 Flash 动画（或派生格式）

【英文标题】：Integrate Flash animation (or derived format) on Fabric.js canvas

【发布时间】：2017-05-17 09:36:39

【问题描述】：

我有一个带有透明背景的动画和一个 html 画布。

在将对象添加到画布之前，应该播放动画。

动画源是一个 Flash 文件，还有一个 HTML/JS (CreateJS) 导出和一个可用的动画 GIF。

画布使用在 React 应用程序中运行的 Fabric.js。

我的问题如下：

在所述用例中实现动画的推荐方法是什么？

目前我最好的方法是尝试将 CreateJS 导出集成到 React 应用程序中，并在播放动画时将 Fabric.JS 画布与 CreateJS 画布“覆盖”。这个解决方案可以工作，对我来说听起来既复杂又臃肿，因为我将集成另一个画布库（除了 Fabric.js 之外的 CreateJS），并且两者都需要在时间/正确播放动画方面同步。

这是一个类似的未回答问题Animated GIF on Fabric.js Canvas

【问题讨论】：

你可以试试shumway：github.com/mozilla/shumway

我已经回答了你链接的问题，所以这会给你一个解决方法：将你的动画转换为 gif，然后解析这个 gif 的所有帧并创建它的精灵表。您还可以使用 createjs 画布，并在 rAF 循环中将其绘制在您的 fabricjs 上。但是没有办法直接在画布上绘制flash内容。所以一个最终的解决方案是使用 DOM 操作和 CSS 将嵌入的内容覆盖在画布上。

@Kaiido “rAF 循环”是什么意思，你能举个例子吗？

fabric.js sprite 类可以在这里找到fabricjs.com/animated-sprite

【参考方案1】：

我只知道一种使用 fabric.js 添加图像的方法。首先在页面加载时加载图像，然后将它们显示在画布上。但是根据我的经验，fabric.js 在每个元素上都设置了很多功能，所以如果你想同时显示数千张图片，就很难加载。

var canvas = new fabric.Canvas('c');
var imgElement = document.getElementById('my-image');
var imgInstance = new fabric.Image(imgElement, 
  left: 100,
  top: 100,
  angle: 30,
  opacity: 0.85
);
canvas.add(imgInstance);

【讨论】：

您确认可以通过这种方式加载和显示动画 gif 吗？

***.com/a/41559440/1744768 声明对于动画 gif，画布上只会显示 1 帧