介紹Graphicsjs，一個功能強大的輕量級圖形庫-js教程-PHP中文網

首頁

web前端

js教程

介紹Graphicsjs，一個功能強大的輕量級圖形庫

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

Feb 17, 2025 am 10:42 AM

HTML5：現代網絡的基石。如今，在創建交互式圖像時，SVG 和 Canvas 通常是首選技術——Flash 已被遺忘，Silverlight 則成為網絡邊緣罕見的獨角獸，很少有人記得第三方插件。

每種技術的優缺點都有詳細記錄，但簡而言之，SVG 更適合創建和處理交互式元素。這是因為 SVG 是一種基於 XML 的矢量格式，當使用 <svg></svg> 標籤將圖像加載到頁面中時，其中的每個元素都可以在 SVG DOM 中使用。

在本文中，我想向您介紹 GraphicsJS，這是一個基於 SVG 的全新強大的開源 JavaScript 繪圖庫（對於舊版 IE 版本，它具有 VML 備用方案）。我將首先快速介紹其基礎知識，然後藉助兩個簡短而精彩的示例來展示該庫的功能：第一個示例完全關於藝術，第二個示例說明如何在不到50 行代碼中編寫一個簡單的益智藝術遊戲。

關鍵要點

GraphicsJS 是一個新的、強大的、開源的 JavaScript 繪圖庫，基於 SVG，並為舊版 IE 版本提供 VML 備用方案。它輕量級且靈活，具有豐富的 JavaScript API。
該庫由 AnyChart 發布，至少已在 AnyChart 的專有產品中使用三年來渲染圖表，確保其穩健性。與 AnyChart 的 JavaScript 繪圖庫不同，GraphicsJS 可免費用於商業和非營利項目。
GraphicsJS 具有跨瀏覽器兼容性，支持 Internet Explorer 6.0 、Safari 3.0 、Firefox 3.0 和 Opera 9.5 。它在舊版 IE 版本中以 VML 渲染，在所有其他瀏覽器中以 SVG 渲染。
該庫允許將圖形和動畫結合起來，示例包括動畫篝火、旋轉星系、降雨以及可玩的 15 拼圖遊戲。它還包含詳盡的文檔和全面的 API 參考。
GraphicsJS 庫可用於創建交互式 Web 應用程序，其功能包括圖層、漸變、圖案、事件處理和性能優化。它還支持複雜的動畫和轉換，使其成為開發人員的多功能選擇。

為什麼選擇 GraphicsJS

有很多庫可以幫助開發人員使用 SVG：Raphaël、Snap.svg 和 BonsaiJS，僅舉幾例最佳庫。這些庫各有優缺點，但對其進行徹底比較將是另一篇文章的主題。本文是關於 GraphicsJS 的，因此讓我解釋一下它有什麼優點和特殊之處。

Introducing GraphicsJS, a Powerful Lightweight Graphics Library

首先，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 基礎知識

要開始使用 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 行代碼中創建一個益智藝術遊戲

在本文的下一部分，我想向您展示如何在不到 50 行代碼中使用 GraphicsJS 創建一個類似 Cookie Clicker 的遊戲。

遊戲名稱為“風中清掃街道”，玩家扮演一名清道夫的角色，在秋天的多風下午清掃街道。該遊戲使用 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);

對於這個遊戲，我們將使用圖層——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 繪圖庫列表以及將比較和對比所有這些庫的文章。也可以隨意指出您希望在那裡看到的功能。

進一步閱讀的鏈接

常規信息
- SVG
- Canvas
- SVG 與 Canvas
庫
- GraphicsJS
- Raphaël
- Snap.svg
- BonsaiJS
GraphicsJS
- GitHub 上的 GraphicsJS
- GraphicsJS 文檔
- GraphicsJS API 參考

關於 GraphicsJS 的常見問題

GraphicsJS 與其他 JavaScript 圖形庫有何不同？

GraphicsJS 因其強大且輕量級的特性而脫穎而出。它是一個強大的庫，允許開發人員以高精度和高性能繪製和動畫化任何圖形。與其他庫不同，GraphicsJS 提供了一套全面的功能，包括圖層、漸變、圖案等等，而不會影響速度或效率。它還支持所有現代瀏覽器，使其成為開發人員的多功能選擇。

如何開始使用 GraphicsJS？

要開始使用 GraphicsJS，您需要在 HTML 文件中包含 GraphicsJS 庫。您可以從官方網站下載該庫，也可以使用 CDN。包含該庫後，您可以通過調用該庫提供的適當函數和方法來開始創建圖形。

我可以使用 GraphicsJS 創建複雜的動畫嗎？

是的，GraphicsJS 旨在輕鬆處理複雜的動畫。它提供了一套豐富的動畫功能，包括緩動函數、延遲和持續時間設置。您可以動畫化圖形的任何屬性，例如其位置、大小、顏色等等。這使得 GraphicsJS 成為創建交互式和動態圖形的強大工具。

GraphicsJS 是否與所有瀏覽器兼容？

