参照エラー：patternSourceCanvasが定義されていません。ファブリックjs loadFromJSON

Question

SVGにパターンを適用し、toJSONを使用してデータベースにデータを保存します。 loadFromJSONを使用してキャンバスにロードしようとしているとき、そのスローエラーパターンのソースは定義されていません。

ここで私はパターンを設定するために使用しているコードです。 JSONからロードしている間、私は次の、

var frontJson = JSON.stringify(canvas.toJSON()); 

を使用していますJSONからJSONとロード・セーブ、ロードする

fabric.Image.fromURL(url,function(img){ 
      img.scaleToWidth(width); 
      if (angle > 0) img.set('angle', angle); 
      var patternSourceCanvas = new fabric.StaticCanvas(); 
      patternSourceCanvas.add(img); 
      patternSourceCanvas.renderAll(); 
      var pattern = new fabric.Pattern({ 
       source: function() { 
        patternSourceCanvas.setDimensions({ 
         width:img.getWidth() + padding, 
         height:img.getHeight() + padding 
        }); 
        patternSourceCanvas.renderAll(); 
        return patternSourceCanvas.getElement(); 
       }, 
       repeat: isrepeat, 
       src: url, 
      }); 

      if(left_offset > 0) { pattern.offsetX = (left_offset); } else{ pattern.offsetX = 0;} 
      if(top_offset > 0) { pattern.offsetY = (top_offset); } else { pattern.offsetY = 0;} 
      var applyPatternto = 0; 
      if(activeView != 1){ applyPatternto = $("#sel_applyPatternto").val(); } 
      currentElement.paths[applyPatternto].setFill(pattern); 
      canvas.renderAll(); 
     }); 

私も

canvas.loadFromJSON(frontJson); 
    setTimeout(function(){ 
     canvas.renderAll.bind(canvas); 
},3000); 

Answer 1

は、スコープの問題で、同じ問題をチェックするために遅延を追加。

参照を自身の外部に持つJSONから関数をリロードすることはできません。

関数が再構築されると、実行するために定義されたpatternSourceCanvasはありません。

source: function() { 
    patternSourceCanvas.setDimensions({ 
    width:img.getWidth() + padding, 
    height:img.getHeight() + padding 
    }); 
    patternSourceCanvas.renderAll(); 
    return patternSourceCanvas.getElement(); 
}, 

この場合、patternSourceCanvasは未定義です。

内部でpatternSourceCanvasを提供しても、imgは描画されないため、無力になります。

関数を使用してパターンを構築する必要がある場合は、これらの変数がレンダリング時にグローバル名前空間で使用できることを確認する必要があります。

パディングが出る箇所も不明で、同じ問題の影響を受ける可能性があります。