Fabric.js 画布上的动画 GIF

Question

我正在从事一个项目，我被要求在 fabric.js 画布上支持动画 GIF。

根据https://github.com/kangax/fabric.js/issues/560，我按照建议使用fabric.util.requestAnimFrame 定期渲染。使用这种方法可以很好地呈现视频，但 GIF 似乎没有更新。

var canvas = new fabric.StaticCanvas(document.getElementById('stage'));

fabric.util.requestAnimFrame(function render() {
    canvas.renderAll();
    fabric.util.requestAnimFrame(render);
});

var myGif = document.createElement('img');
myGif.src = 'http://i.stack.imgur.com/e8nZC.gif';

if(myGif.height > 0){
    addImgToCanvas(myGif);
} else {
    myGif.onload = function(){
        addImgToCanvas(myGif);
    }
}

function addImgToCanvas(imgToAdd){
    var obj = new fabric.Image(imgToAdd, {
        left: 105,
        top: 30,
        crossOrigin: 'anonymous',
        height: 100,
        width:100
    }); 
    canvas.add(obj);
}

JSFiddle在这里：http : //jsfiddle.net/phoenixrizin/o359o11f/

任何建议将不胜感激！我一直在到处搜索，但还没有找到可行的解决方案。

Answer 1

根据Canvas 2DRenderingContext方法的规范drawImage，

具体来说，当CanvasImageSource对象表示HTMLImageElement中的动画图像时，用户代理必须使用动画的默认图像（格式定义的图像将在不支持或禁用动画时使用），或者，如果存在为 CanvasRenderingContext2D API 渲染图像时，没有这样的图像，即动画的第一帧。

这意味着只有动画画布的第一帧才会绘制在画布上。
这是因为我们对 img 标签内的动画没有任何控制。

而fabricjs基于canvas API，因此受相同规则的监管。

然后，解决方案是解析 gif 动画中的所有静态图像并将其导出为精灵表。然后，借助sprite 类，您可以在 Fabricjs 中轻松地为其设置动画。