图像动画功能在织物 js 中不起作用？答案

【问题标题】：Image animate function not working in fabric js?图像动画功能在织物 js 中不起作用？
【发布时间】：2013-02-27 19:51:30
【问题描述】：

我正在使用fabric js 制作画布动画，我创建了id 为“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)
});

谢谢你。

【问题讨论】：

标签： javascript html html5-canvas fabricjs

【解决方案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)
    });
});

【讨论】：