強力な軽量グラフィックライブラリであるGraphicsJSの紹介-jsチュートリアル-php.cn

HTML5：現代のネットワークの礎。今日、SVGとキャンバスは、インタラクティブな画像を作成するときに選択された技術であることがよくあります。フラッシュは忘れられており、シルバーライトはネットワークの端で珍しいユニコーンになり、サードパーティのプラグインを覚えている人はほとんどいません。

各手法の長所と短所は十分に文書化されていますが、要するに、SVGはインタラクティブな要素の作成と処理に適しています。これは、SVGがXMLベースのベクトル形式であるため、画像が<svg></svg>タグを使用してページにロードされると、その中の各要素をSVG DOMで使用できるためです。

この記事では、SVGに基づいた新しい強力なオープンソースJavaScript描画ライブラリであるGraphicsJSを紹介したいと思います（古いIEバージョンの場合、VMLの代替品があります）。まず、その基本をすばやく紹介し、2つの短くて素晴らしい例でライブラリの機能を紹介します。最初の例は完全にアートに関するもので、2番目の例は50行未満のコードパズルアートでシンプルなものを書く方法を示しています。ゲーム。

キーポイント

AnyChartによって公開された

Graphicsjs

を選択する理由

開発者がSVG：raphaël、snap.svg、およびbonsaijsを使用するのに役立つ多くのライブラリがあります。これらのライブラリにはそれぞれ長所と短所がありますが、それらの徹底的な比較は別の記事の主題になります。この記事はGraphicsJSに関するものなので、それが何であり、何があるかを説明しましょう。

Introducing GraphicsJS, a Powerful Lightweight Graphics Library

まず、GraphicsJSは軽量で、非常に柔軟なJavaScript APIを備えています。多くの豊富なテキスト機能と、ブラウザー固有のHTML DOMの実装とは別の仮想DOMを実装します。

第二に、これは昨年秋にリリースされた新しいオープンソースJavaScriptライブラリであり、世界をリードするインタラクティブデータ視覚化ソフトウェア開発者の1人であるAnyChartによってリリースされました。 AnyChartはGraphicsJSを少なくとも3年間（AnyChart 7.0のリリース以来）使用して独自の製品にチャートをレンダリングしているため、GraphicsJSは完全に戦闘テストされています。（免責事項：私はAnyChartのR＆Dの責任者であり、GraphicsJSのリード開発者です）

3番目に、AnyChartのJavaScript Drawing Libraryとは異なり、GraphicsJSは商業および非営利のプロジェクトで無料で利用できます。 Apacheライセンスの下でGithubで入手できます。

4番目に、GraphicsJSにはクロスブラウザー互換性があり、Internet Explorer 6.0、Safari 3.0、Firefox 3.0、およびOpera 9.5をサポートしています。これは、古いIEバージョンでVMLおよび他のすべてのブラウザでSVGでレンダリングされます。

最後に、GraphicsJSを使用すると、グラフィックとアニメーションを完全に組み合わせることができます。アニメーションのbonき火、紡績銀河、降雨、手続き上の葉、プレイ可能な15パズルゲームなど、メインギャラリーをご覧ください。 GraphicsJSには、詳細なドキュメントと包括的なAPIリファレンスのより多くの例が含まれています。

GraphicsJS Basics

GraphicsJSを開始するには、ライブラリを参照して、図面のブロックレベルのHTML要素を作成する必要があります。

その後、ステージを作成して、長方形、円、その他の形などの何かを描く必要があります。

 <!DOCTYPE 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>

   <🎜>
   <🎜>
 </body>
 </html>

ログイン後にコピー

以下は、さらに一歩進んで死の秘宝シンボルを描くCodepenの例です。

私たちの最初の傑作

 // 创建舞台
 var stage = acgraph.create('stage-container');
 // 绘制矩形
 var stage.rect(25, 50, 350, 300);

ログイン後にコピー

塗りつぶし、ストローク、パターンの塗りつぶし

