Yahoo!用戶界面博客（YUIBlog）

在YUI 3畫廊：馬特·泰勒的RaphaelJS模塊

RaphaelJS是一個功能強大的JavaScript庫，管理SVG的圖紙和動畫。 它允許您輕鬆地創建SVG的畫布，繪製基本形狀和路徑很容易，甚至他們組合成集和轉換應用到一個或多個載體。 您可以繪製形狀，處理圖像，動畫一切。 RaphaelJS提供了一個很好的API輕鬆創建和修改的SVG元素。

雖然圖書館是令人印象深刻的，但我發現，我可以添加一些重要的功能與YUI3元素的RaphaelJS庫。 我已經開始了與新的這些努力RaphaelJS庫模塊 。

延遲加載RaphaelJS和插件

的第一個特點是，不僅RaphaelJS庫的延遲加載，但任何RaphaelJS 插件 ，您可能需要。 RaphaelJS庫模塊將只加載這些文件，當你聲明你將使用他們在YUI的沙箱。 例如：

 
銳（{畫廊：畫廊2010.09.22-20-15'}）。使用（'畫廊拉斐爾，功能（Y）{
 
	 Y.Raphael（）。使用（功能（拉斐爾）{
		
		 / /使用拉斐爾在這裡，就像你會在外面銳
		紙=拉斐爾（myPaper'，500，500）;
 
	 }）;
 
 }）;

如果您使用RaphaelJS的插件，在數組中指定的路徑和發送，作為第一個參數在Y.Raphael的（）（）函數。

 
銳（{畫廊：畫廊2010.09.22-20-15'}）。使用（'畫廊拉斐爾，功能（Y）{
 
	 VAR myPlugins = ['插件/ raphael.awesomePlugin.js的'，'插件/ raphael.wickedPlugin.js'];
 
	 Y.Raphael（）。使用（myPlugins，功能（拉斐爾）{
 
		 / /使用拉斐爾在這裡，就像你會在外面銳
		紙=拉斐爾（myPaper'，500，500）;
		 / /“紙”，將有你的插件現在增加任何新功能
	 }）;
 
 }）;

首先加載RaphaelJS庫，然​​後任意指定的插件加載前拉斐爾作為唯一的參數對象執行回調函數。

自定義事件

一旦你創建一個繪圖空間與拉斐爾對象的，那麼你可以立即得到的繪圖。 當你調用方法，如rect ， circle ，和圖紙空間的path上，你會收到代表SVG的矢量對象。 通常情況下，你必須通過其相應的DOM元素node屬性的訪問。 例如：

 
紙=拉斐爾（myPaper'，500，500）;
平方米= paper.rect（0，0，100，100）;

這將創建一個矩形矢量對象在坐標[0,0]的寬度和高度為100像素。 你有機會到底層的DOM元素（這是一個SVG的rect ，像這樣的元素）：

 
 rectNode = square.node;
 rectNode.onclick =函數（）{
	警報（“恭喜你，你點擊一個正方形！”）;
 };

如果你是一個狂熱的YUI的用戶，你可能會比這更喜歡的事。 如何建立以及在Y.Node ？ 就像node屬性是指背後的SVG對象的HTML元素， $node屬性是指在Y.Node該元素的包裝。 所以，你可以做這樣的事情：

 
平方米。node.on（'懸停'，函數（）{
	警報（“恭喜你，你可以移動鼠標！'）;
 }）;

讓我們嘗試更複雜的東西。 一個載體的相互作用，應該能夠引起其他繪製向量更新自己的風格，對不對？ 有關我們如何創造一些酒吧，所有使他們的顏色取決於在鼠標位於頁面上的一個圈：

 
紙=拉斐爾（'rcanvas'，600，800）;
 
中國保監會= paper.circle（350，200，100）的attr（{填寫：“粉紅”，行程：'黑'}）;
 
 / /推入一個數組矩形一堆
 I = 0;矩形= [];
 （我<10; I + +）{
	 rectangles.push（paper.rect（0，40 *我，200，20）的attr（{填寫：“紅”，行程：'黃'}））;
 }
 
 / /遍歷矩形，為每個特定的圈子加入的MouseMove處理程序
 Y.Array.each（矩形，功能（矩形，索引）{
	 I =指數+ 1;
	中國保監會。node.on（MouseMove事件'，函數（EVT）{
		 / /填充顏色是動態的，依賴於這個矩形的位置
		 / /數組中以及鼠標的位置
		 VAR LF = circ.attrs.cx  -  circ.attrs.r
			 RT = 2 * circ.attrs.r + LF，
			 X = evt.clientX  -  LF
			 = circ.attrs.cy  -  circ.attrs.r
			 BTM = 2 * circ.attrs.r +頂部
			 Y = evt.clientY  - 頂部;
			紅色=（（（128 * X）/（2 * circ.attrs.r））-1）* I / 6，
			綠色= 256  - （（（（128 * X）/（2 * circ.attrs.r））-1）* I / 6），
			藍色=（（（128 * Y）/（2 * circ.attrs.r））-1）* I / 6;
		 rect.attr（“填寫”，“RGB（”+紅+'，'+綠色+“，”+藍色+'）'）;
	 }）;
 }）;

這個例子是運行在這裡 ，但你可以看到在下面的快照，每個欄的顏色是依賴鼠標位置以及在圈欄的順序。

根據您的鼠標光標位於在圓上，酒吧顏色單獨改變。

所以你可以看到$node是一個有用的快捷鍵，但沒有壯觀。 這真的是美妙的，如果你創建與RaphaelJS的每一個SVG的對象可以觸發自定義事件 。 這將使您的個人繪圖元素觸發自定義事件，並在頁面上什麼都可以聽和回應。 在許多方面，這可能是有用的。 對於初學者來說，它提供了豐富您的圖紙之間的相互作用。 一個向量的用戶交互，現在可以通知任何其他媒介的互動需求。 這意味著你可以編程火某些條件得到滿足時，從您的圖紙事件。 這不僅讓你的圖紙，以通知其他載體，但頁面上的任何東西都可以聽英寸

 
紙=拉斐爾（'rcanvas'，600，800）;
 
中國保監會= paper.circle（350，200，100）的attr（{填寫：“粉紅”，行程：'黑'}）;
 
 / /矩形和圓形陣列
 VAR I = 0，矩形= []，圓= [];
 （我<10; I + +）{
	 rectangles.push（paper.rect（0，40 *，40 *，20）的attr（{填充：'紅'，中風：'黃'}））;
	 circles.push（paper.circle（0,0,20），隱藏（））;
 }
 Y.Array.each（矩形，功能（矩形，索引）{
	 I =指數+ 1;
	中國保監會。node.on（MouseMove事件'，函數（EVT）{
		 VAR LF = circ.attrs.cx  -  circ.attrs.r
			 RT = 2 * circ.attrs.r + LF，
			 X = evt.clientX  -  LF
			 = circ.attrs.cy  -  circ.attrs.r
			 BTM = 2 * circ.attrs.r +頂部
			 Y = evt.clientY  - 頂部;
			 newWidth =（（（256）/（2 * circ.attrs.r））-1）* I / 6，
			紅色=（（（128 * X）/（2 * circ.attrs.r））-1）* I / 6，
			綠色= 256  - （（（（128 * X）/（2 * circ.attrs.r））-1）* I / 6），
			藍色=（（（128 * Y）/（2 * circ.attrs.r））-1）* I / 6;
		 / /這個時間，不僅改變顏色，但也矩形的寬度
		 rect.attr（{
			寬度：newWidth，
			填寫：“RGB（”+紅+'，'+綠色+“，”+藍色+'）'
		 }）;
		 / /觸發自定義事件通知，這個矩形的寬度改變
		 rect.fire（寬度改變'，{寬度：newWidth，來源：矩形，順序為：指數}）;
	 }）;
	
	 / /每個矩形得到一個監聽器寬度改變觸發
	 rect.on（寬度改變，功能（EVT）{
		 VAR ATTRS = evt.source.attrs;
		 / /獲得相應的圓圈，將它移動到矩形的右端
		界[evt.order]。ATTR（{
			 CX：attrs.x + attrs.width，
			 CY：attrs.y，
			填寫：“矢菊花”
		 。}）秀（）;
		
	 }）;
	
 }）;

