👩‍🚒 🖋️ 😬 GraphicsJS-グラフィックJavaScriptライブラリ 👨🏻‍🔬 🥖 👨‍👩‍👦

記事の翻訳。 英語版のオリジナルがSitePointで公開されています-「強力な軽量グラフィックライブラリであるGraphicsJSの紹介」。

HTML5は、最新のWebの基盤です。そして今日、インタラクティブなグラフィックスを作成することが課題である場合、SVGやCanvasなどのテクノロジーが最もよく選択されます。 Flashは忘れられており、SilverlightはWebの裏に住む珍しい鳥であり、サードパーティのActiveXおよびJavaプラグインを覚えている人はほとんどいません。

SVGとCanvasの長所と短所はよく知られています -一般に、SVGがインタラクティブな要素を作成して操作するのにより適しているという事実に帰着します。これはXMLベースのベクター形式であり、 <svg>

を使用して画像をページにロードすると、その内部要素のそれぞれがSVG DOMで利用可能になります。

この記事では、 GraphicsJSについて説明します。これは、SVGテクノロジ（IEの古いバージョンのVML）に基づいた強力なオープンソースのグラフィカルJavaScriptライブラリです。まず、GraphicsJSの基本を簡単に紹介し、次に2つの小さいながらも実例でライブラリの機能を説明します。それらの最初のものは視覚芸術に捧げられています。 2つ目は、50行未満のコードでタイムキラーのジャンルでシンプルなアートゲームを作成する方法を示します。

なぜGraphicsJS

SVGでの作業を容易にするライブラリがかなりあります。Raphaël 、 Snap.svg、 BonsaiJSが最適です。それぞれに長所と短所がありますが、それらの詳細な比較は、次の出版物のいずれかのトピックになります。この記事は、GraphicsJSのみを対象としています。次に、このライブラリが優れており、他の製品と比べて際立っている理由を説明します。

まず、GraphicsJSは非常に軽量で、非常に柔軟なJavaScript APIを備えています。さまざまなブラウザーの特定のHTML DOMとは無関係に、仮想DOMと同様に、テキストの書式設定の豊富な機会を提供します。

第二に、このライブラリのコードは昨年秋にのみ公開されました。 AnyChartは、インタラクティブデータの視覚化ソリューションの開発におけるリーダーの1つであり、約3年間（AnyChart 7.0のリリース以降）商用製品のグラフィックエンジンとしてGraphicsJSを使用しているため、このライブラリは戦闘条件でテストされています。（免責事項：私はAnyChartのR＆D責任者であり、GraphicsJSの主任開発者です。）

第三に、他のAnyChart製品（グラフ作成用JavaScriptライブラリ）とは異なり、GraphicsJSは商用および非商用目的の両方で自由に使用できます。ライブラリは、Apacheライセンスの下でGitHubで入手できます。

第4に、GraphicsJSには、Internet Explorer 6.0以降、Safari 3.0以降、Firefox 3.0以降、Opera 9.5以降のサポートなど、ブラウザ間の互換性があります。 IEの古いバージョンでは、ライブラリは他のすべてのブラウザー（SVG）でVMLを使用します。

最後に、GraphicsJSを使用すると、グラフィックスとアニメーションを効率的に組み合わせることができます。図書館のメインギャラリーをご覧ください。燃えるき火、回転する銀河、雨、手続き的に生成された葉、 15パズルなどの例があります。 APIの詳細なドキュメントと詳細な説明で、 GraphicsJSの使用例がさらに見つかります。

GraphicsJSの基本

GraphicsJSを開始するには、ライブラリ自体を接続し、将来の描画のためにHTMLコードのブロック要素を作成する必要があります。

 <html lang="en"> <head> <meta charset="utf-8" /> <title>GraphicsJS Basic Example</title> </head> <body> <div id="stage-container" style="width: 400px; height: 375px;"></div> <script src="https://cdn.anychart.com/js/latest/graphics.min.js"></script> <script> //   GraphicsJS </script> </body> </html>

次に、ワークスペースを構築し、その中に何かを描く必要があります。例えば、長方形、円、または他の形状です。

 //    var stage = acgraph.create('stage-container'); //   var stage.rect(25, 50, 350, 300);

ここにCodePenの例があります。ここでもう少し進んで、 Deathly Hallowsのサインを描きます。

私たちの最初の傑作

輪郭、色、パターンの塗りつぶし

塗りつぶしとアウトラインの設定を使用して、任意の形状または線を色付けできます。すべてにパス（境界線）がありますが、塗りつぶしは図形と閉じた線でのみ使用できます。

GraphicsJSは、塗りつぶしとアウトラインの両方で、線形および放射状のグラデーションまで、これらのパラメーターの多数の設定を提供します。線は破線にすることができ、いくつかのタイルモードで画像を塗りつぶすこともできます。ただし、このような一連の関数は、ほとんどすべてのライブラリにあります。 GraphicsJSを際立たせているのは、ハッチとパターンの塗りつぶしオプションです。32（！）既製の塗りつぶしオプションから選択できるだけでなく、図形やテキストから独自のパターンを簡単に作成できます。