任意の形状またはパスは、塗りつぶし設定とストローク設定を使用して色付けできます。すべてにストローク（境界）がありますが、形状と閉じたパスのみがパディングを持っています。充填およびストロークの設定は非常に豊富で、線形または円形の勾配を使用して塗りつぶしとストロークを使用できます。さらに、線に点在し、サポート画像に複数のタイルモードが埋められます。しかし、これはほとんどすべてのライブラリで見つけることができるかなり標準的なものです。 GraphicsJSを特別なものにしているのは、メッシュとパターンの塗りつぶし機能です。これにより、32（！）の使用可能なメッシュフィルパターンを直接使用できるだけでなく、形状やテキストで作られたカスタムパターンを簡単に作成できます。

さあ、正確に何を達成できるか見てみましょう！私は家の近くに立っている男の簡単な絵を描き、それを強化するために異なるパターンと色でそれを満たします。簡単にするために、それを幼稚な芸術絵画にしましょう（そして、芸術の粗さを伴わないようにしてください）。それだけです：

Codepenで結果を表示します。

ご覧のとおり、変数を使用しています。ステージ上のコンテンツを描画するすべての方法は、作成されたオブジェクトへの参照を返し、このリンクを使用してオブジェクトを変更または削除できます。

 // 创建舞台
 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);

ログイン後にコピー

また、チェーンコール（例えば

）がGraphicsJSのいたるところにある方法に注意してください。これにより、コードの短縮に役立ちます。チェーンコールは注意して使用する必要がありますが、適切に適用すると、コードがよりコンパクトで読みやすくなります。

さあ、この着色ページを子供に渡して、ペイントさせましょう。子供でさえ次のテクニックを習得できるからです

 <!DOCTYPE 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>

   <🎜>
   <🎜>
 </body>
 </html>

ログイン後にコピー

これが私たちの例の見た目です。

今、私たちはキルトの隣に立っているハイランダーが屋根の上にわらを置いて彼のレンガの城の近くに立っていることの写真を持っています。これは確かに著作権を取得したい芸術作品であると言うリスクさえあります。カスタムテキストに基づいてパターン記入を使用してこれを行いましょう：

ご覧のとおり、これは簡単です。テキストオブジェクトのインスタンスを作成し、ステージ上にパターンを形成し、テキストをパターンに入れます。

 // 创建舞台
 var stage = acgraph.create('stage-container');
 // 绘制矩形
 var stage.rect(25, 50, 350, 300);

ログイン後にコピー

CodePenで色の著作権で保護された家/グラフィックスを表示します。

50行未満のコードでパズルアートゲームを作成

この記事の次の部分では、50行未満のコードでGraphicsJSを使用してCookieクリッカーのようなゲームを作成する方法を紹介します。

ゲーム名は

「風の中で通りを掃除する」<このゲームは、GraphicsJSギャラリーのプログラムで生成された葉の例のコードを使用しています。

CodePen（または記事の終わり）で完成したゲームを表示できます。

レイヤー、zindexおよび仮想dom

最初にステージを作成し（前述のように）、いくつかの初期変数を宣言します。

このゲームでは、レイヤーを使用します - グラフィックスのオブジェクトは、要素をグループ化するために使用されます。同様の変更を要素（変換など）に適用する場合は、要素をグループ化する必要があります。パフォーマンスとユーザーエクスペリエンスを向上させる可能性のあるレイヤーを一時停止モードで変更できます（これについては詳細）。

このデモでは、レイヤー関数を使用して、葉をグループ化し、ラベルを覆うのを避けます（葉が掃引されている葉の数がわかります）。これを行うには、タグを作成し、ステージバインディングレイヤーを作成する

メソッドを呼び出します。このレイヤーの

プロパティを、ラベルの下の

プロパティに設定します。

 // 创建舞台
 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);

ログイン後にコピー

これを行った後、レイヤーで作成した葉の数に関係なく、テキストを上書きしないようにすることができます。

