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

參考資料