从 loadFromJSON FabricJS 获取和修改对象答案

【问题标题】：Get and modify object from loadFromJSON FabricJS从 loadFromJSON FabricJS 获取和修改对象
【发布时间】：2020-09-11 11:42:08
【问题描述】：

情况是：

首先，将照片加载到画布作为背景图像，我不希望背景移动并将图像发送到后面，所以我添加了以下代码：

$('#upload').change(function(){
            canvas.clear();
            var filename = "{{ url_for('static', filename='layout/') }}"+$(this).val();
            if (filename != "" && filename != null){
                fabric.Image.fromURL(filename, function(oImg) {
                    oImg.scaleToWidth(canvas.width);
                    oImg.scaleToHeight(canvas.height);
                    oImg.set({ 
                        hasControls: false, 
                        hasBorders: false, 
                        selectable: false,
                    });
                    canvas.add(oImg);
                    canvas.sendToBack(oImg);
                });
            }else {
                alert('no file choosen');
            }
        });

我保存了它，当我尝试使用 loadFromJSON 加载它时，根本不会调用 $('#upload').change(...) 中的函数..

$('#upload_existing').change(function(){
            canvas.clear();
            var json = JSON.parse($(this).val());
            canvas.loadFromJSON(json, canvas.renderAll.bind(canvas), function(o, object) {
                // console.log(object);
                fabric.canvas.sendToBack(o, object);
                // canvas.sendToBack(o[0]);
            });
            
        });

【问题讨论】：

标签： javascript fabricjs

【解决方案1】：

Fabric.JS 包含背景图像功能，因此您不必将其作为常规图像加载并尝试将其保留在底部。 http://fabricjs.com/docs/fabric.Canvas.html#setBackgroundImage

canvas.setBackgroundImage('http://fabricjs.com/assets/honey_im_subtle.png', canvas.renderAll.bind(canvas), {
  left: 400,
  top: 400
});

【讨论】：

我试过了，但我不能缩放。我需要放大和缩小

【解决方案2】：

我有一个解决方案：

    $('#upload_existing').change(function(){
        canvas.clear();
        var json = JSON.parse($(this).val());
        canvas.loadFromJSON(json, function() {
            var objects = canvas.getObjects();
            objects[0].scaleToWidth(canvas.width);
            objects[0].scaleToHeight(canvas.height);
            objects[0].set({ 
                hasControls: false, 
                hasBorders: false, 
                selectable: false,
        });
        canvas.sendToBack(objects[0]);
            
            // if you need to iterate objects :
            // var objects = canvas.getObjects();
            // for (var i = 0, len = objects.length; i < len; i++) {
                // console.log(objects[i])
            // }
        });
        
    });

对不起，代码更糟糕

【讨论】：