2012-01-26 37 views
33

我開始使用HTML5的新項目。兩種最流行的圖形工具包是KineticJSRaphaelJS。如果您有使用這些的經驗,您有任何建議嗎?他們提供哪些功能,並且在使用其中一項優勢方面有優勢?Kineticjs vs Raphaeljs

E.g.只有RaphaelJS可以在傳統瀏覽器上工作(但這不是我需要的功能)。

+0

你必須更具體地說明你正在做什麼樣的項目,不同的技術適合不同的需求。 – bennedich

+1

@bennedich我只需要知道兩者的可能性有什麼區別 –

+1

請注意,RaphaelJS的作者還創建了SnapSVG:http://snapsvg.io/,它更適合現代瀏覽器。 –

回答

52

RaphaelJS和KineticJS最大的區別是RaphaelJS使用SVG和KineticJS使用HTML5 Canvas進行可視化。
所以它真的取決於你在做什麼樣的項目。

下面是你應該看看關於SVG VS帆布一些有用的鏈接:

總結:

  • 如果你想創建一些交互式圖表,我會和RaphaelJS一起去,因爲用SVG做這件事很容易(KineticJS確實提供了一些抽象的API,這也使得它很容易實現)。
  • 如果您想要可視化大量形狀/對象,我建議使用KineticJS作爲畫布比例尺,通常更好地繪製大量形狀/對象,而KineticJS使用多個圖層來提高渲染性能。
+3

我不同意SVG更適合圖表而不是畫布,實際上。看看這個演示:http://meteorcharts.com/ Canvas可以處理數以十萬計的數據點,並且即使在移動設備上也能保持響應。 SVG根本無法做到這一點。 –

+1

當然,如果你必須處理大量的形狀/點來繪製,比帆布比SVG更好(參見線程中的基準)。 但對於簡單的交互式圖表(barcharts,piecharts等),SVG足夠快,如果您使用[D3.js](http://d3js.org/),則可以用相對較少的努力創建一些令人印象深刻的交互式圖表。 –

+0

SVG或Canvas?在兩者之間選擇。 http://dev.opera.com/articles/view/svg-or-canvas-choosing-between-the-two/ – Cherven