fabricjs 或 slimerjs，“显示所有对象”事件？答案

【问题标题】：fabricjs or slimerjs, "all objects displayed" event?fabricjs 或 slimerjs，“显示所有对象”事件？
【发布时间】：2015-12-25 13:56:49
【问题描述】：

我正在使用 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 毫秒，所以这对性能和对于需要很长时间才能呈现的页面，这甚至不是一个“安全的解决方案”。我尝试在 canvas.renderAll 调用的末尾放置一个 console.log，然后将这段代码添加到我的 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 在显示所有对象之前完成。有什么我可以捕捉到的事件，或者我可以做些什么来防止这种情况发生吗？

【问题讨论】：

标签： javascript image canvas phantomjs fabricjs

【解决方案1】：

您应该使用回调page.onLoadFinished()。

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

此功能在完整上传页面后运行

【讨论】：

我尝试使用 onLoadFinished，但是当这个事件被触发时，画布仍然没有完成在页面上的绘制。

【解决方案2】：

我设法找到了解决方案。首先，我更改了我的 html 模板，因为我只需要渲染每个页面，所以我使用了 StaticCanvas 而不是普通的画布。由于静态画布只有 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);
    }
});

我会把这个留在这里，以防有人需要。

【讨论】：