Fabric.js 来自 JSON 的异步呈现

Question

我在 fabric.js 中有一个 "double sided" canvas。它们都是从 JSON 字符串加载的。我有一个函数可以使 canvas 适合 window 大小，它还可以调整每个对象的大小。问题是当 JSON 之一中有 imageblob 时，加载需要更多时间。因此，当我调用我的函数时，我最终将所有对象都放在一个 canvas 上，将 none 放在另一个上。我做了一个 setTimeout，但这不是最好的解决方案。我怎样才能在没有设置超时的情况下同时调整所有内容的大小？这是我的功能

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

Answer 1

好的，我想我找到了解决方案。我将函数绑定到 JSON 负载的回调，如下所示：

canvas.loadFromJSON(canvas2, function() {

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

它按预期工作

Fabric.js 来自 JSON 的异步呈现

Fabric.js asynchronous rendering from JSON

javascript

canvas

fabricjs