矢量图形的绘制方法

Method for drawing vector graphics

我想画一些矢量图,我发现了两种方法:

(我不得不提到我使用电子宽度 nodejs,因此语言是 javascript 而不是 OpenGL,而是 WebGL。)

有人可以给我任何提示或一些已经有人做过的经验吗? 还有 Illustrator、Inkscape 等如何渲染他们的图形?

谢谢

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

第一个,如评论中所述,SVG。如果您的图形主要是静态的或没有广泛更新,那就完全没问题了。例如,我们的地图 API 在某些情况下使用 SVG,并且它的性能足够。而且使用其他选项要容易得多。

第二个当然是Canvas2D API. For the most, it's just an API to browsers painting backend (e.g., Skia for Chrome)。完全相同的后端用于其他一切:HTML、SVG,有时甚至是 GUI。然而,它让我们对渲染有了更多的控制。如果您的场景是大量动画 and/or 需要高度交互,那么您很有可能能够制作比 SVG 性能更高的渲染。这是由于能够制作轻量级、高度专业化并因此更快的渲染器。但是有一些陷阱。最重要的是必须实施您自己的命中测试,以便为您的场景提供一些交互性(SVG 提供程序事件模型)。

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

关于你问题的最后一部分。我不知道 Adob​​e Illustrator,但 Inkscape uses Cairo, as, actually, many applications, including Mozilla Firefox. In its turn Cairo can use one of multiple crossplatform or platform specific backends.