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 또는 간단한 도형이 될 수 있지만 다각형을 채우기위한 패턴으로 사용됩니다.