変換stage.layer zIndex次に、葉を描く関数を追加しましょう。これにより、便利なGraphicsJS変換APIが使用されます。これにより、要素と要素のグループを移動、スケーリング、回転、およびカットできます。これは、レイヤーと仮想DOMと組み合わせると、非常に強力なツールです。 zIndex

 // 给图片着色
 // 精美的框架
 frame.stroke(["red", "green", "blue"], 2, "2 2 2");
 // 砖墙
 walls.fill(acgraph.hatchFill('horizontalbrick'));
 // 草屋顶
 roof.fill("#e4d96f");
 // 格子呢裙
 kilt.fill(acgraph.hatchFill('plaid'));

ログイン後にコピー

各パスが同じ方法で作成されていることがわかりますが、変換が実行されます。これにより、非常に美しいランダムな葉のパターンが生成されます。

イベントの処理

グラフィックスのオブジェクト、ステージ、およびレイヤーは、イベントを処理できます。サポートされているイベントの完全なリストは、EventType APIにあります。レンダリングを制御するための4つの特別なイベントがステージにあります。

このゲームの例では、ユーザーがそれらの上に浮かんだときに1つずつ消えるように、Leafオブジェクトに接続されたイベントリスナーを使用しています。これを行うには、

ステートメントの前に、次のコードをdrawLeaves関数の下部に追加します：return

 <!DOCTYPE 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>

   <🎜>
   <🎜>
 </body>
 </html>

ログイン後にコピー

ここでは、葉を計算するために層を使用していることもわかります。

 // 创建舞台
 var stage = acgraph.create('stage-container');
 // 绘制矩形
 var stage.rect(25, 50, 350, 300);

ログイン後にコピー

ここに葉の数を実際に保存していないことに注意してください。特定の層に葉を追加し、それらから葉を取り除くため、これにより、私たちが持っている子供の要素の数を追跡できます（したがって、残りの葉の数）。

GraphicsJSは、ブラウザ固有のSVG/VMLの実装とは別に、抽象的で軽量で、独立した仮想DOMを提供します。すべてのオブジェクトとレイヤーの追跡、グループへの変換の適用、レンダリングをヘルプで最適化するなど、多くの素晴らしいことを行うことで非常に便利です。レンダリングプロセスを追跡および制御できます。

パフォーマンスの最適化

仮想DOMおよびイベントハンドラーにより、GraphicsJSユーザーはレンダリングを制御できます。パフォーマンス記事は、これらの内容間の関係を理解するのに役立ちます。

ゲームで葉を生成する場合、新しい葉を追加するときにレンダリングを一時停止する必要があり、すべての変更が完了した後にレンダリングを再開する必要があります。

新しい要素を扱うこの方法により、新しい葉がほとんどすぐに表示されます。

 // 创建舞台
 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);

ログイン後にコピー

最後に、

を呼び出してすべてを開始します。

shakeTree()

最終結果

 // 给图片着色
 // 精美的框架
 frame.stroke(["red", "green", "blue"], 2, "2 2 2");
 // 砖墙
 walls.fill(acgraph.hatchFill('horizontalbrick'));
 // 草屋顶
 roof.fill("#e4d96f");
 // 格子呢裙
 kilt.fill(acgraph.hatchFill('plaid'));

ログイン後にコピー

CodepenでStreet Cleaner/GraphicsJsを表示します。

結論

HTML5への移行により、ネットワークが変更されました。最新のWebアプリケーションやシンプルなWebサイトでさえ、画像処理が必要なタスクに遭遇することがよくあります。あらゆる場合にうまく機能するソリューションを見つけることは不可能ですが、GraphicsJSライブラリを考慮する必要があります。これはオープンソースで、堅牢で、優れたブラウザのサポートと、楽しく、便利で、もちろん便利な多くの機能を備えています。

以下のコメントでGrphicsJSに関するフィードバックを聞いてみたいです。あなたはすでにそれを使用していますか？新しいプロジェクトに使用することを検討しますか？理由を知りたいのですが、なぜ使わないのかを知りたいです。また、それらすべてを比較して比較するライブラリと記事を描く主要なJavaScriptのリストを執筆しています。そこに見たい機能を自由に指摘してください。

