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 因此，您可以轻松地在其上附加点击处理程序，转换其位置等。
• 浏览器有效处理重绘操作，因此当涉及多个项目时，它们会更快

另一方面，

Canvas使用了一种即发即弃的绘图模式 - 你只是在画布上绘制像素，而不是对象，并且没有对象/元素的记忆＃＆＃ 39;除非你自己在你的应用程序中构建了这个功能/结构（这将是一个巨大的矫枉过正） - 它知道像素已被绘制在一个位置但它不包含任何对象本身的表示（例如一个正方形/线等）

您可以使用任何Canvas库（Paper.js，Fabric.js等）来模拟Canvas上类似SVG的保留绘图模式，但根据我的经验他们从长远来看往往是缓慢的，因为当事情发生变化时，他们天真地重绘整个场景。