矢量图形的绘制方法
Method for drawing vector graphics
我想画一些矢量图,我发现了两种方法:
(我不得不提到我使用电子宽度 nodejs,因此语言是 javascript 而不是 OpenGL,而是 WebGL。)
三角化形状并使用 WebGL 绘制。我认为这是一种快速的方法。但我担心的是,当你移动单点时,形状必须重新三角化。而且我不知道这能多快完成。
使用 CPU 上的 inside/outside 方程逐像素计算。但是每次调整大小或移动更改后的像素都必须重新计算。
有人可以给我任何提示或一些已经有人做过的经验吗?
还有 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.
关于你问题的最后一部分。我不知道 Adobe 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.
我想画一些矢量图,我发现了两种方法:
(我不得不提到我使用电子宽度 nodejs,因此语言是 javascript 而不是 OpenGL,而是 WebGL。)
三角化形状并使用 WebGL 绘制。我认为这是一种快速的方法。但我担心的是,当你移动单点时,形状必须重新三角化。而且我不知道这能多快完成。
使用 CPU 上的 inside/outside 方程逐像素计算。但是每次调整大小或移动更改后的像素都必须重新计算。
有人可以给我任何提示或一些已经有人做过的经验吗? 还有 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.
关于你问题的最后一部分。我不知道 Adobe 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.