さらに読むための

リンク

一般情報
- svg
- canvas
- svg vs. canvas
ライブラリ
- graphicsjs
- raphaël
- snap.svg
- bonsaijs
graphicsjs
- のグラフィックスです

グラフィックスの質問

GraphicsJsは他のJavaScriptグラフィックライブラリとどのように違いますか？

グラフィックスは、その強力で軽量な性質で際立っています。これは、開発者が高精度と高性能であらゆるグラフィックを描画してアニメーション化できる強力なライブラリです。他のライブラリとは異なり、GraphicsJSは、速度や効率に影響を与えることなく、レイヤー、勾配、パターンなどを含む包括的な機能セットを提供します。また、すべての最新のブラウザをサポートしており、開発者にとって多用途のオプションになっています。

グラフィックスを始めるにはどうすればよいですか？

GraphicsJSを開始するには、HTMLファイルにGraphicsJSライブラリを含める必要があります。公式ウェブサイトからライブラリをダウンロードするか、CDNを使用できます。ライブラリが含まれたら、ライブラリが提供する適切な機能とメソッドを呼び出すことにより、グラフィックの作成を開始できます。

グラフィックスを使用して複雑なアニメーションを作成できますか？

はい、GraphicsJSは複雑なアニメーションを簡単に処理するように設計されています。緩和機能、遅延、期間設定など、アニメーション機能の豊富なセットを提供します。グラフの属性、その位置、サイズ、色など、アニメーション化できます。これにより、GraphicsJSはインタラクティブで動的なグラフィックを作成するための強力なツールになります。

GraphicsJSはすべてのブラウザと互換性がありますか？

GraphicsJSは、Chrome、Firefox、Safari、Internet Explorerなど、すべての最新のブラウザーと互換性があるように設計されています。レンダリングにはSVGとVMLを使用していますが、これらはすべてそれらをサポートしています。これにより、グラフィックが一貫して見えるようになり、さまざまなプラットフォームやデバイスでうまく機能します。

グラフィックスを使用してグラデーションを作成する方法は？

グラフィックスでグラデーションを作成するのは簡単です。勾配法を使用して、線形または放射状の勾配を定義し、色と位置を指定し、任意の形状に勾配を適用できます。これにより、カラフルなグラフィックを簡単に作成できます。

グラフィックスを使用してインタラクティブなグラフィックを作成できますか？

はい、GraphicsJSは、インタラクティブなグラフィックを作成できる一連のイベント処理機能を提供します。イベントリスナーを任意のグラフに添付して、クリック、マウスの動きなどのユーザーアクションに応答できます。これにより、GraphicsJSはインタラクティブなWebアプリケーションを作成するための優れた選択肢になります。

GraphicsJSはレイヤーをサポートしていますか？

はい、GraphicsJSはレイヤーをサポートし、グラフィックを個別のグループに整理できるようにします。各レイヤーは独立して操作できるため、複雑なグラフィックを簡単に管理できます。また、各レイヤーの可視性とZオーダーを制御することもでき、グラフィックの細粒を制御できます。

グラフィックスを使用してグラフィックを最適化する方法は？

GraphicsJSは、グラフィックを最適化するのに役立ついくつかの機能を提供します。たとえば、作物方式を使用して、指定された領域の外側のグラフィックスの一部を非表示にすることで、必要なレンダリングの量を減らすことができます。キャッシュメソッドを使用して、グラフィックのレンダリングされた出力を保存することもできます。これにより、グラフィックを頻繁に塗り直すとパフォーマンスが向上します。

グラフィックスを使用してチャートとグラフィックを作成できますか？

GraphicsJSはチャートやグラフィックを作成するために特別に設計されていませんが、その強力な図面とアニメーション機能により、チャートやグラフィックを含むあらゆるタイプのグラフィックを作成できます。ライブラリの方法を使用して、線、曲線、長方形、円などを描画して、さまざまなチャートタイプを作成できます。