圖像動畫功能不能在織物js中工作？

Question

我使用fabric js作爲canvas動畫，並且我使用id'canvas'創建了canvas，然後在其中放置圖像並將左側位置設置爲零。它工作正常，但動畫功能不起作用。

請幫幫我。

我的代碼：

HTML：

<canvas id="canvas" width="990" height="285"> 
    This text is displayed if your browser 
    does not support HTML5 Canvas. 
</canvas> 

的javascript：

var canvas = new fabric.Canvas('canvas'); 

var image = new Image(); 
image.src = 'images/body.png'; 

var bugBody = fabric.Image.fromURL(image.src, function (oImg) { 
    canvas.add(oImg); 
     oImg.set('left',0) 
}); 

bugBody.animate('left', 200, { 
    onChange: canvas.renderAll.bind(canvas) 
}); 

感謝你。

Answer 1

我認爲這是因爲您的圖像未完整加載。
因此，您可以將您的動畫代碼放入回調函數中。
入住此的jsfiddle：http://jsfiddle.net/9x9Qc/
像這樣：

var srcImg = "http://fabricjs.com/lib/pug.jpg"; 

// canvas 
var canvas = new fabric.Canvas('c'); 

fabric.Image.fromURL(srcImg, function (oImg) { 
    canvas.add(oImg); 
    oImg.set('left',0); 
    oImg.set('top', 100); 
    oImg.scale(.25); 
    canvas.renderAll(); 

    // and then, we can animate the image  
    oImg.animate('left', 200, { 
     onChange: canvas.renderAll.bind(canvas) 
    }); 
});