CODEWITHSUNDEEP
javascriptcanvasfabricjs
pape04
pape04

Reputation: 57

Fabric.js asynchronous rendering from JSON

I have a "double sided" canvas in fabric.js. Both of them are loaded from a JSON string. I have a function to fit the canvas to the window size, which also resize every object. The problem is when there is a imageblob in one of the JSON, it takes more time to load. So when I call my function I end up with all objects on one canvas and none on the other one. I have done a setTimeout, but it's not the best solution. How can I resize everything in the same time, without the settimeout? Here is my funciton

function fitWindow(){
        var windowWidth = $("#wrapper").innerWidth();
        var originalWidth = canvas.getWidth();
        var originalHeight = canvas.getHeight();

        var newWidth = windowWidth-30;
        var newHeight = (originalHeight / originalWidth)* newWidth;

        canvas.setWidth(newWidth);
        canvas.setHeight(newHeight);

        var myScale = originalWidth/newWidth;

        var objects = canvas.getObjects();

        for (var i in objects) {
            var scaleX = objects[i].get('scaleX');
            var scaleY = objects[i].get('scaleY');
            var left = objects[i].get('left');
            var top = objects[i].get('top');

            var tempScaleX = scaleX * (1 / myScale);
            var tempScaleY = scaleY * (1 / myScale);
            var tempLeft = left * (1 / myScale);
            var tempTop = top * (1 / myScale);

            objects[i].set('scaleX',tempScaleX);
            objects[i].set('scaleY',tempScaleY);
            objects[i].set('left',tempLeft);
            objects[i].set('top',tempTop);

            objects[i].setCoords();
        }

        canvas.renderAll();

        var ojS = canvas.toObject(['name']);
        var savedCanvas = JSON.stringify(ojS);

        canvas.clear();
        canvas.loadFromJSON(canvas2, canvas.renderAll.bind(canvas));
        setTimeout(function(){

            var objects2 = canvas.getObjects();
            for (var k in objects2) {
                var scaleX2 = objects2[k].get('scaleX');
                var scaleY2 = objects2[k].get('scaleY');
                var left2 = objects2[k].get('left');
                var top2 = objects2[k].get('top');

                var tempScaleX2 = scaleX2 * (1 / myScale);
                var tempScaleY2 = scaleY2 * (1 / myScale);
                var tempLeft2 = left2 * (1 / myScale);
                var tempTop2 = top2 * (1 / myScale);

                objects2[k].set('scaleX',tempScaleX2);
                objects2[k].set('scaleY',tempScaleY2);
                objects2[k].set('left',tempLeft2);
                objects2[k].set('top',tempTop2);

                objects2[k].setCoords();
            }
            canvas.renderAll();

            var ojS2 = canvas.toObject(['name']);
            canvas2 = JSON.stringify(ojS2);

            canvas.clear();
            canvas.loadFromJSON(savedCanvas, canvas.renderAll.bind(canvas));

            canvas.renderAll();
        },100);
    }

Upvotes: 1

Views: 1825

Answers (1)

pape04
pape04

Reputation: 57

Ok, I think I found the solution. I'm binding the functions to the callback of the JSON load, like this:

canvas.loadFromJSON(canvas2, function() {

                scaleObjects(scale,canvas.getObjects());
                canvas2 = savedCanvasJSON(canvas.toObject(['name']));
                canvas.clear();
                canvas.loadFromJSON(savedCanvas, canvas.renderAll.bind(canvas));
            });

It is working as expected

Upvotes: 2

Related Questions