GraphicsJS 旨在與所有現代瀏覽器兼容，包括 Chrome、Firefox、Safari 和 Internet Explorer。它使用 SVG 和 VML 進行渲染，所有這些瀏覽器都支持它們。這確保您的圖形在不同的平台和設備上看起來一致且性能良好。

如何使用 GraphicsJS 創建漸變？

使用 GraphicsJS 創建漸變很簡單。您可以使用漸變方法定義線性或徑向漸變，指定顏色和位置，然後將漸變應用於任何圖形。這使您可以輕鬆創建豐富多彩的圖形。

我可以使用 GraphicsJS 創建交互式圖形嗎？

是的，GraphicsJS 提供了一套事件處理功能，允許您創建交互式圖形。您可以將事件偵聽器附加到任何圖形，使您可以響應用戶的操作，例如點擊、鼠標移動等等。這使得 GraphicsJS 成為創建交互式 Web 應用程序的絕佳選擇。

GraphicsJS 是否支持圖層？

是的，GraphicsJS 支持圖層，允許您將圖形組織到單獨的組中。每個圖層都可以獨立操作，從而更易於管理複雜的圖形。您還可以控制每個圖層的可見性和 z 順序，從而對圖形進行細粒度控制。

如何使用 GraphicsJS 優化我的圖形？

GraphicsJS 提供了幾項功能，可以幫助您優化圖形。例如，您可以使用裁剪方法隱藏指定區域之外的圖形部分，從而減少所需的渲染量。您還可以使用緩存方法來存儲圖形的渲染輸出，從而提高經常重新繪製圖形的性能。

我可以使用 GraphicsJS 創建圖表和圖形嗎？

雖然 GraphicsJS 不是專門為創建圖表和圖形而設計的，但其強大的繪圖和動畫功能使其可以創建任何類型的圖形，包括圖表和圖形。您可以使用庫的方法來繪製線條、曲線、矩形、圓形等等，從而創建各種圖表類型。

GraphicsJS 是否免費使用？

是的，GraphicsJS 是一個免費的開源庫。您可以在項目中免費使用它。該庫也得到了積極維護，確保它與最新的 Web 標準和技術保持同步。

以上是介紹Graphicsjs，一個功能強大的輕量級圖形庫的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

在JavaScript中替換字符串字符Mar 11, 2025 am 12:07 AM

JavaScript字符串替換方法詳解及常見問題解答本文將探討兩種在JavaScript中替換字符串字符的方法：在JavaScript代碼內部替換和在網頁HTML內部替換。在JavaScript代碼內部替換字符串最直接的方法是使用replace()方法： str = str.replace("find","replace"); 該方法僅替換第一個匹配項。要替換所有匹配項，需使用正則表達式並添加全局標誌g： str = str.replace(/fi

構建您自己的Ajax Web應用程序Mar 09, 2025 am 12:11 AM

因此，在這裡，您準備好了解所有稱為Ajax的東西。但是，到底是什麼？ AJAX一詞是指用於創建動態，交互式Web內容的一系列寬鬆的技術。 Ajax一詞，最初由Jesse J創造

如何創建和發布自己的JavaScript庫？Mar 18, 2025 pm 03:12 PM

文章討論了創建，發布和維護JavaScript庫，專注於計劃，開發，測試，文檔和促銷策略。

如何在瀏覽器中優化JavaScript代碼以進行性能？Mar 18, 2025 pm 03:14 PM

本文討論了在瀏覽器中優化JavaScript性能的策略，重點是減少執行時間並最大程度地減少對頁面負載速度的影響。

如何使用瀏覽器開發人員工具有效調試JavaScript代碼？Mar 18, 2025 pm 03:16 PM

本文討論了使用瀏覽器開發人員工具的有效JavaScript調試，專注於設置斷點，使用控制台和分析性能。

如何構建簡單的jQuery滑塊Mar 11, 2025 am 12:19 AM

本文將引導您使用jQuery庫創建一個簡單的圖片輪播。我們將使用bxSlider庫，它基於jQuery構建，並提供許多配置選項來設置輪播。如今，圖片輪播已成為網站必備功能——一圖胜千言！決定使用圖片輪播後，下一個問題是如何創建它。首先，您需要收集高質量、高分辨率的圖片。接下來，您需要使用HTML和一些JavaScript代碼來創建圖片輪播。網絡上有很多庫可以幫助您以不同的方式創建輪播。我們將使用開源的bxSlider庫。 bxSlider庫支持響應式設計，因此使用此庫構建的輪播可以適應任何

jQuery矩陣效果Mar 10, 2025 am 12:52 AM

將矩陣電影特效帶入你的網頁！這是一個基於著名電影《黑客帝國》的酷炫jQuery插件。該插件模擬了電影中經典的綠色字符特效，只需選擇一張圖片，插件就會將其轉換為充滿數字字符的矩陣風格畫面。快來試試吧，非常有趣！工作原理插件將圖片加載到畫布上，讀取像素和顏色值： data = ctx.getImageData(x, y, settings.grainSize, settings.grainSize).data 插件巧妙地讀取圖片的矩形區域，並利用jQuery計算每個區域的平均顏色。然後，使用