Raphaël.js 簡介

James Williams
James Williams
X 首頁

簡介

SVG 是可縮放向量圖形的縮寫，是一種用來描述物件和場景的 XML 語言。SVG 元素可觸發事件，並可使用 JavaScript 編寫指令碼。SVG 內建多種原始類型，例如圓形和矩形，也能顯示文字。雖然 SVG 技術並非新技術，但 HTML5 現已可讓 SVG 物件直接嵌入網頁，而無須使用 <object> 或 <embed> 標記，以便與目前可用於畫布的內容保持一致。Raphaël.js 是 JavaScript 程式庫，可讓您以程式輔助方式建立 SVG 場景。它會使用統一 API 在支援 SVG 的環境中建立 SVG 場景，或在支援 VML(向量建模語言) 的環境中建立場景，也就是 IE9 之前的 Internet Explorer 版本。

繪製第一個場景

我們先使用 Raphaël 繪製簡單的場景。我們會透過例項化 Raphaël 物件，開始繪製場景。在本例中，我使用了建構函式，將其插入具有特定寬度和高度的特定 HTML 元素中，但您也可以讓 Raphaël 將物件附加至 DOM (Document Object Model)。接下來，我會提供所需的 x 和 y 位置，並設定寬度和高度，藉此建立矩形。接著，我會指定所需的座標和半徑來建立圓形。最後，我使用屬性函式 (attr) 為物件指派顏色。

每個 SVG 物件都可以指派屬性，例如顏色、旋轉、描邊顏色和大小等。您可以在這裡找到可指派屬性的詳細清單。

var paper = Raphael("sample-1", 200, 75);
var rect = paper.rect(10, 10, 50, 50);
var circle = paper.circle(110, 35, 25);

rect.attr({fill: "green"});
circle.attr({fill: "blue"});

使用路徑繪製進階形狀

路徑是一連串算繪器用來建立物件的指令。使用路徑繪圖就像在巨大的方格紙上用筆繪圖。您可以指示筆從紙上抬起，然後移動到其他位置(move to) 以繪製線條(line to) 或曲線(arc to)。路徑可讓 SVG 在任何比例下，都以相同的細節等級建立物件。當您發出指示 (例如繪製曲線) 時，SVG 會考量曲線的原始和最終所需大小 (經過調整大小後)，並以數學方式計算中間點，以呈現平滑的曲線。

下方的程式碼和圖片顯示了矩形和使用路徑繪製的封閉曲線。字母 M 後面接著座標，會將筆移動到該位置；字母 L 後面接著座標組合，會從目前位置繪製一條線到該位置。s 會使用指定的控制點和端點，以及相對座標繪製平滑的貝茲曲線。Z 會關閉路徑。一般來說，使用大寫英文字母會發出含有絕對座標的指令，小寫英文字母則會使用相對座標。M/m 和 Z/z 分別會針對大寫或小寫字母發出相同指令。如要查看所有路徑指示，請按這裡。

var paper = Raphael("sample-2", 200, 100);
var rectPath = paper.path("M10,10L10,90L90,90L90,10Z");
var curvePath = paper.path("M110,10s55,25 40,80Z");

rectPath.attr({fill:"green"});
curvePath.attr({fill:"blue"});

繪製文字

如果插圖無法繪製文字，就會非常無聊，所幸 Raphaël 提供兩種繪製文字的方法。第一個方法 text 會使用 x 和 y 座標，以及要繪製的字串。文字方法無法讓您充分控制字型或其他特效。它會以預設大小繪製預設字型。

第二種方法是使用 print 方法，將文字繪製為路徑集合。因此，我們可以修改個別字母。在下方範例中，我們使用橘色填滿數字 5，並以藍色填滿「ROCKS」，然後將筆觸加粗，模擬粗體文字。我們使用的是 40 點的自訂字型。

var paper = Raphael("sample-4", 600, 100);
var t = paper.text(50, 10, "HTML5ROCKS");

var letters = paper.print(50, 50, "HTML5ROCKS", paper.getFont("Vegur"), 40);

