javascript - Fabric.js loadFromJSON 回调看不到加载的对象

Question

希望有人能帮我解决这个问题。

我正在从 Json 加载 Canvas 并在回调函数中尝试删除其中一个对象。

canvas.loadFromJSON(
    json, 
    function() {
        canvas.setWatermark();    
        canvas.setWidth(arr.width);
        canvas.setHeight(arr.height);               
        canvas.renderAll.bind(canvas)
    }
);

fabric.Canvas.prototype.getWatermark = function() {
    var object = null,
        objects = canvas.getObjects();

    for (var i = 0, len = this.size(); i < len; i++) {
        if (objects[i].myType && objects[i].myType === 'watermark') {
            object = objects[i];
            break;
        }
    }

    return object;
};

fabric.Canvas.prototype.setWatermark = function() {
    var watermark=canvas.getWatermark();      
    canvas.remove(watermark);
};

出于某种原因，它没有去除水印。当我调试时它显示， Canvas 上现在有带有 myType='watermark' 的对象。但是当代码完成后，我在 Canvas 和对象中看到了水印。

loadfromjson 之后的回调不应该在那里吗？

Answer 1

fabric.Canvas.prototype.getWatermark = function() {
    var object = null,
        objects = this.getObjects();

    for (var i = 0, len = this.size(); i < len; i++) {
        if (objects[i].myType && objects[i].myType === 'watermark') {
            object = objects[i];
            break;
        }
    }
    return object;
};

fabric.Canvas.prototype.setWatermark = function() {
    var watermark= this.getWatermark();      
    this.remove(watermark);
};
// initialize fabric canvas and assign to global windows object for debug
var canvas = window._canvas = new fabric.Canvas('c');

var json = '{"objects":[{"myType":"watermark","type":"rect","originX":"center","originY":"center","left":300,"top":150,"width":150,"height":150,"fill":"#29477F","overlayFill":null,"stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":{"color":"rgba(94, 128, 191, 0.5)","blur":5,"offsetX":10,"offsetY":10},"visible":true,"clipTo":null,"rx":0,"ry":0,"x":0,"y":0},{"type":"circle","originX":"center","originY":"center","left":300,"top":400,"width":200,"height":200,"fill":"rgb(166,111,213)","overlayFill":null,"stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":{"color":"#5b238A","blur":20,"offsetX":-20,"offsetY":-10},"visible":true,"clipTo":null,"radius":100}],"background":""}'

canvas.loadFromJSON(
    json, 
    function() {
        canvas.setWatermark();    
        //canvas.setWidth(arr.width);
        //canvas.setHeight(arr.height);               
        canvas.renderAll.bind(canvas);
    }
);

canvas {
    border: 2px dotted black;
}

<script src="https://rawgithub.com/kangax/fabric.js/master/dist/fabric.js"></script>
<canvas id="c" width="600" height="600"></canvas>

在使用之前声明函数。作为canvas的原型(prototype)，需要使用this代替canvas来获取canvas功能。