我正在从事一个项目,我被要求在 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);
}
Run Code Online (Sandbox Code Playgroud)
JSFiddle在这里:http : //jsfiddle.net/phoenixrizin/o359o11f/
任何建议将不胜感激!我一直在到处搜索,但还没有找到可行的解决方案。