从具有动态模式的 JSON 加载，patternSourceCanvas 未定义序列化 JSON 数据返回的错误

Question

我正在尝试保存 Fabric.js 画布并使用 loadFromJson 重新加载它。但我收到错误 patternSourceCanvas 未定义。我想我应该让它成为全局的，所以我删除了 var.

如何在 Fabric JS 中设置全局变量并使用 var patternSourceCanvas？ 当我使用下面的代码时，一切正常，并且 JSON 很容易加载。

var t = https://image.freepik.com/free-photo/roof-texture_21206171.jpg

fabric.util.loadImage(t, function(t) {
    var svg_width  = i.width;
    console.log('svg widh' + i.width + 'svg height' + i.height);
    console.log('img width t'+  t.width + ' img height' + t.height);
    if(svg_width >= 300){
        if (i.isSameColor && i.isSameColor() || !i.paths) {
            i.setPatternFill({
                source: t, repeat: 'repeat', offsetX:200 , offsetY : -110 // working
            }), e.fabric.renderAll();
            console.log('in if image 300 up  ', t);
        } else if (i.paths){
            for (var r = 0; r < i.paths.length; r++) 
                i.paths[r].setPatternFill({
                    source: t, repeat: 'repeat' , offsetX: -100 , offsetY:-110 
                }), e.fabric.renderAll();
            console.log('in image elseeee 300 up     ', t);
        }
    }
})

但是当我用新的 patternSourceCanvas 变量填充其他一些新形状时，它就不起作用了。请帮助我处理动态模式。

var t = https://image.freepik.com/free-photo/roof-texture_21206171.jpg

fabric.Image.fromURL(t, function (img)  {
    img.scaleToHeight(200);
    var patternSourceCanvas = new fabric.StaticCanvas();

    patternSourceCanvas.add(img);
    patternSourceCanvas.renderAll();

    var pattern = new fabric.Pattern({
    source: function() {
        patternSourceCanvas.setDimensions({
            width: img.getScaledWidth() ,
            height: img.getScaledHeight()
        });
        patternSourceCanvas.renderAll();
            return patternSourceCanvas.getElement();
        },
        repeat: r
    });
    console.log('pattern', pattern);
    //p.set('fill', pattern);
    canvas.renderAll();
    if (i.isSameColor && i.isSameColor() || !i.paths) {

        i.setPatternFill(pattern);
    } else if(i.paths) {
        for (var r = 0; r < i.paths.length; r++) {
            i.paths[r].setPatternFill(pattern);
        }
    }
    e.fabric.renderAll();
});

Answer 1

您需要将patternSourceCanvas 放入全局范围/ loadFromJSON 可以访问 patternSourceCanvas 的范围。否则，您可以直接使用启用 cors 的图像。

演示

var imageUrl = 'https://upload.wikimedia.org/wikipedia/commons/2/22/Wikimapia_logotype.svg';
var canvas = new fabric.Canvas('canvas');
var rect = new fabric.Rect({
  width: 200,
  height: 200,
  strokeWidth: 2,
  stroke: '#000'
})
canvas.add(rect);

fabric.Image.fromURL(imageUrl, function(img) {
  img.scaleToHeight(200);
  var patternSourceCanvas = new fabric.StaticCanvas();
  patternSourceCanvas.add(img);
  patternSourceCanvas.setDimensions({
    width: img.getScaledWidth(),
    height: img.getScaledHeight()
  });
  patternSourceCanvas.renderAll();
  var pattern = new fabric.Pattern({
      source: patternSourceCanvas.getElement()
    },
    function(patternObj) {
      rect.fill = patternObj;
      rect.dirty = true;
      canvas.renderAll();
    });
}, {
  crossOrigin: 'annonymous'
});

function loadfromjson() {
  var json = canvas.toJSON();
  canvas.clear();
  setTimeout(function() {
    canvas.loadFromJSON(json, canvas.renderAll.bind(canvas));
  }, 1000)
}

canvas{
  border:2px solid #000;
}

<canvas id="canvas" width="300" height="300"></canvas><br>
<button onclick="loadfromjson()">loadfromjson </button>
<script src='https://rawgit.com/kangax/fabric.js/master/dist/fabric.js'></script>