ファブリックjs。複数の矩形に対してパターンを塗りつぶすことはできません

Question

こんにちは、誰かが私にこのことを教えてくれることを願っています。

私が作成し、ファブリックjsのキャンバスに複数のRectsを追加し、その文のために、持っています。作成された各矩形に対してテクスチャを設定する必要があるので、次のコードを使用します。何らかの理由で

var rect = new fabric.Rect({ 
 
    width: 100, 
 
    height: 100, 
 
    selectable: true, 
 
    hasControls: false, 
 
    borderColor: 'red', 
 
    borderWidth: 2, 
 
    lockMovementX: true, 
 
    lockMovementY: true 
 
}); 
 

 
canvas.add(rect); 
 

 
fabric.util.loadImage('construct/css/img/patterns/1.jpg', function(img) { 
 
    rect.set('fill', new fabric.Pattern({ 
 
    source: img, 
 
    repeat: 'repeat' 
 
    })); 
 
}); 
 
Выполнить

、コード実行の後、すべてのrectsは組織を有するが、最後のものだけが追加されていません。

これは本当に狂気私を駆動しています。

は、事前にこの

おかげで任意のヘルプをお願い申し上げます。

Answer 1

私の仮定は、すべてのあなたの長方形のために同じ変数RECTを使用しているし、あなただけの最後のオブジェクトのためのパターンを持っている理由です。以下のように、あなたはすべての矩形をループにする必要があります

for (var i = 0; i < 4; i++){ 
    var rect = new fabric.Rect({ 
    width: 100, 
    height: 100, 
    left: i * 110, 
    selectable: true, 
    hasControls: false, 
    borderColor: 'red', 
    borderWidth: 2, 
    lockMovementX: true, 
    lockMovementY: true 
    }); 

    canvas.add(rect); 
} 

と塗りつぶしパターン設定： たとえば、あなたが4つの四角形を追加します

fabric.util.loadImage('http://fabricjs.com/lib/pug.jpg', function(img) { 
    canvas.forEachObject(function(obj){ 
    obj.set('fill', new fabric.Pattern({ 
    source: img, 
    repeat: 'repeat' 
    })); 
    }); 

    canvas.renderAll(); 
}); 

の作業コードhere

WARNING：長方形以外のオブジェクトがある場合は、オブジェクトタイプをチェックして無視するか、カスタムシェイプタイプを長方形に設定する必要があります。