HTML5：現(xiàn)代のネットワークの礎。今日、SVGとキャンバスは、インタラクティブな畫像を作成するときに選択された技術であることがよくあります。フラッシュは忘れられており、シルバーライトはネットワークの端で珍しいユニコーンになり、サードパーティのプラグインを覚えている人はほとんどいません。
各手法の長所と短所は十分に文書化されていますが、要するに、SVGはインタラクティブな要素の作成と処理に適しています。これは、SVGがXMLベースのベクトル形式であるため、畫像が<svg></svg>タグを使用してページにロードされると、その中の各要素をSVG DOMで使用できるためです。
キーポイント
- GraphicsJSは、SVGに基づいた新しい強力なオープンソースJavaScript図面図書館であり、古いIEバージョンにVMLの代替品を提供します。それは軽量で柔軟で、リッチなJavaScript APIがあります。
- AnyChartによって公開された このライブラリは、AnyChartの獨自の製品で少なくとも3年間レンダリングされており、その堅牢性を確保しています。 AnyChartのJavaScript Drawing Galleryとは異なり、GraphicsJSは商業(yè)および非営利のプロジェクトで無料で利用できます。
- GraphicsJSはクロスブラウザーの互換性であり、Internet Explorer 6.0、Safari 3.0、Firefox 3.0、およびOpera 9.5をサポートしています。これは、古いIEバージョンでVMLおよび他のすべてのブラウザでSVGでレンダリングされます。
- このライブラリは、アニメーション化されたbonき火、回転銀河、降雨、プレイ可能な15パズルゲームなど、グラフィックとアニメーションの組み合わせを可能にします。また、詳細なドキュメントと包括的なAPI參照も含まれています。
- GraphicsJSライブラリを使用して、レイヤー、グラデーション、パターン、イベント処理、パフォーマンスの最適化などのインタラクティブなWebアプリケーションを作成できます。また、複雑なアニメーションと変換をサポートしているため、開発者にとって多用途のオプションになります。
を選択する理由
開発者がSVG：rapha?l、snap.svg、およびbonsaijsを使用するのに役立つ多くのライブラリがあります。これらのライブラリにはそれぞれ長所と短所がありますが、それらの徹底的な比較は別の記事の主題になります。この記事はGraphicsJSに関するものなので、それが何であり、何があるかを説明しましょう。
第二に、これは昨年秋にリリースされた新しいオープンソースJavaScriptライブラリであり、世界をリードするインタラクティブデータ視覚化ソフトウェア開発者の1人であるAnyChartによってリリースされました。 AnyChartはGraphicsJSを少なくとも3年間（AnyChart 7.0のリリース以來）使用して獨自の製品にチャートをレンダリングしているため、GraphicsJSは完全に戦闘テストされています。 （免責事項：私はAnyChartのR＆Dの責任者であり、GraphicsJSのリード開発者です）
3番目に、AnyChartのJavaScript Drawing Libraryとは異なり、GraphicsJSは商業(yè)および非営利のプロジェクトで無料で利用できます。 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の例です。
私たちの最初の傑作
// 創(chuàng)建舞臺
var stage = acgraph.create('stage-container');
// 繪制矩形
var stage.rect(25, 50, 350, 300);
塗りつぶし、ストローク、パターンの塗りつぶし
任意の形狀またはパスは、塗りつぶし設定とストローク設定を使用して色付けできます。すべてにストローク（境界）がありますが、形狀と閉じたパスのみがパディングを持っています。充填およびストロークの設定は非常に豊富で、線形または円形の勾配を使用して塗りつぶしとストロークを使用できます。さらに、線に點在し、サポート畫像に複數(shù)のタイルモードが埋められます。しかし、これはほとんどすべてのライブラリで見つけることができるかなり標準的なものです。 GraphicsJSを特別なものにしているのは、メッシュとパターンの塗りつぶし機能です。これにより、32（?。─问褂每赡埭圣幞氓伐濂榨％毳靴咯`ンを直接使用できるだけでなく、形狀やテキストで作られたカスタムパターンを簡単に作成できます。
さあ、正確に何を達成できるか見てみましょう！私は家の近くに立っている男の簡単な絵を描き、それを強化するために異なるパターンと色でそれを満たします。簡単にするために、それを幼稚な蕓術絵畫にしましょう（そして、蕓術の粗さを伴わないようにしてください）。それだけです：
Codepenで結果を表示します。
ご覧のとおり、変數(shù)を使用しています。ステージ上のコンテンツを描畫するすべての方法は、作成されたオブジェクトへの參照を返し、このリンクを使用してオブジェクトを変更または削除できます。
// 創(chuàng)建舞臺
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>これが私たちの例の見た目です。
今、私たちはキルトの隣に立っているハイランダーが屋根の上にわらを置いて彼のレンガの城の近くに立っていることの寫真を持っています。これは確かに著作権を取得したい蕓術作品であると言うリスクさえあります。カスタムテキストに基づいてパターン記入を使用してこれを行いましょう：
ご覧のとおり、これは簡単です。テキストオブジェクトのインスタンスを作成し、ステージ上にパターンを形成し、テキストをパターンに入れます。
// 創(chuàng)建舞臺
var stage = acgraph.create('stage-container');
// 繪制矩形
var stage.rect(25, 50, 350, 300);CodePenで色の著作権で保護された家/グラフィックスを表示します。 50行未満のコードでパズルアートゲームを作成
この記事の次の部分では、50行未満のコードでGraphicsJSを使用してCookieクリッカーのようなゲームを作成する方法を紹介します。
ゲーム名は
「風の中で通りを掃除する」<このゲームは、GraphicsJSギャラリーのプログラムで生成された葉の例のコードを使用しています。CodePen（または記事の終わり）で完成したゲームを表示できます。
レイヤー、zindexおよび仮想dom
最初にステージを作成し（前述のように）、いくつかの初期変數(shù)を宣言します。このゲームでは、レイヤーを使用します - グラフィックスのオブジェクトは、要素をグループ化するために使用されます。同様の変更を要素（変換など）に適用する場合は、要素をグループ化する必要があります。パフォーマンスとユーザーエクスペリエンスを向上させる可能性のあるレイヤーを一時停止モードで変更できます（これについては詳細）。
このデモでは、レイヤー関數(shù)を使用して、葉をグループ化し、ラベルを覆うのを避けます（葉が掃引されている葉の數(shù)がわかります）。これを行うには、タグを作成し、ステージバインディングレイヤーを作成するメソッドを呼び出します。このレイヤーの
プロパティを、ラベルの下のプロパティに設定します。
// 創(chuàng)建舞臺
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);
これを行った後、レイヤーで作成した葉の數(shù)に関係なく、テキストを上書きしないようにすることができます。
変換stage.layer
zIndex次に、葉を描く関數(shù)を追加しましょう。これにより、便利な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関數(shù)の下部に追加します：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>ここでは、葉を計算するために層を使用していることもわかります。
// 創(chuàng)建舞臺
var stage = acgraph.create('stage-container');
// 繪制矩形
var stage.rect(25, 50, 350, 300);ここに葉の數(shù)を実際に保存していないことに注意してください。特定の層に葉を追加し、それらから葉を取り除くため、これにより、私たちが持っている子供の要素の數(shù)を追跡できます（したがって、殘りの葉の數(shù)）。 GraphicsJSは、ブラウザ固有のSVG/VMLの実裝とは別に、抽象的で軽量で、獨立した仮想DOMを提供します。すべてのオブジェクトとレイヤーの追跡、グループへの変換の適用、レンダリングをヘルプで最適化するなど、多くの素晴らしいことを行うことで非常に便利です。レンダリングプロセスを追跡および制御できます。
パフォーマンスの最適化
仮想DOMおよびイベントハンドラーにより、GraphicsJSユーザーはレンダリングを制御できます。パフォーマンス記事は、これらの內容間の関係を理解するのに役立ちます。
ゲームで葉を生成する場合、新しい葉を追加するときにレンダリングを一時停止する必要があり、すべての変更が完了した後にレンダリングを再開する必要があります。
新しい要素を扱うこの方法により、新しい葉がほとんどすぐに表示されます。
// 創(chuàng)建舞臺
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ライブラリを考慮する必要があります。これはオープンソースで、堅牢で、優(yōu)れたブラウザのサポートと、楽しく、便利で、もちろん便利な多くの機能を備えています。
以下のコメントでGrphicsJSに関するフィードバックを聞いてみたいです。あなたはすでにそれを使用していますか？新しいプロジェクトに使用することを検討しますか？理由を知りたいのですが、なぜ使わないのかを知りたいです。また、それらすべてを比較して比較するライブラリと記事を描く主要なJavaScriptのリストを執(zhí)筆しています。そこに見たい機能を自由に指摘してください。
さらに読むためのリンク
- 一般情報
- svg
- canvas
- svg vs. canvas
- ライブラリ
- graphicsjs
- rapha?l
- snap.svg
- bonsaijs
- graphicsjs
-
Github
- のグラフィックスです GraphicsJSドキュメント
- graphicsjs apiリファレンス
GraphicsJsは他のJavaScriptグラフィックライブラリとどのように違いますか？
グラフィックスは、その強力で軽量な性質で際立っています。これは、開発者が高精度と高性能であらゆるグラフィックを描畫してアニメーション化できる強力なライブラリです。他のライブラリとは異なり、GraphicsJSは、速度や効率に影響を與えることなく、レイヤー、勾配、パターンなどを含む包括的な機能セットを提供します。また、すべての最新のブラウザをサポートしており、開発者にとって多用途のオプションになっています。
グラフィックスを始めるにはどうすればよいですか？
GraphicsJSを開始するには、HTMLファイルにGraphicsJSライブラリを含める必要があります。公式ウェブサイトからライブラリをダウンロードするか、CDNを使用できます。ライブラリが含まれたら、ライブラリが提供する適切な機能とメソッドを呼び出すことにより、グラフィックの作成を開始できます。
グラフィックスを使用して複雑なアニメーションを作成できますか？
はい、GraphicsJSは複雑なアニメーションを簡単に処理するように設計されています。緩和機能、遅延、期間設定など、アニメーション機能の豊富なセットを提供します。グラフの屬性、その位置、サイズ、色など、アニメーション化できます。これにより、GraphicsJSはインタラクティブで動的なグラフィックを作成するための強力なツールになります。
GraphicsJSはすべてのブラウザと互換性がありますか？
GraphicsJSは、Chrome、Firefox、Safari、Internet Explorerなど、すべての最新のブラウザーと互換性があるように設計されています。レンダリングにはSVGとVMLを使用していますが、これらはすべてそれらをサポートしています。これにより、グラフィックが一貫して見えるようになり、さまざまなプラットフォームやデバイスでうまく機能します。
グラフィックスを使用してグラデーションを作成する方法は？
グラフィックスでグラデーションを作成するのは簡単です。勾配法を使用して、線形または放射狀の勾配を定義し、色と位置を指定し、任意の形狀に勾配を適用できます。これにより、カラフルなグラフィックを簡単に作成できます。
グラフィックスを使用してインタラクティブなグラフィックを作成できますか？
はい、GraphicsJSは、インタラクティブなグラフィックを作成できる一連のイベント処理機能を提供します。イベントリスナーを任意のグラフに添付して、クリック、マウスの動きなどのユーザーアクションに応答できます。これにより、GraphicsJSはインタラクティブなWebアプリケーションを作成するための優(yōu)れた選択肢になります。
GraphicsJSはレイヤーをサポートしていますか？
はい、GraphicsJSはレイヤーをサポートし、グラフィックを個別のグループに整理できるようにします。各レイヤーは獨立して操作できるため、複雑なグラフィックを簡単に管理できます。また、各レイヤーの可視性とZオーダーを制御することもでき、グラフィックの細粒を制御できます。
グラフィックスを使用してグラフィックを最適化する方法は？
GraphicsJSは、グラフィックを最適化するのに役立ついくつかの機能を提供します。たとえば、作物方式を使用して、指定された領域の外側のグラフィックスの一部を非表示にすることで、必要なレンダリングの量を減らすことができます。キャッシュメソッドを使用して、グラフィックのレンダリングされた出力を保存することもできます。これにより、グラフィックを頻繁に塗り直すとパフォーマンスが向上します。
グラフィックスを使用してチャートとグラフィックを作成できますか？
GraphicsJSはチャートやグラフィックを作成するために特別に設計されていませんが、その強力な図面とアニメーション機能により、チャートやグラフィックを含むあらゆるタイプのグラフィックを作成できます。ライブラリの方法を使用して、線、曲線、長方形、円などを描畫して、さまざまなチャートタイプを作成できます。
GraphicsJsは自由に使用できますか？
はい、GraphicsJSは無料のオープンソースライブラリです。プロジェクトで無料で使用できます。また、ライブラリは、最新のWeb標準とテクノロジーと同期していることを確認するために積極的に維持されています。
以上が強力な軽量グラフィックライブラリであるGraphicsJSの紹介の詳細內容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。
ホットAIツール
Undress AI Tool
脫衣畫像を無料で
Undresser.AI Undress
リアルなヌード寫真を作成する AI 搭載アプリ
AI Clothes Remover
寫真から衣服を削除するオンライン AI ツール。
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中國語版
中國語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統(tǒng)合開発環(huán)境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
8636
17
1783
16
1725
56
1577
28
1440
31
Java vs. JavaScript：混亂を解消します
Jun 20, 2025 am 12:27 AM
JavaとJavaScriptは異なるプログラミング言語であり、それぞれ異なるアプリケーションシナリオに適しています。 Javaは大規(guī)模なエンタープライズおよびモバイルアプリケーション開発に使用されますが、JavaScriptは主にWebページ開発に使用されます。
JavaScriptコメント：短い説明
Jun 19, 2025 am 12:40 AM
JavaScriptcommentsEareEssentialential-formaining、およびGuidingCodeexecution.1）single-linecommentseared forquickexplanations.2）多LinecommentsexplaincomplexlogiCorprovidededocumentation.3）clarifyspartsofcode.bestpractic
JSで日付と時間を操作する方法は？
Jul 01, 2025 am 01:27 AM
JavaScriptで日付と時間を処理する場合は、次の點に注意する必要があります。1。日付オブジェクトを作成するには多くの方法があります。 ISO形式の文字列を使用して、互換性を確保することをお勧めします。 2。時間情報を取得および設定して、メソッドを設定でき、月は0から始まることに注意してください。 3.手動でのフォーマット日付には文字列が必要であり、サードパーティライブラリも使用できます。 4.ルクソンなどのタイムゾーンをサポートするライブラリを使用することをお勧めします。これらの重要なポイントを習得すると、一般的な間違いを効果的に回避できます。
JavaScript vs. Java：開発者向けの包括的な比較
Jun 20, 2025 am 12:21 AM
javascriptispreferredforwebdevelopment、whilejavaisbetterforlge-scalebackendsystemsandroidapps.1）javascriptexcelsininintingtivewebexperiences withitsdynAmicnature anddommanipulation.2）javaofferstruntypyping-dobject-reientedpeatures
なぜの下部にタグを配置する必要があるのですか？
Jul 02, 2025 am 01:22 AM
PLACSTHETTHETTHE BOTTOMOFABLOGPOSTORWEBPAGESERVESPAGESPORCICALPURPOSESESFORSEO、userexperience、andDesign.1.IthelpswithiobyAllowingseNStoAccessKeysword-relevanttagwithtagwithtagwithtagwithemaincontent.2.iTimrovesexperiencebyepingepintepepinedeeping
JavaScript：効率的なコーディングのためのデータ型の調査
Jun 20, 2025 am 12:46 AM
javascripthassevenfundamentaldatypes：number、string、boolean、undefined、null、object、andsymbol.1）numberseadouble-precisionformat、有用であるため、有用性の高いものであるため、but-for-loating-pointarithmetic.2）ストリングリムムット、使用率が有用であること
DOMでのイベントの泡立ちとキャプチャとは何ですか？
Jul 02, 2025 am 01:19 AM
イベントキャプチャとバブルは、DOMのイベント伝播の2つの段階です。キャプチャは最上層からターゲット要素までであり、バブルはターゲット要素から上層までです。 1.イベントキャプチャは、AddEventListenerのUseCaptureパラメーターをTrueに設定することにより実裝されます。 2。イベントバブルはデフォルトの動作であり、UseCaptureはfalseに設定されているか、省略されます。 3。イベントの伝播を使用して、イベントの伝播を防ぐことができます。 4.イベントバブルは、動的なコンテンツ処理効率を改善するためにイベント委任をサポートします。 5.キャプチャを使用して、ロギングやエラー処理など、事前にイベントを傍受できます。これらの2つのフェーズを理解することは、タイミングとJavaScriptがユーザー操作にどのように反応するかを正確に制御するのに役立ちます。
JavaとJavaScriptの違いは何ですか？
Jun 17, 2025 am 09:17 AM
JavaとJavaScriptは、異なるプログラミング言語です。 1.Javaは、エンタープライズアプリケーションや大規(guī)模なシステムに適した、靜的に型付けされ、コンパイルされた言語です。 2。JavaScriptは動的なタイプと解釈された言語であり、主にWebインタラクションとフロントエンド開発に使用されます。
