fabricjs或slimerjs，“顯示所有對象”事件？

Question

我正在使用slimerjs渲染一些html文件。 每個文件都包含一個JSON字符串，該字符串隨調用而加載

fabricjsCanvas.loadFromJson(jsonString, fabricjsCanvas.renderAll.bind(fabricjsCanvas));

這是我打開頁面的地方

page.open(address, function (status) {
    if (status !== 'success') {
        console.log('Unable to load the page!');
        phantom.exit(1);
    } else {
        page.render(output);
        window.setTimeout(function () {
            page.render(output);
            phantom.exit();
        }, 5000);
    }
});

如您所見，我必須設置一個超時時間，之后，slimerjs將關閉頁面並保存上面的內容。 我真的不喜歡這種解決方案，因為我需要渲染多個頁面，其中一些頁面很小，可能花費不到200毫秒，而另一些頁面則很大，可能花費超過5000毫秒，因此這對性能和性能都不利。甚至不是一個“安全的解決方案”，以防頁面花費很長時間呈現。 我試着把console.log放在canvas.renderAll調用的末尾，然后將這段代碼添加到我的slimerjs腳本中

 page.onConsoleMessage = function (msg) {
    console.log(msg);
    page.render(output);
    phantom.exit();
};page.open(address, function (status) {
    if (status !== 'success') {
        console.log('Unable to load the address!');
        phantom.exit(1);
    }
});

我希望這會有所幫助，但實際上沒有任何改變，reanderAll在顯示所有對象之前完成。 是否有一些我可以捕捉到的事件，或者可以采取其他措施來防止這種情況發生？

Answer 1

您應該使用一個回調page.onLoadFinished（） 。

page.onLoadFinished = function(status, url, isFrame) {
    console.log('Loading of '+url+' is a '+ status);
    page.render();
};

完整上傳頁面后運行此功能

Answer 2

我設法找到了解決方案。 首先，我更改了html模板，因為我只需要渲染每頁，所以我使用了StaticCanvas而不是普通的canvas。 由於靜態畫布只有2個幀要渲染（最上面的一個和第二個容器，至少這是我從經驗中學到的），所以我在after：render事件上添加了一個事件列表器，因此在第二幀渲染后，我將打印一條控制台消息，此時將調用page.onConsoleMessage並關閉幻像過程。 這樣，我就不需要允許太多（失去性能）或不足（並且圖像將產生空白）的標准時間。 這是我的html模板中的腳本

 var framesRendered = 0;
    var canvas = new fabric.StaticCanvas('canvas', {width: {{width}}, height: {{height}} });
    canvas.setZoom({{{zoom}}});
    canvas.on('after:render', function() {
        if(framesRendered == 1)
            console.log('render complete');
        else framesRendered++;
    });
    canvas.loadFromJSON({{{data}}}, canvas.renderAll.bind(canvas), function (o, object) {
        if (object.type === 'picturebox' && object.filters.length) {
            object.applyFilters(function () {
                canvas.renderAll();
            });
        }
    });

這是我的slimerjs腳本

page.onConsoleMessage = function(){
    page.render(output);
    phantom.exit();
};
page.open(address, function (status) {
    if (status !== 'success') {
        console.log('Unable to load the address!');
        phantom.exit(1);
    }
});

如果有人需要，我會把它留在這里。