方法は、私はいくつかのベクターグラフィックを描画しようとしていると私は二つの方法を見つけた

Question

：

は

（私は電子幅nodejsを使用することを言及する必要があり、したがって、言語があり、代わりのOpenGLのjavascriptのは、WebGLのあり）

• 形状を三角形分割し、WebGLで描画します。私はこれが速い方法だと思う。しかし、私の懸念は、あなたが単一点を動かしているときです。形状は、再三角形にしなければなりません。そして、私はこのことがいかに速くできるか分かりません。

• CPUの内部/外部方程式をピクセル単位で計算します。しかし、すべてのサイズ変更または移動後に、変更されたピクセルを再計算する必要があります。

誰かが私にヒントや既に経験した経験を教えていただけますか？ Illustrator、Inkscapeなどのグラフィックスはどのようにレンダリングされますか？

ありがとうございました

Answer 1

Webプラットフォームでベクターグラフィックスを描くにはいくつかの方法があります。

コメント欄に記載されているように、SVG。あなたのグラフィックスが主に静的であるか、広範囲に更新されていない場合は、完璧に問題ありません。たとえば、Maps APIはSVGを使用する場合があり、十分に機能します。そして、他のオプションを使用するほうがはるかに簡単です。

第2のものは、もちろんCanvas2D APIです。ほとんどの場合、ブラウザをバックエンドにペイントするAPI（例：Chromeの場合はSkia）です。非常に同じバックエンドは、HTML、SVG、時にはGUIでも使用されます。しかし、それはレンダリングを少しずつ制御します。また、あなたのシーンが大きくアニメーション化されている場合や、インタラクティブに対話する必要がある場合は、SVGよりもはるかにパフォーマンスの良いレンダリングを行うことができます。これは、軽量で高度に特殊化されたレンダラーをより素早く作成できるためです。しかし、いくつかのキャッチがあります。最も重要なことは、シーン（SVGプロバイダとイベントモデル）に対話性を提供するために、独自のヒットテストを実装する必要があることです。

Canvas2Dでも十分でない場合は、3番目の方法があり、WebGLです。もし正しく使用されていれば、それは最も実績のあるものでなければなりません。これは、リソースやレンダリング自体をほとんど制御し、ほとんど常にハードウェアアクセラレーションが完全に行われます。しかし、そのパフォーマンスを達成することは難しいかもしれません。しかし、そこにはCanvas2DのようなAPIを提供するライブラリがありますが、WebGLによって動かされます。例えばPixi.jsです。

質問の最後の部分について私はAdobe Illustratorについてはわかりませんが、Inkscape usesCairoは、実際にMozilla Firefoxをはじめとする多くのアプリケーションとして知られています。その順番で、カイロは複数のクロスプラットホームまたはプラットホーム特有のbackendsの1つを使用することができます。