使用Raphael.js高效绘制文本

Efficiently drawing text using Raphael.js

本文关键字：绘制 文本 高效 js Raphael 使用      更新时间：2023-09-26

我正在使用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});

然而，使用这种方法似乎非常缓慢。我可以画400个矩形（使用单个路径字符串），速度是在图表中添加6个标签的两倍。有没有什么方法可以批量绘制文本，或者有其他更快的方法？目前，我几乎80%的绘图时间都花在了添加标签上。

在您的示例中，我使用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

在哪里，当我们删除属性调用时：

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 的时间

CCD_ 6导致CCD_。

现在让我们来试试你提到的那个案例，用矩形。让我们使用相同的位置绘制相同的数量，并且只更改一些不会影响渲染时间（宽度和高度）的属性

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

结果：

draw: 333ms

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

不确定这是否有用，但我发现对文本标签（而不是矢量）使用普通div相当快

相关文章：