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 link:https://jsfiddle.net/fLh5a7k9/

Answer 1

您可以使用 fabric.Sprite.fromURL 从 fabric.js 创建精灵。它还将提供其他助手来创建和管理精灵

详情见http://fabricjs.com/animated-sprite/

Answer 2

根据评论：

像这样重写你的代码：

(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);
    }
});

工作fiddle：http://jsfiddle.net/ZxYCP/172/

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

fabric.js: How to clip my number or alphabet sprite?

javascript

canvas

html5-canvas

fabricjs