1

キャンバス アニメーションにファブリック 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)
});

ありがとうございます。

4

1 に答える 1

5

これは、画像が完全にロードされていないために発生すると思います。
したがって、コールバック関数内にアニメーション コードを配置できます。
この 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)
    });
});
于 2013-02-27T11:51:30.763 に答える