performance - paper.js 中的 svg 导出非常慢

Question

我使用 project.exportSVG({asString: true}) 有大量的路径 (thousends)。 这需要很长时间，有时脚本会卡住。 另一方面，project.exportJSON() 函数非常快。

我认为这可能是因为 exportSVG 创建了一个 DOM 节点，然后从中生成了一个字符串。因为我只需要字符串，像精简版导出这样只适用于字符串的东西会很棒。 有什么办法吗？

我使用 SVG 字符串制作一个 Blob 并通过 https://github.com/eligrey/FileSaver.js/ 保存它

var svg = project.exportSVG({asString: true});
var blob = new Blob([svg], {type: "image/svg+xml;charset=utf-8"});
saveAs(blob, 'test.svg'); 

这是我在 http://sketch.paperjs.org 运行的测试脚本

for (var i = 0; i < 1000; i++) {
    new Path.Circle({
        strokeColor: 'red',
        radius: 10,
        position: [i, i]
    });
}


var t_start, t_end;

t_start = new Date().getTime();
project.exportSVG();
t_end = new Date().getTime();
console.log('svg export: ' + (t_end - t_start));

t_start = new Date().getTime();
project.exportJSON();
t_end = new Date().getTime();
console.log('json export: ' + (t_end - t_start));

Answer 1

我没有适合您的解决方案，但我可以告诉您原因。看看这个草图:minimal example你可以看到导出 JSON 只是纸张数据结构和状态的 JSON 表示，而 SVG 需要将纸张输出转换为 SVG 格式。 Júrg 在优化转换方面做得非常好，因此虽然可能会有一些小的增量 yield ，但转换不太可能接近纸质数据结构的原始转储。