fabricjs 或 slimerjs，"all objects displayed" 事件？

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 毫秒，所以这对性能和甚至不是 "safe solution" 反对页面需要很长时间来呈现。我尝试将 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。由于静态 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);
    }
});

我会把这个留在这里以备不时之需。

fabricjs 或 slimerjs，"all objects displayed" 事件？

fabricjs or slimerjs, "all objects displayed" event?

javascript

canvas

image

phantomjs

fabricjs