使用Raphael.js高效绘制文本

Question

我正在使用Raphael.js绘制图表时遇到了与文本相关的性能问题。目前，我使用以下模式来绘制文本：

var labels = paper.set();    

for (var i = 0; i < 6; i++ ) {
  labels.push(paper.text(0, i * 10, 'my text'));
}

labels.attr({'font-size',10});

然而，使用这种方法似乎非常缓慢。 我可以在图表中添加6个标签的时间内绘制400个矩形（使用单个路径字符串）。 有没有一种批量绘制文本或其他更快的方法？ 目前，我绘图的时间几乎80％都用于添加标签。

- Bill

Answer 1

就像你的例子一样，我使用console.time()进行了测试。看起来你的push操作会增加大约10%的时间，而你的attr调用几乎使整个过程时间翻倍。例如：

for (var i = 0; i < 4200; i++ ) {
  labels.push(paper.text(0, i * 10, 'my text'));
}

导致如下结果：

labels: 3452ms
attr: 2455ms

当我们删除attr调用时：

for (var i = 0; i < 4200; i++ ) {
  paper.text(0, i * 10, 'my text');
}

导致的结果是：

labels: 3011ms
attr: 0ms

将其通过链接实现对性能几乎没有影响。

for (var i = 0; i < 4200; i++ ) {
  labels.push(paper.text(0, i * 10, 'my text').attr({'font-size':10}));
}

导致了以下结果：

draw: 5759ms

下一步，我们分析了字符串中的字符数量，以确定绘制字符的数量和经过的时间之间是否存在直接相关性。

使用 paper.text(5, i * 10, '0'); 绘制的结果是 draw: 2974ms。

使用 paper.text(5, i * 10, 'texttexttexttexttexttexttexttexttexttexttexttext'); 绘制的结果是 draw: 3122ms，差异可以忽略不计。

现在让我们尝试您提到的那种情况，使用相同的定位绘制相同数量的矩形，并仅更改几个不会影响渲染时间的属性（宽度和高度）。

for (var i = 0; i < 4200; i++ ) {
  paper.rect(5, i * 10, 50, 50);
}

导致的结果：

draw: 333ms

如数字所示，我相信这是因为我们正在绘制具有非常复杂曲线的矢量图形。正方形矢量公式将比一系列字母及其曲线指数级别更短且更容易计算。

- iRedMedia

---

我不确定这是否真正回答了我的问题，但我很感谢分析。我的主要问题是，使用rects，您可以创建一个单一的路径字符串来生成数百个矩形，但据我所知，在Raphael.js中没有类似的文本方法 - 文本必须立即添加到画布上。我已经转而使用d3.js，相同的测试在Raphael.js中需要6872毫秒（具有字体大小的4200个文本块），而在d3.js中只需2351毫秒。 - Bill

非常抱歉，我似乎没有结束我的帖子！除非导入文本路径（如果存在常用词），否则无法做到您所要求的。 Raphael不像其他一些库那样强大或功能丰富，但非常可靠且易于使用。在优化方面，我发现使用原始JavaScript是最好的选择。探索两个库的文本方法，看看问题出在哪里，也许您可以编写比它们更好的实现。你的“路径字符串”的示例会非常有帮助！ - iRedMedia

Answer 2

不确定这是否有用，但我发现使用普通的 div 元素作为文本标签（而不是向量）非常快速。

- zcrar70