fabric.js：如何裁剪我的數字或字母精靈？

Question

我有一個數字的sprite（36hx360w），我想將其裁剪為0、1、2，...，9，制作10個fabric.Image對象，其寬度為36px，高度為36px。

這是我嘗試過的方法，但是沒有按預期工作。

fabric.Image.fromURL(my_sprite, function(img) {
  canvas.add(img);
  canvas.renderAll();
},{
  width:360,
  height:36,
  top:0,
  left:0,
  clipTo:function(ctx){
    ctx.rect(0,0,36,36);
  }
});

這是jsfiddle鏈接： https ://jsfiddle.net/fLh5a7k9/

Answer 1

根據評論：

像這樣重寫代碼：

(function() {
    var canvas = this.__canvas = new fabric.Canvas('c');
    for (i = 0; i < 10; i++) { 
        drawRect(canvas, i);
    }
    canvas.renderAll();
})();

function drawRect(canvas, i){    
        fabric.Image.fromURL('http://i.stack.imgur.com/aGOgp.png', function(img) {
        canvas.add(img);  
    },{
        width:360,
        height:36,
        top: 36 * i,
        left: -( 36 * i ),
        clipTo:function(ctx){
            ctx.rect(-180 + 36 * i, -18 , 36, 36);
    }
});

工作提琴： http : //jsfiddle.net/ZxYCP/172/

Answer 2

您可以使用fabric.Sprite.fromURL ，它允許您從fabric.js創建精靈。 它還將為創建和管理精靈提供其他幫助。

在http://fabricjs.com/animated-sprite/中查看更多詳細信息