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也是如此，但从我的经验来看，他们从长远来看往往是缓慢的，因为他们天真地重绘了一些事情发生变化时的整个场景。