使用Fabric.js可以用图案填充多边形吗？

Question

我在图案图像的画布上画了多边形对象。

fabric.Image.fromURL("http://netdna.webdesignerdepot.com/uploads/album_artwork/t2-7.jpg", function(img) { 

    img.scaleToWidth(100).set({ 
     originX: 'left', 
     originY: 'top' 
    }); 

    var patternSourceCanvas = new fabric.StaticCanvas(); 
    patternSourceCanvas.add(img); 

    var pattern = new fabric.Pattern({ 
     source: function() { 
     patternSourceCanvas.setDimensions({ 
      width: img.getWidth() + 0, 
      height: img.getHeight() + 0 
     }); 
     return patternSourceCanvas.getElement(); 
     }, 
     repeat: 'repeat' 
    }); 

    canvas.add(new fabric.Polygon([ 
     {x: 185, y: 0}, 
     {x: 250, y: 100}, 
     {x: 385, y: 170}, 
     {x: 0, y: 245} ], { 
     left: 220, 
     top: 200, 
     angle: -30, 
     fill: pattern 
     })); 
}); 

我在这里找到了这个资源。

http://fabricjs.com/dynamic-patterns/

但我要填补多边形对象SVG文件类型。

是否有可能？

谢谢...

Answer 1

只需更换： patternSourceCanvas.add（IMG）;

与： patternSourceCanvas.add（yourShape）;

上面代码中的yourShape可能是svg或任何简单的形状或其他，它们将被用作填充多边形的图案。