HTML5：現代網絡的基石。如今，在創建交互式圖像時，SVG 和 Canvas 通常是首選技術——Flash 已被遺忘，Silverlight 則成為網絡邊緣罕見的獨角獸，很少有人記得第三方插件。
每種技術的優缺點都有詳細記錄，但簡而言之，SVG 更適合創建和處理交互式元素。這是因為 SVG 是一種基於 XML 的矢量格式，當使用 <svg></svg> 標籤將圖像加載到頁面中時，其中的每個元素都可以在 SVG DOM 中使用。
在本文中，我想向您介紹 GraphicsJS，這是一個基於 SVG 的全新強大的開源 JavaScript 繪圖庫（對於舊版 IE 版本，它具有 VML 備用方案）。我將首先快速介紹其基礎知識，然後藉助兩個簡短而精彩的示例來展示該庫的功能：第一個示例完全關於藝術，第二個示例說明如何在不到50 行代碼中編寫一個簡單的益智藝術遊戲。
有很多庫可以幫助開發人員使用 SVG：Raphaël、Snap.svg 和 BonsaiJS，僅舉幾例最佳庫。這些庫各有優缺點，但對其進行徹底比較將是另一篇文章的主題。本文是關於 GraphicsJS 的，因此讓我解釋一下它有什麼優點和特殊之處。
首先，GraphicsJS 輕量級且具有非常靈活的 JavaScript API。它實現了許多豐富的文本功能，以及一個與瀏覽器特定 HTML DOM 實現分離的虛擬 DOM。
其次，它是一個新的開源 JavaScript 庫，於去年秋季由 AnyChart（全球領先的交互式數據可視化軟件開發商之一）發布。 AnyChart 至少已使用 GraphicsJS 三年（自 AnyChart 7.0 發布以來）在其專有產品中渲染圖表，因此 GraphicsJS 已完全經過實戰測試。 （免責聲明：我是 AnyChart 的研發主管和 GraphicsJS 的首席開發人員）
第三，與 AnyChart 的 JavaScript 繪圖庫不同，GraphicsJS 可免費用於商業和非營利項目。它在 GitHub 上根據 Apache 許可證提供。
第四，GraphicsJS 具有跨瀏覽器兼容性，支持 Internet Explorer 6.0 、Safari 3.0 、Firefox 3.0 和 Opera 9.5 。它在舊版 IE 版本中以 VML 渲染，在所有其他瀏覽器中以 SVG 渲染。
最後，GraphicsJS 允許您將圖形和動畫完美地結合起來。查看其主要圖庫，其中包含動畫篝火、旋轉星系、降雨、程序生成的葉子、可玩的 15 拼圖遊戲等等。 GraphicsJS 在其詳盡的文檔和全面的 API 參考中包含更多示例。
要開始使用 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>
然後，您應該創建一個舞台並在其中繪製一些內容，例如矩形、圓形或其他形狀：
// 创建舞台
var stage = acgraph.create('stage-container');
// 绘制矩形
var stage.rect(25, 50, 350, 300);以下是 CodePen 上的示例，我們在其中更進一步並繪製了死亡聖器符號。
可以使用填充設置和描邊設置對任何形狀或路徑進行著色。所有內容都有描邊（邊框），但只有形狀和閉合路徑才有填充。填充和描邊設置非常豐富，您可以將線性或圓形漸變用於填充和描邊。此外，線條可以是虛線的，並且支持具有多種平鋪模式的圖像填充。但這都是您幾乎可以在任何庫中都能找到的相當標準的內容。使 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 上的結果。
如您所見，我們現在正在使用變量——所有在舞台上繪製內容的方法都會返回對所創建對象的引用，並且此鏈接可用於更改或刪除對象。
還要注意鍊式調用（例如 stage.path().moveTo(320, 330).lineTo(320, 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 上的彩色版權房屋/graphicsjs。
在本文的下一部分，我想向您展示如何在不到 50 行代碼中使用 GraphicsJS 創建一個類似 Cookie Clicker 的遊戲。
遊戲名稱為“風中清掃街道”，玩家扮演一名清道夫的角色，在秋天的多風下午清掃街道。該遊戲使用 GraphicsJS 圖庫中程序生成的葉子示例中的一些代碼。
您可以在 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 中用於對元素進行分組的對象。如果您想對元素應用類似的更改（例如轉換），則必須對元素進行分組。您可以在暫停模式下更改圖層（稍後將詳細介紹），這可以提高性能和用戶體驗。
在此演示中，我們使用圖層功能來幫助我們將葉子組合在一起，並避免它們覆蓋標籤（它告訴我們清掃了多少葉子）。為此，我們創建一個標籤，然後調用 stage.layer 方法，該方法創建舞台綁定圖層。我們將此圖層的 zIndex 屬性設置為低於標籤的 zIndex 屬性。
// 给图片着色
// 精美的框架
frame.stroke(["red", "green", "blue"], 2, "2 2 2");
// 砖墙
walls.fill(acgraph.hatchFill('horizontalbrick'));
// 草屋顶
roof.fill("#e4d96f");
// 格子呢裙
kilt.fill(acgraph.hatchFill('plaid'));執行此操作後，無論我們在圖層中創建多少葉子，我們都可以確保它們不會覆蓋文本。
接下來，讓我們添加一個函數來繪製我們的葉子。這將使用方便的 GraphicsJS 轉換 API，該 API 允許您移動、縮放、旋轉和剪切元素和元素組。當與圖層和虛擬 DOM 結合使用時，這是一個非常強大的工具。
// 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);
您會看到每個路徑的創建方式相同，但隨後會進行轉換。這將產生非常漂亮的隨機葉子圖案。
GraphicsJS 中的任何對象、舞台和圖層都可以處理事件。支持的事件的完整列表可在 EventType API 中找到。舞台有四個特殊的事件來控制渲染。
在這個遊戲示例中，我們正在使用附加到葉子對象的事件偵聽器，以便用戶將鼠標懸停在它們上時，它們會一個接一個地消失。為此，請將以下代碼添加到 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 提供了一個虛擬 DOM，它是 HTML DOM 的抽象，輕量級且與瀏覽器特定的 SVG/VML 實現分離。它對於執行許多偉大的事情非常有用，例如跟踪所有對象和圖層，對組應用轉換以及在幫助下優化渲染允許我們跟踪和控制渲染過程的方法。
虛擬 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 上的街道清掃工/graphicsjs。
向 HTML5 的轉變改變了網絡。當涉及到現代 Web 應用程序甚至簡單的網站時，我們經常會遇到需要圖像處理的任務。雖然不可能找到在每種情況下都能很好工作的解決方案，但您應該考慮 GraphicsJS 庫。它是開源的、健壯的，具有出色的瀏覽器支持和許多使其有趣、方便且當然有用的功能。
我很樂意在下面的評論中聽到您對 GrphicsJS 的反饋。您是否已經在使用它？您是否會考慮將其用於新項目？我很想知道原因，或者為什麼不使用它。我還正在編寫主要 JavaScript 繪圖庫列表以及將比較和對比所有這些庫的文章。也可以隨意指出您希望在那裡看到的功能。
GraphicsJS 因其強大且輕量級的特性而脫穎而出。它是一個強大的庫，允許開發人員以高精度和高性能繪製和動畫化任何圖形。與其他庫不同，GraphicsJS 提供了一套全面的功能，包括圖層、漸變、圖案等等，而不會影響速度或效率。它還支持所有現代瀏覽器，使其成為開發人員的多功能選擇。
要開始使用 GraphicsJS，您需要在 HTML 文件中包含 GraphicsJS 庫。您可以從官方網站下載該庫，也可以使用 CDN。包含該庫後，您可以通過調用該庫提供的適當函數和方法來開始創建圖形。
是的，GraphicsJS 旨在輕鬆處理複雜的動畫。它提供了一套豐富的動畫功能，包括緩動函數、延遲和持續時間設置。您可以動畫化圖形的任何屬性，例如其位置、大小、顏色等等。這使得 GraphicsJS 成為創建交互式和動態圖形的強大工具。
GraphicsJS 旨在與所有現代瀏覽器兼容，包括 Chrome、Firefox、Safari 和 Internet Explorer。它使用 SVG 和 VML 進行渲染，所有這些瀏覽器都支持它們。這確保您的圖形在不同的平台和設備上看起來一致且性能良好。
使用 GraphicsJS 創建漸變很簡單。您可以使用漸變方法定義線性或徑向漸變，指定顏色和位置，然後將漸變應用於任何圖形。這使您可以輕鬆創建豐富多彩的圖形。
是的，GraphicsJS 提供了一套事件處理功能，允許您創建交互式圖形。您可以將事件偵聽器附加到任何圖形，使您可以響應用戶的操作，例如點擊、鼠標移動等等。這使得 GraphicsJS 成為創建交互式 Web 應用程序的絕佳選擇。
是的，GraphicsJS 支持圖層，允許您將圖形組織到單獨的組中。每個圖層都可以獨立操作，從而更易於管理複雜的圖形。您還可以控制每個圖層的可見性和 z 順序，從而對圖形進行細粒度控制。
GraphicsJS 提供了幾項功能，可以幫助您優化圖形。例如，您可以使用裁剪方法隱藏指定區域之外的圖形部分，從而減少所需的渲染量。您還可以使用緩存方法來存儲圖形的渲染輸出，從而提高經常重新繪製圖形的性能。
雖然 GraphicsJS 不是專門為創建圖表和圖形而設計的，但其強大的繪圖和動畫功能使其可以創建任何類型的圖形，包括圖表和圖形。您可以使用庫的方法來繪製線條、曲線、矩形、圓形等等，從而創建各種圖表類型。
是的，GraphicsJS 是一個免費的開源庫。您可以在項目中免費使用它。該庫也得到了積極維護，確保它與最新的 Web 標準和技術保持同步。
以上是介紹Graphicsjs，一個功能強大的輕量級圖形庫的詳細內容。更多資訊請關注PHP中文網其他相關文章！
