SVG vs Canvas，使用基於圖形的應用程序

Question

嗨我正在嘗試開發一個基於圖形的應用程序拖放。

我附上了我的應用程序的圖像。 https://drive.google.com/file/d/0By4i7m97t_5pNFRTaTQ4YmE2YlU/view?usp=sharing

這些都是我想在我的應用程序 https://drive.google.com/file/d/0By4i7m97t_5pX1RGUUFWMk9rNEU/view?usp=sharing

每一個動作（如拖放）使用的行動，我需要一個服務調用和重繪基於響應佈局。

目前我已經使用了div和span等html元素。但它的權重非常大，而且在使用拖放或其他操作時感覺滯後。我正在考慮轉換爲svg或Canvas。

哪個更適合使用此場景。我應該非常靈活地使用（沒有滯後）。它應該是重量輕。

我也需要使用角度服務。

Answer 1

雖然這已經被問過很多次之前，

對於交互式繪圖應用程序（可上門提貨形狀等），最好使用SVG。

• 他們是可操作的，由他們設計的性質 - SVG元素是常規的DOM元素 因此您可以輕鬆地連接點擊他們的處理程序，改變他們的立場等
• 重繪操作有效地處理瀏覽器使他們更快時，許多項目都參與，另一方面

帆布採用發射後不管繪圖模式的類型 - 你只是圖紙像素，而不是對象在畫布上，除非您在應用程序中自己構建了此功能/結構（這將是一個巨大的矯枉過正），否則沒有記憶您繪製的對象/元素 - 它知道該像素已繪製在一個位置上，但它不包含對象本身的任何表示（例如方塊/直線等）

您可以使用模擬SVG類型的保留繪圖模式的任何Canvas庫（Paper.js，Fabric.js等）在Canvas也是如此，但從我的經驗來看，他們從長遠來看往往是緩慢的，因爲他們天真地重繪了一些事情發生變化時的整個場景。