Fabric.js 从 JSON 异步渲染答案

【问题标题】：Fabric.js asynchronous rendering from JSONFabric.js 从 JSON 异步渲染
【发布时间】：2023-03-26 22:10:01
【问题描述】：

我在 fabric.js 中有一个“双面”画布。它们都是从 JSON 字符串加载的。我有一个使画布适合窗口大小的功能，它也调整每个对象的大小。问题是当其中一个 JSON 中有一个 imageblob 时，加载需要更多时间。所以当我调用我的函数时，我最终会在一个画布上看到所有对象，而在另一个画布上没有。我做了一个 setTimeout，但这不是最好的解决方案。如何在没有 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);
    }

【问题讨论】：

标签： javascript canvas fabricjs

【解决方案1】：

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

canvas.loadFromJSON(canvas2, function() {

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

按预期工作

【讨论】：