letters[4].attr({fill:"orange"});
for (var i = 5; i < letters.length; i++) {
letters[i].attr({fill: "#3D5C9D", "stroke-width": "2", stroke: "#3D5C9D"});
}

Vegur 字型不在 Raphaël 中，任何字型都無法使用。此外，大多數字型都使用 TrueType(TTF) 或 OpenType(OTF) 格式。如要將這些格式轉換成 Raphaël 可用的格式，我們需要使用名為 Cufon 的工具進行轉換。Cufon 可讓您匯出特定字型的不同字型樣式 (一般、粗體、斜體、粗斜體等)，以便與 Raphaël 搭配使用。本教學課程不包含 Cufon 的詳細說明。詳情請參閱上述連結。Google 字型目錄是為應用程式取得無負擔字型的絕佳來源。

活動

SVG 元素可直接訂閱所有傳統的滑鼠事件：click、dblclick、mousedown、mousemove、mouseout、mouseover、mouseup 和 hover。Raphaël 可讓您在畫布或個別元素中新增自訂方法，因此理論上您可以為行動瀏覽器新增手勢。

下列程式碼片段會繫結函式，讓使用者點選「ROCKS」時，系統會將指定字母旋轉 45 度。

for (var i = 5; i < letters.length; i++) {
letters[i].attr({fill: "#3D5C9D", "stroke-width": "2", stroke: "#3D5C9D"});

letters[i].click(function(evt) {
this.rotate(45);
});
}

SVG 與 Canvas

由於這兩種方法都是在螢幕上繪製物件，因此您可能不清楚為何要使用其中一種方法。這兩種媒體的做法大不相同。Canvas 是即時模式 API，就像用蠟筆繪圖一樣。您可以清除或銷毀部分繪圖，但預設無法還原或變更先前的筆劃。畫布也是光柵點陣圖，因此在縮放圖片時，會非常容易產生像素化現象。另一方面，如先前所述，SVG 可提供多種解析度，且每個解析度的細節程度相同，且可編寫指令碼。

無論您是使用 SVG 還是 Canvas 進行遊戲程式設計，都相當簡單。除了是否要部署到電腦或行動裝置的一般限制之外，實際上取決於精靈數量。SVG 適合用於我稱為低保真度遊戲的遊戲。我將這類遊戲定義為同時移動物件、移除和建立圖像的次數有限的遊戲。許多桌遊 (例如西洋棋、跳棋或大富翁) 以及撲克牌遊戲 (例如二十一點、撲克和紅心) 都屬於這個類別。另一個統一的主題是，在許多這類遊戲中，玩家都需要移動任意物件，而 SVG 的程式碼功能可讓物件挑選作業變得簡單。

可擴充向量圖形的編寫工具

使用 SVG 並不代表您必須手動建立路徑。有許多開放原始碼和商用工具可讓您匯出 SVG。我經常使用的兩個工具是 Inkscape 和 svg-edit，強烈推薦這兩個工具。

svg-edit

svg-edit 是使用 JavaScript 編寫的瀏覽器 SVG 編輯器。它提供的使用者介面功能有限，讓人聯想到 GIMP 或 MS Paint。除非細節程度較低，否則我大多使用 svg-edit 調整 SVG 繪圖，而不是建立繪圖。svg-edit 可讓您以圖形或 SVG 程式碼建立物件。

Inkscape

Inkscape 是一款跨平台的完整向量圖形編輯器，類似 CorelDraw、Adobe Illustrator 和 Xara。Inkscape 受惠於活躍的外掛程式社群和成熟的程式碼庫。Inkscape 的前身是在 1999 年開發，也是 Inkscape 分支的來源。我會使用 Inkscape 處理向量和點陣圖資產。

小插曲

在 Windows 上，Internet Explorer 9 以下版本不支援 SVG。IE 使用向量圖形格式 VML (向量標記語言)，提供與 SVG 相同的功能。Raphaël 可在支援 SVG 或 VML 的情況下，建立使用 SVG 或 VML 的場景。使用 Raphaël 是提供跨平台支援的簡單方法。

參考資料