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

您需要将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) }放入全局范围/ loadFromJSON可以访问patternSourceCanvas的范围。否则，您可以直接使用启用了cors的图片。

演示

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>

class Track:
    def init(name, number, min_class, members):
        self.name = name
        self.number = number
        self.min_class = min_class
        self.members = members

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

1 个答案: