使用Raphael.js高效地繪製文本

我正在使用Raphael.js繪製圖表，並且遇到了有關文本的性能問題。我目前使用以下模式繪製文字：使用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％用於添加標籤。

來源

2012-02-27 Bill

正如在你的例子中，我用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: 3122ms一個時間，該時間可以忽略不計的draw: 2974ms

paper.text(5, i * 10, 'texttexttexttexttexttexttexttexttexttexttexttext');的時間。

現在讓我們試試你說的那種情況，用長方形。讓我們得出同樣的量，使用相同的定位，只有改變不會影響渲染時間的幾個屬性（寬度和高度）

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

了：

draw: 333ms

隨着數字顯示，我相信這是因爲我們繪製的矢量具有令人難以置信的更復雜的曲線。一個正方形矢量公式將會成倍縮短，並且更容易計算出一系列字母及其曲線。

來源

2012-02-29 22:06:11 iRedMedia

我不知道，這實際上回答我的問題，但我欣賞分析。我的主要問題是用rects，你可以創建一個單一的路徑字符串來生成數百個矩形，但據我所知，Raphael.js中沒有類似的文本方法 - 文本必須立即添加到文件中。自從我轉向使用d3.js以及在Raphael.js中使用6872毫秒的相同測試（4200個字體大小的文本塊）需要2351毫秒。 – Bill 2012-02-29 23:44:16

對不起，我似乎沒有得出我的帖子！沒有辦法（如果存在常用詞，則缺少文本輸入路徑）來執行你所要求的操作。 Raphael並不像其他一些圖書館那樣穩健或強大，但它非常可靠且易於使用。談到優化，我發現使用香草javascript是你最好的選擇。探索這兩個庫的文本方法，看看問題出在哪裏，也許你可以編寫更好的實現，然後他們有。你的「路徑字符串」的例子會真的有幫助！ – iRedMedia 2012-03-01 14:07:09

不知道這有什麼用處，但我發現它相當快使用的文本標籤正常的div（而不是矢量）

來源

2012-09-16 17:06:02 zcrar70

使用Raphael.js高效地繪製文本

回答

相關問題