それでは、正確に何ができるかを見てみましょう。小さな絵（家の近くに立っている男）を描いて、色とパターンで塗りつぶして洗練させます。簡単にするために、ナイーブアートのスタイルのイメージにします（ブリュットにならないようにします）。行こう：

 //    var stage = acgraph.create('stage-container'); //   var frame = stage.rect(25, 50, 350, 300); //   var walls = stage.rect(50, 250, 200, 100); var roof = stage.path() .moveTo(50, 250) .lineTo(150, 180) .lineTo(250, 250) .close(); //   var head = stage.circle(330, 280, 10); var neck = stage.path().moveTo(330, 290).lineTo(330, 300); var kilt = stage.triangleUp(330, 320, 20); var rightLeg = stage.path().moveTo(320, 330).lineTo(320, 340); var leftLeg = stage.path().moveTo(340, 330).lineTo(340, 340);

結果はCodePenで表示できます。

ご覧のとおり、ここでは変数を使用します。ワークスペースに何かを描画するすべてのメソッドは、作成されたオブジェクトへのリンクを返し、それを使用して変更または削除できます。

さらに、GraphicsJSでは、チェーンコール（ stage.path().moveTo(320, 330).lineTo(320, 340);

）を積極的に使用できますstage.path().moveTo(320, 330).lineTo(320, 340);

これにより、コードを短縮できます。この機能は慎重に使用する必要がありますが、適切なアプローチを使用すると、チェーン呼び出しによりコードが本当にコンパクトで読みやすくなります。

これで、私たちが持っている写真を子供に渡し、色付けするように頼むことができます。子供でも次のトリックをマスターできるからです。

 //   //   frame.stroke(["red", "green", "blue"], 2, "2 2 2"); //   walls.fill(acgraph.hatchFill('horizontalbrick')); //   roof.fill("#e4d96f"); //   kilt.fill(acgraph.hatchFill('plaid'));

これで、例は次のようになります。

写真はキルトのハイランダーを示しています。彼はbrickき屋根のレンガ造りの城の近くに立っています。チャンスをつかんで、実際に私たちの写真を芸術作品と呼ぶこともできます。その著作権は私たちが保護したいものです。さて、私たちが設定するテキストパターンでの元の塗りつぶしの助けを借りてこれを行いましょう：

 // 169 -     var text = acgraph.text().text(String.fromCharCode(169)).opacity(0.2); var pattern_font = stage.pattern(text.getBounds()); pattern_font.addChild(text); //     frame.fill(pattern_font);

ご覧のとおり、これは非常に簡単です。テキストオブジェクトのインスタンスを作成してから、ワークスペースにパターンを作成し、最後にパターンにテキストを挿入する必要があります。

50行未満のコードでアートゲーム（タイムキラー）を描画します

記事の次の部分では、GraphicsJSを使用して、 Cookie ClickerのようなCookie Clickerゲームを50行未満のコードで描画する方法を示します。

このゲームの名前は「風の管理人」です。その中で、ユーザーは、風の強い秋の日に通りを掃除する用務員として機能します。これは、部分的に、GraphicsJSギャラリーから手順的に生成されたリーフを含むサンプルコードを使用します。

ゲームの最終バージョンは、CodePen （またはこの記事の最後）で見ることができます。

レイヤー、zIndex、仮想DOM

（前の例のように）ワークスペースを作成することから始めます。そして、いくつかのソース変数を宣言します。

 //    var stage = acgraph.create("stage-container"); //     var palette_fill = ['#5f8c3f', '#cb9226', '#515523', '#f2ad33', '#8b0f01']; var palette_stroke = ['#43622c', '#8e661b', '#393b19', '#a97924', '#610b01']; //  var leavesCounter = 0;

ゲームを作成するために、GraphicsJSで要素をグループ化するオブジェクトであるレイヤーを操作する機能を使用できます。要素をグループ化して、同じ変更（変換など）を適用しやすくする必要があります。レイヤーはサスペンドモードで変更できます（後で説明します）。これにより、パフォーマンスとユーザーエクスペリエンスが向上します。

この例では、レイヤーの機能は、葉をグループ化し、葉が何枚掃き出されたかを示す碑文で覆われないようにするのに役立ちます。これを行うには、最初に碑文を作成し、次にstage.layer

メソッドを使用して、作業領域全体のレイヤーを作成し、作業領域に碑文よりも低いzIndex

を割り当てます。

 //      var counterLabel = stage.text(10,10, "Swiped: 0", {fontSize: 20}); //    var gameLayer = stage.layer().zIndex(counterLabel.zIndex()-1);

これで、このレイヤーにいくつの葉を作成しても、テキストの上に表示されることはありません。

