fabric.js：如何剪辑我的数字或字母精灵？

Question

我有一个精灵（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/

中查看更多详情