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 (文件物件模型)。接下來，我建立了矩形， 提供所需的 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"});

使用路徑繪製進階形狀

路徑是轉譯器用來建立物件的一系列指示。使用路徑繪製時，就像在巨型紙紙上畫筆一樣。您可以指示筆觸從紙上拉下，並移動到不同的位置(移動到)、畫一條線(直線)，或繪製曲線(弧形)。路徑可讓 SVG 建立任何精細程度相同的物件，無論縮放程度為何。當您發出指示來繪製曲線時，SVG 會考量曲線的原始及最終所需大小 (縮放後)，以數學方式計算中介點算繪順暢曲線。

下方的程式碼和圖片顯示矩形，以及用路徑繪製的封閉曲線。依序在字母 M、座標之後，畫筆會移動到該位置。L 後面接著座標組，會從目前的位置繪製一條線，並以指定控制點繪製一個流暢的 Bezier 曲線，並帶有相對座標。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 提供兩種繪製文字的方法。第一種方法是文字，採用 x 和 y 座標以及要繪製的字串。文字方法無法讓您進一步掌控字型或其他效果。這會使用預設大小繪製預設字型。

第二種方法則會列印並將文字繪製為路徑集合。因此，我們可以修改個別字母。在下方範例中，我們以橘色填充「ROCKS」為數字 5 上色，填滿藍綠色，同時使筆劃粗細，模擬粗體文字。具體做法是使用字型大小為 40 pt 的自訂字型。

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 Font Directory」是為應用程式準備雜亂字型的一個好來源。

活動

SVG 元素可直接訂閱所有傳統滑鼠事件：點擊、拖曳、滑鼠向下、滑鼠移動、滑鼠移出、滑鼠懸停、滑鼠向上和懸停。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，就像使用蠟筆繪製一樣。您可以清除或刪除繪圖的一部分，但無法預設還原或變更先前的筆劃。Canvas 也是光柵點陣圖，因此在圖片縮放時非常容易受到像素化的影響。另一方面，如前文所述，這可以提供多個細節等級相同的解析度，並且可以編寫指令碼。

無論是使用 SVG 或 Canvas 進行遊戲程式設計，都很簡單。除了您預計部署至電腦或行動裝置的一般限制以外，除了 Sprite 數量之外，可擴充向量圖形本身就是所謂的低風險遊戲我會說這些是只能同時移動或創作物件的遊戲。許多桌遊 (例如西洋棋、卡牌遊戲或戰鬥艦) 以及 BlackJack、Pok 和 Hearts 等紙牌遊戲都屬於這個類別。另一個統合的執行緒是，許多這類遊戲中，玩家需要移動任意物件，而 SVG 的指令碼性能使物件選為更簡單。

可擴充向量圖形編寫工具

使用 SVG 不必手動建立路徑。目前有數種工具 (包括開放原始碼和商業工具) 可讓您匯出成 SVG。我廣泛使用的兩種工具是 Inkscape 和 svg-edit。

svg-edit

svg-edit 是以 JavaScript 編寫的瀏覽器型 SVG 編輯器。它提供了有限的使用者介面，讓人聯想 GIMP 或 MS Paint。除非細節等級相對較低，否則我通常會使用 svg-edit 來調整 SVG 繪圖，而不是建立這些物件。svg-edit 可讓您透過圖形或 SVG 程式碼建立物件。

墨鏡

Inkscape 是全方位的跨平台向量圖形編輯器，與 CorelDraw、Adobe Illustrator 和 Xara 相似。活潑的外掛程式社群和成熟程式碼集，均提供 Inkscape 的優勢。《Inkscape》的前身在 1999 年成立 (Inkscape 分支)，Inkscape 是我在向量式和點陣圖素材資源中首選的應用程式。

邊玩邊角

在 IE9 之前的 Internet Explorer 版本不支援 SVG。 IE 使用 VML (向量標記語言) 的向量圖形格式，提供的功能與 SVG 大同小異。Raphaël 可以建立使用 SVG 或 VML 的場景。使用 Raphaël 可讓您輕鬆提供跨平台支援。

參考資料