ファブリックjs内のポリゴンにイメージを追加するにはどうすればよいですか？

Question

1ポリゴンオブジェクトにイメージを追加しようとすると、明確なポイントを持つポリゴンを作成しています。イメージはポリゴンにレンダリングされていません。キャンバスの開始点からレンダリングされます。以下は私が使ったコードです。私が間違っているところを教えてください。 は、任意の助けに感謝！感謝

Jsfiddleリンク https://jsfiddle.net/u3bfscom/6/ ポイントを追加して、後でテクスチャを追加するポリゴンを作成します。

 fabric.Image.fromURL('https://image.freepik.com/free-photo/roof-texture_21206171.jpg', function (oImg) { 
     for(var i=0;canvas.getObjects().length>i;i++) 
     { 
      if(canvas.getObjects()[i].name=="Polygon") 
      { 
        canvas.getObjects()[i].set(oImg); 
      } 
     } 
     canvas.renderAll(); 
     }); 

Answer 1

答えを得ました。

fabric.Image.fromURL('https://image.freepik.com/free-photo/roof-texture_21206171.jpg', function (img) { 
      var patternSourceCanvas = new fabric.StaticCanvas(); 
      patternSourceCanvas.add(img); 
      var pattern = new fabric.Pattern({ 
       source: function() { 
       patternSourceCanvas.setDimensions({ 
        width: img.getWidth(), 
        height: img.getHeight() 
       }); 
       return patternSourceCanvas.getElement(); 
       }, 
      }); 
      console.log(img); 
      for(var i=0;canvas.getObjects().length>i;i++) 
      { 
       if(canvas.getObjects()[i].name=="Polygon") 
       { 
         canvas.getObjects()[i].set("fill", pattern); 
         canvas.renderAll(); 
       } 
      } 
     });