javascript - Fabric.js - 如何从 Sprite 表制作动画

Question

JavaScript 语法:

context.drawImage(img,srcX,srcY,srcWidth,srcHeight,x,y,width,height);

在 Javascript 中，如果我想要为下面的 spritesheet 制作动画，我只需更新每个动画帧的 srcX 和 srcY 即可捕获图像的片段。

这会导致每个帧被剪切并单独显示在 Canvas 上，当以固定帧速率更新时，会产生流畅的 Sprite 动画，如下所示:

如何使用“Fabric.js”库执行此操作？

注意:实现此目的的一种方法是设置 canvasSize = frameSize，以便在任何给定时间只能看到一帧。然后通过移动图像，可以将不同的帧放置在 Canvas 内以模拟动画。然而，这不适用于大 Canvas 或可变的帧尺寸。

Answer 1

看看这个，它做了同样的事情。

行走的人形。 Fabric.js，图像动画。

        var URL = '/image/M06El.jpg';
        var canvas = new fabric.Canvas('canvas');
        var positions = {
            topSteps:2,
            leftSteps:4
        };
        canWalk(URL,positions);
        function canWalk(URL,positions){
            var myImage = new Image();
            myImage.src = URL;
    
            myImage.onload = function() {
                var topStep = myImage.naturalHeight/positions.topSteps;
                var leftStep = myImage.naturalWidth/positions.leftSteps;
    
                var docCanvas = document.getElementById('canvas');
                docCanvas.height = topStep;
                docCanvas.width = leftStep;
                fabricImageFromURL(0,0);
                var y = 0;
                var x = 0;
                setInterval(function(){
                    if(x == positions.leftSteps)
                    {
                        x = 0;
                        y++;
                        if(y==positions.topSteps)
                        {
                            y=0;
                        }
                    }
                    fabricImageFromURL(-y*topStep,-x*leftStep);
                    x++;
                },100);
            };
        }
    
	function fabricImageFromURL(top, left)
	{
		console.log(top, left);
		fabric.Image.fromURL(URL, function (oImg) {
			oImg.set('left', left).set('top',top);
			oImg.hasControls = false;
			oImg.hasBorders  = false;
			oImg.selectable  = false;
			canvas.add(oImg);
			canvas.renderAll();
		}, {"left": 0, "top": 0, "scaleX": 1, "scaleY": 1});
	}

<canvas id="canvas"></canvas>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.3/fabric.min.js"></script>