以在這裡看看這個運行的例子。 你還可以看到從快照低於各界正在繪製矩形的右端。 這的現象發生反應，被捕獲的圓圈移動到當前矩形的屬性的相對位置的一個處理程序，每一個人的矩形的自定義事件觸發。

這開闢了一些有趣的possiblities YUI3 RaphaelJS內。 例如，如果我們可以創建一組矢量形狀，同組的觸發事件向外部世界的實體本身？ 內部，每一個矢量繪圖可以溝通通過自定義事件與它的容器，容器將作出決定哪些數據觸發到外面的世界。 這開闢了完全封裝的，互動的SVG控制的想法。

總結

與HTML5和其衛星技術的優勢地位，有這麼多的更多的選擇，豐富的互動閃光以外。 理想的情況下，頁面上的任何向量元素應該完全訪問和標準化。 這開闢了為我們的精彩possiblities而不訴諸到Flash中創建的訪問，標準的網絡控制。 SVG是一種吸引人的選擇，因為矢量繪製在頁面上的每一個DOM節點的支持，我們可以與YUI的修改，就像任何其他的DOM節點。 這是什麼允許的RaphaelJS庫模塊 ，以增加被由RaphaelJS創建所有的SVG對象，這是一個豐富的互動與頁面上的這些別處elments的關鍵。

找到的談話： bloglines technorati

共享和擴展： 書籤del.icio.us Digg它！ | reddit！