矢量图形绘制方法

Question

我试图绘制一些矢量图形，我找到了两种方法：

(我必须指出，我使用的是电子宽度nodejs，因此语言是javascript，而不是OpenGL，而是WebGL。)

• 三角形的形状，并绘制它与WebGL。我认为这是一种快速的方法。但我担心的是，当你移动单个点时，形状必须重新调整。我不知道这能多快完成。
• 在每像素的基础上计算CPU上的内外方程。但是，在每次调整大小或移动后，必须重新计算更改后的像素。

有人能给我一些提示或经验吗？另外，插图、Inkscape等是如何绘制它们的图形的？

谢谢

Answer 1

在Web平台上绘制矢量图形有多种方法。

第一，正如评论中提到的，SVG。如果您的图形主要是静态的，或者没有进行广泛的更新，这是非常好的。例如，我们的Maps API在某些情况下使用SVG，并且它具有足够的性能。使用其他选项要容易得多。

第二个当然是Canvas2D API。大多数情况下，它只是浏览器绘制后端的API (例如，Chrome的斯基亚 )。完全相同的后端用于其他一切: HTML、SVG，有时甚至GUI。然而，它使我们对呈现有了更多的控制。如果你的场景是大量的动画和/或需要高度的交互性，很有可能你将能够做出一个更高性能的渲染SVG。这是由于有能力使轻量级，高度专业化，从而更快的渲染。但有一些渔获物。最重要的是必须实现自己的命中测试，以便为场景提供一些交互性(SVG提供者，一个事件模型)。

如果Canvas2D对你来说还不够的话，还有第三条路，那就是WebGL。如果使用得当，它应该是最具表现力的。它为您提供了对资源和呈现自身的大部分控制，并且几乎总是完全加速硬件。但实现这一成绩可能是一项挑战。但是有一些库提供类似Canvas2D的API，但是由WebGL提供动力，例如Pixi.js。

关于你问题的最后一部分。我不知道Adobe，但Inkscape 使用 开罗实际上是许多应用程序，包括Mozilla。而Cairo则可以使用多个跨平台或特定于平台的后端之一。