変換

次に、便利な変換用のAPIを使用して葉をレンダリングする関数を追加します。これにより、要素と要素のグループの両方を移動、拡大縮小、回転、トリミングできます。 GraphicsJSが提供する他の機能（レイヤーおよび仮想DOM）と組み合わせて、これは非常に強力なツールです。

 function drawLeaf(x, y) { //      var index = Math.floor(Math.random() * 5); var fill = palette_fill[index]; var stroke = palette_stroke[index]; //        var scale = Math.round(Math.random() * 30) / 10 + 1; var angle = Math.round(Math.random() * 360 * 100) / 100; //    () var path = acgraph.path(); //      path.fill(fill).stroke(stroke, 1, 'none', 'round', 'round'); var size = 18; path.moveTo(x, y) .curveTo(x + size / 2, y - size / 2, x + 3 * size / 4, y + size / 4, x + size, y) .curveTo(x + 3 * size / 4, y + size / 3, x + size / 3, y + size / 3, x, y); //    path.scale(scale, scale, x, y).rotate(angle, x, y); return path; };

ご覧のとおり、各行は同じ方法で作成されますが、変換されます。結果は非常に素晴らしいランダムな葉のパターンです。

イベントを操作する

GraphicsJSのすべてのオブジェクト、ワークスペース、レイヤーはイベントを処理できます。利用可能なすべてのイベントのリストは、 EventType APIにあります。同時に、ワークスペースはレンダリング制御のために4つの特別なイベントをサポートします。

ゲームの例では、各オブジェクト（シート）に関連付けられたイベントリスナーを使用して、葉の上にマウスを置くと葉が1つずつ消えます。これを実現するには、 return

前に、 drawLeaf

関数の最後に次のコードを追加します。

 path.listen("mouseover", function(){ path.remove(); counterLabel.text("Swiped: " + leavesCounter++); if (gameLayer.numChildren() < 200) shakeTree(300); });

ここから、葉をカウントするためにレイヤーが使用されることも明らかです。

 if (gameLayer.numChildren() < 200) shakeTree(300);

実際、ここでは葉の数を保存していません。葉は、あるレイヤーまたは別のレイヤーに追加または削除される線であるため、私たちが持っている子の数（したがって、残っている葉の数）を追跡できます。

GraphicsJSライブラリを使用すると、HTML DOMの抽象化である仮想DOMを使用できます。この仮想DOMは、軽量で、さまざまなブラウザーでSVG / VMLを使用する仕様に依存しません。このテクノロジーは、すべてのオブジェクトとレイヤーの制御、グループへの変換の適用、プロセス全体の追跡と制御を可能にするメソッドを使用したレンダリングの最適化など、多数の便利な機能の実装に役立ちます。

パフォーマンスの最適化

仮想DOMとイベントハンドラーのおかげで、GraphicsJSユーザーはレンダリングを制御できます。ライブラリドキュメントの記事「パフォーマンス」で、これらの関連性について読むことができます。

ゲームでリーフが生成されている時点で、レンダリングを一時停止し、すべての変更が行われたらすぐに更新する必要があります。

 function shakeTree(n){ stage.suspend(); //   for (var i = 0; i < n; i++) { var x = Math.random() * stage.width()/2 + 50; var y = Math.random() * stage.height()/2 + 50; gameLayer.addChild(drawLeaf(x, y)); //   } stage.resume(); //   }

要素を追加するこの方法を使用すると、新しい葉がほぼ瞬時に表示されます。

 //      shakeTree(500);

最後に、 shakeTree()

メソッドを呼び出して、すべての葉を破棄します。

最終結果

おわりに

HTML5に切り替えるとWebが変わりました。最新のWebアプリケーションや単純なサイトに至るまで、グラフィックの操作を必要とするタスクに遭遇することがよくあります。どのような状況でも完全に機能するソリューションを見つけることは不可能ですが、GraphicsJSライブラリに注意することをお勧めします。オープンソースコードとオープンソースライセンスがあり、非常に機能的で生産的で、優れたブラウザサポートと多くの機能を備えています。これらすべてが、GraphicsJSを興味深い、便利で、そしてもちろん、効果的なソリューションにします。

コメントでGraphicsJSについてのフィードバックをいただければ幸いです。すでにこのライブラリを使用していますか？新しいプロジェクトでそのアプリケーションを使用する可能性を検討する準備はできていますか？なぜ、なぜそうでないのかを知ることは興味深いでしょう。ところで、私は現在、最高のグラフィックJavaScriptライブラリのリストとそれらを比較する記事の作成に取り組んでいるので、どのライブラリに表示したいのかをコメントで書くことをお勧めします。

リンク集

一般的な情報

図書館

グラフィックスjs

SitePointに関するオリジナル記事の著者：Roman Lubushkin。

GraphicsJS-グラフィックJavaScriptライブラリ