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

ホームページ

ウェブフロントエンド

jsチュートリアル

強力な軽量グラフィックライブラリであるGraphicsJSの紹介

尊渡假赌尊渡假赌尊渡假赌

Feb 17, 2025 am 10:42 AM

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クリッカーのようなゲームを作成する方法を紹介します。

ゲーム名は

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

GraphicsJsは自由に使用できますか？

はい、GraphicsJSは無料のオープンソースライブラリです。プロジェクトで無料で使用できます。また、ライブラリは、最新のWeb標準とテクノロジーと同期していることを確認するために積極的に維持されています。

以上が強力な軽量グラフィックライブラリであるGraphicsJSの紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

JavaScriptのデータ型：ブラウザとNodejsに違いはありますか？May 14, 2025 am 12:15 AM

JavaScriptコアデータ型は、ブラウザとnode.jsで一貫していますが、余分なタイプとは異なる方法で処理されます。 1）グローバルオブジェクトはブラウザのウィンドウであり、node.jsのグローバルです2）バイナリデータの処理に使用されるNode.jsの一意のバッファオブジェクト。 3）パフォーマンスと時間の処理にも違いがあり、環境に従ってコードを調整する必要があります。

JavaScriptコメント：//および / * *を使用するためのガイドMay 13, 2025 pm 03:49 PM

javascriptusestwotypesofcomments：シングルライン（//）およびマルチライン（//）

Python vs. JavaScript：開発者の比較分析May 09, 2025 am 12:22 AM

PythonとJavaScriptの主な違いは、タイプシステムとアプリケーションシナリオです。 1。Pythonは、科学的コンピューティングとデータ分析に適した動的タイプを使用します。 2。JavaScriptは弱いタイプを採用し、フロントエンドとフルスタックの開発で広く使用されています。この2つは、非同期プログラミングとパフォーマンスの最適化に独自の利点があり、選択する際にプロジェクトの要件に従って決定する必要があります。

Python vs. JavaScript：ジョブに適したツールを選択するMay 08, 2025 am 12:10 AM

PythonまたはJavaScriptを選択するかどうかは、プロジェクトの種類によって異なります。1）データサイエンスおよび自動化タスクのPythonを選択します。 2）フロントエンドとフルスタック開発のためにJavaScriptを選択します。 Pythonは、データ処理と自動化における強力なライブラリに好まれていますが、JavaScriptはWebインタラクションとフルスタック開発の利点に不可欠です。

PythonとJavaScript：それぞれの強みを理解するMay 06, 2025 am 12:15 AM

PythonとJavaScriptにはそれぞれ独自の利点があり、選択はプロジェクトのニーズと個人的な好みに依存します。 1. Pythonは、データサイエンスやバックエンド開発に適した簡潔な構文を備えた学習が簡単ですが、実行速度が遅くなっています。 2。JavaScriptはフロントエンド開発のいたるところにあり、強力な非同期プログラミング機能を備えています。 node.jsはフルスタックの開発に適していますが、構文は複雑でエラーが発生しやすい場合があります。

JavaScriptのコア：CまたはCの上に構築されていますか？May 05, 2025 am 12:07 AM

javascriptisnotbuiltoncorc;それは、解釈されていることを解釈しました。

JavaScriptアプリケーション：フロントエンドからバックエンドまでMay 04, 2025 am 12:12 AM

JavaScriptは、フロントエンドおよびバックエンド開発に使用できます。フロントエンドは、DOM操作を介してユーザーエクスペリエンスを強化し、バックエンドはnode.jsを介してサーバータスクを処理することを処理します。 1.フロントエンドの例：Webページテキストのコンテンツを変更します。 2。バックエンドの例：node.jsサーバーを作成します。

Python vs. Javascript：どの言語を学ぶべきですか？May 03, 2025 am 12:10 AM

PythonまたはJavaScriptの選択は、キャリア開発、学習曲線、エコシステムに基づいている必要があります。1）キャリア開発：Pythonはデータサイエンスとバックエンド開発に適していますが、JavaScriptはフロントエンドおよびフルスタック開発に適しています。 2）学習曲線：Python構文は簡潔で初心者に適しています。 JavaScriptの構文は柔軟です。 3）エコシステム：Pythonには豊富な科学コンピューティングライブラリがあり、JavaScriptには強力なフロントエンドフレームワークがあります。

See all articles

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

Safe Exam Browser

Safe Exam Browser は、オンライン試験を安全に受験するための安全なブラウザ環境です。このソフトウェアは、あらゆるコンピュータを安全なワークステーションに変えます。あらゆるユーティリティへのアクセスを制御し、学生が無許可のリソースを使用するのを防ぎます。

DVWA

Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、