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

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

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

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

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

このウェブサイトの声明

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

ホットAIツール

Undresser.AI Undress

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

AI Clothes Remover

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

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

Video Face Swap

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

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

ホットトピック

Java チュートリアル

1666

CakePHP チュートリアル

1425

Laravel チュートリアル

1327

PHP チュートリアル

1273

C# チュートリアル

1252

Related knowledge

JavaScriptエンジン：実装の比較 Apr 13, 2025 am 12:05 AM

さまざまなJavaScriptエンジンは、各エンジンの実装原則と最適化戦略が異なるため、JavaScriptコードを解析および実行するときに異なる効果をもたらします。 1。語彙分析：ソースコードを語彙ユニットに変換します。 2。文法分析：抽象的な構文ツリーを生成します。 3。最適化とコンパイル：JITコンパイラを介してマシンコードを生成します。 4。実行：マシンコードを実行します。 V8エンジンはインスタントコンピレーションと非表示クラスを通じて最適化され、Spidermonkeyはタイプ推論システムを使用して、同じコードで異なるパフォーマンスパフォーマンスをもたらします。

Python vs. JavaScript：学習曲線と使いやすさ Apr 16, 2025 am 12:12 AM

Pythonは、スムーズな学習曲線と簡潔な構文を備えた初心者により適しています。 JavaScriptは、急な学習曲線と柔軟な構文を備えたフロントエンド開発に適しています。 1。Python構文は直感的で、データサイエンスやバックエンド開発に適しています。 2。JavaScriptは柔軟で、フロントエンドおよびサーバー側のプログラミングで広く使用されています。

C/CからJavaScriptへ：すべてがどのように機能するか Apr 14, 2025 am 12:05 AM

C/CからJavaScriptへのシフトには、動的なタイピング、ゴミ収集、非同期プログラミングへの適応が必要です。 1）C/Cは、手動メモリ管理を必要とする静的に型付けられた言語であり、JavaScriptは動的に型付けされ、ごみ収集が自動的に処理されます。 2）C/Cはマシンコードにコンパイルする必要がありますが、JavaScriptは解釈言語です。 3）JavaScriptは、閉鎖、プロトタイプチェーン、約束などの概念を導入します。これにより、柔軟性と非同期プログラミング機能が向上します。

JavaScriptとWeb：コア機能とユースケース Apr 18, 2025 am 12:19 AM

Web開発におけるJavaScriptの主な用途には、クライアントの相互作用、フォーム検証、非同期通信が含まれます。 1）DOM操作による動的なコンテンツの更新とユーザーインタラクション。 2）ユーザーエクスペリエンスを改善するためにデータを提出する前に、クライアントの検証が実行されます。 3）サーバーとのリフレッシュレス通信は、AJAXテクノロジーを通じて達成されます。

JavaScript in Action：実際の例とプロジェクト Apr 19, 2025 am 12:13 AM

現実世界でのJavaScriptのアプリケーションには、フロントエンドとバックエンドの開発が含まれます。 1）DOM操作とイベント処理を含むTODOリストアプリケーションを構築して、フロントエンドアプリケーションを表示します。 2）node.jsを介してRestfulapiを構築し、バックエンドアプリケーションをデモンストレーションします。

JavaScriptエンジンの理解：実装の詳細 Apr 17, 2025 am 12:05 AM

JavaScriptエンジンが内部的にどのように機能するかを理解することは、開発者にとってより効率的なコードの作成とパフォーマンスのボトルネックと最適化戦略の理解に役立つためです。 1）エンジンのワークフローには、3つの段階が含まれます。解析、コンパイル、実行。 2）実行プロセス中、エンジンはインラインキャッシュや非表示クラスなどの動的最適化を実行します。 3）ベストプラクティスには、グローバル変数の避け、ループの最適化、constとletsの使用、閉鎖の過度の使用の回避が含まれます。

Python vs. JavaScript：コミュニティ、ライブラリ、リソース Apr 15, 2025 am 12:16 AM

PythonとJavaScriptには、コミュニティ、ライブラリ、リソースの観点から、独自の利点と短所があります。 1）Pythonコミュニティはフレンドリーで初心者に適していますが、フロントエンドの開発リソースはJavaScriptほど豊富ではありません。 2）Pythonはデータサイエンスおよび機械学習ライブラリで強力ですが、JavaScriptはフロントエンド開発ライブラリとフレームワークで優れています。 3）どちらも豊富な学習リソースを持っていますが、Pythonは公式文書から始めるのに適していますが、JavaScriptはMDNWebDocsにより優れています。選択は、プロジェクトのニーズと個人的な関心に基づいている必要があります。

Python vs. JavaScript：開発環境とツール Apr 26, 2025 am 12:09 AM

開発環境におけるPythonとJavaScriptの両方の選択が重要です。 1）Pythonの開発環境には、Pycharm、Jupyternotebook、Anacondaが含まれます。これらは、データサイエンスと迅速なプロトタイピングに適しています。 2）JavaScriptの開発環境には、フロントエンドおよびバックエンド開発に適したnode.js、vscode、およびwebpackが含まれます。プロジェクトのニーズに応じて適切なツールを選択すると、開発効率とプロジェクトの成功率が向上する可能性があります。

See all articles

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

を選択する理由

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

ゲーム名は

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

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

リンク

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

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

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

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック