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

我有一个具有透明背景和HTML画布的动画。在Fabric.js画布上集成Flash动画（或派生格式）

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

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

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

我的问题是：

什么是实现所描述的使用情况下，动画推荐的方式？

目前我最好的方法是尝试将CreateJS导出集成到React应用程序中，并在播放动画时用CreateJS画布“叠加”Fabric.JS画布。这个解决方案可能会工作，听起来很复杂和臃肿，因为我会集成另一个画布库（除了Fabric.js之外的CreateJS），并且都需要在定时/正确播放动画方面进行同步。

这里有一个类似的悬而未决的问题Animated GIF on Fabric.js Canvas

来源

2017-01-03 Paul Vincent Beigang

您可以尝试沙姆韦：https://github.com/mozilla/shumway – neopheus

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

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

-2

我知道只有一个办法，用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);

来源

2017-01-14 05:46:42 defo

你确认加载和显示动画的GIF是可能的吗？ –

http://stackoverflow.com/a/41559440/1744768指出，对于动画gif，只有1帧将显示在画布上 –

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

回答

相关问题