绘制矢量图形的方法

Question

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

（我必须提到我使用电子宽度nodejs，因此语言是javascript而不是OpenGL，而是WebGL。）

• 对形状进行三角测量并使用WebGL绘制。我认为这是一种快速的方法。但我担心的是，当你移动单点时，形状必须重新插入。我不知道这有多快。

• 使用CPU上的内部/外部等式计算每个像素。但每次调整大小或移动后，必须重新计算更改后的像素。

有人可以给我任何提示或某人已经取得的经验吗？ Illustrator，Inkscape等如何呈现它们的图形呢？

谢谢

Answer 1

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

第一，正如评论中提到的，SVG。如果您的图形主要是静态的或没有进行大量更新，那就完美了。例如，我们的Maps API在某些情况下使用SVG，并且性能足够高。并且使用其他选项要容易得多。

第二个当然是Canvas2D API。最重要的是，它只是浏览器绘制后端的API（例如，Chrome的Skia）。同样的后端用于其他一切：HTML，SVG，有时甚至是GUI。但是，它使我们对渲染有了更多的控制。如果您的场景动画严重且/或需要高度互动，那么您很有可能能够更高效地渲染SVG。这是由于能够制作轻量级，高度专业化且因此更快的渲染器。但是有一些捕获。最重要的是必须实现自己的命中测试，为场景提供一些交互性（SVG提供者和事件模型）。

即使Canvas2D对你来说还不够，还有第三种方式和它的WebGL。如果使用得当，它应该是性能最好的。它为您提供了对资源和渲染本身的最大控制，并且几乎总是完全硬件加速。但实现这一表现可能是一项挑战。但是有那些提供类似Canvas2D的API的库，但是由WebGL提供支持，例如Pixi.js。

关于问题的最后部分。我不知道Adobe Illustrator，但Inkscape uses Cairo，实际上是很多应用程序，包括Mozilla Firefox。反过来，Cairo可以使用多个跨平台或平台特定的backends之一。