方法 - VoidCC

我想画一些矢量图形，我发现有两种方式：方法

（我不得不提到我用电子宽度的NodeJS，因此，语言是JavaScript，而不是OpenGL的存在的WebGL ）

使用WebGL绘制三角形并绘制它们。我认为这是一种快速的方法。但我担心的是，当你移动单个点时，形状必须重新调整。我不知道这可以做多快。
根据CPU上的内部/外部方程基于每个像素计算calcualate。但是在每次调整大小或移动之后，必须重新计算已更改的像素。

有人可以给我任何提示或某人已经有的经验吗？又如何Illustrator，Inkscape等渲染其图形？

谢谢

2016-06-13 Manu

[为什么不直接使用svg？]（https://developer.mozilla.org/en-US/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web） –

是的。我已经想过了。但它似乎很慢，多个svg的。此外，我对渲染没有太多控制。 – Manu

目前尚不清楚你想要做什么。 “画一些矢量图形”=什么？条形图？世界地图？一个荒谬复杂的Adobe Illustrator创作？至于内部/外部计算，[你也可以在GPU上做到这一点]（http://http.developer.nvidia.com/GPUGems3/gpugems3_ch25.html）。最重要的是，如果你真的想疯了，你可以使用emscripten编译所有[Skia]（https://skia.org/），并且WebAssembly应该是1。无论你想要解决什么问题，5倍于原生程序集的速度都不可能受到WebGL或JavaScript的限制 – gman

有几种方法可以在Web平台上绘制矢量图形。第一个，如评论中提到的，SVG。如果你的图形主要是静态的或者没有被广泛更新的话，那就太好了。例如，我们的Maps API在某些情况下使用SVG，并且性能足够高。而且使用其他选项更容易。当然，第二个是Canvas2D API。大多数情况下，它只是一个浏览器绘制后端的API（例如Chrome的Skia）。同样的后端用于其他任何事情：HTML，SVG，有时甚至是GUI。但是，它使我们对渲染有更多的控制。如果你的场景非常活跃并且/或者需要高度互动，那么你很有可能能够做出更高性能的SVG渲染。这是由于能够制作轻量级，高度专业且因此更快的渲染器。但有一些捕获。最重要的是实现你自己的命中测试来为你的场景提供一些交互性（SVG提供者和事件模型）。

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

关于问题的最后部分。我不知道Adobe Illustrator，但实际上，许多应用程序（包括Mozilla Firefox）都是Inkscape的实际应用程序。依次开罗可以使用多种跨平台或特定平台backends中的一种。

来源

2016-06-14 08:19:31

方法

回答

相关问题