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

在本文中，我想向您介紹 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'));

登入後複製