CODEWITHSUNDEEP
javascriptjquerycanvasfabricjs
Michael Tsipes
Michael Tsipes

Reputation: 71

Fabric.js loadFromJSON callback cannot see loaded objects

Hope someone can give me a hand on this.

I'm loading canvas from Json and on callback funtion trying to erase one of the objects.

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);
};

For some reason it is not removing watermark. When i debug it shows, that there is now object with myType='watermark' on canvas. But when code is finished i see watermark on canvas and in objects.

Isn't it should be ther on callback after loadfromjson?

Upvotes: 4

Views: 2634

Answers (1)

Durga
Durga

Reputation: 15604

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>

Declare the functions before you use . As a prototype of canvas, you need to use this instead of canvas to get the canvas function.

Upvotes: 3

Related Questions