raphael.js向量繪圖
阿新 • • 發佈：2019-01-07
官方介紹： Raphael是由Dmitry Baranovskiy開發的小型Javascript類庫，它可以讓你在web上很容易地使用向量圖形。如果你需要製作自定義圖表或影象裁剪旋轉控制元件，它也可以讓你更方便、簡單地進行實現。Raphael使用W3C推薦的SVG以及VML兩種向量標記語言來實現繪圖，這意味著，你建立的圖形物件都是DOM元素，你可以給它們繫結、移除javascript事件。Raphael的目標是提供一個適配工具，實現簡單、跨瀏覽器相容的圖形繪製。Raphael相容Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 9.5+ and Internet Explorer 6.0+. 在WEB端，可供選擇的圖形繪製技術並不多。Flash曾是這一領域的老大，但現在已經開始沒落，不建議採用。Canvas隨著HTML5的大熱而崛起，但是由於大家都瞭解的種種原因，比如相容性的問題，目前Canvas對大部分專案來說還不太適用。實際上，SVG在相容性上的表現並不比Canvas強多少，所以像D3.js這種強大的SVG繪製類庫，在國內也沒有太多專案會使用。相比之下，RaphaelJs更符合我們的需求，雖然它預設也是繪製SVG，但如果遇到不支援SVG的瀏覽器，比如低版本IE，它會改用VML來繪製圖形，而IE5.5以上版本都支援VML，所以RaphaelJs的相容性非常好。（提高相容性也是有代價的，在一些落後的瀏覽器上，效能會是一個非常嚴重的問題。） 首先簡單介紹一下SVG和VML，二者都是標記語言，而且可以直接嵌入HTML，例如： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title> example </title> </head> <body> <svg version="1.1" xmlns="http://www.w3.org/2000/svg"]]> <rect width="100%" height="100%" fill="red" /> <circle cx="150" cy="100" r="80" fill="green" /> <text x="150" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text> </svg> </body> </html> 繪製SVG，先要插入一個svg標籤，然後在svg標籤內部插入更多標籤，用來表示各種圖形。 這裡的rect標籤表示矩形，circle標籤表示圓形，text標籤表示文字（向量文字）。 和HTML標籤一樣，SVG的標籤實際上也可以視為DOM節點，並用JavaScript獲取或改變它們。 比如給上面的程式碼增加一段指令碼： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title> example </title> </head> <body> <svg version="1.1" xmlns="http://www.w3.org/2000/svg"> <rect width="100%" height="100%" fill="red" /> <circle cx="150" cy="100" r="80" fill="green" /> <text x="150" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text> </svg> <script type="text/javascript"> /* 獲取svg節點 建立一個rect節點 將新的rect節點插入到svg裡面 */ var svg1 = document.getElementsByTagName('svg')[0], newRect = document.createElement('rect'); svg1.appendChild(newRect); </script> </body> </html> VML的情況和SVG類似，這裡不再重複。原生的JavaScript當然也能繪製SVG和VML，但是寫起來比較麻煩，而RaphaelJs提供了很好的封裝，讓我們寫起來更方便。所以RaphaelJs有點像jQuery，jQuery封裝了很多HTML的dom操作，而RaphaelJS封裝的則是SVG和VML的DOM操作。 載入 RaphaelJs的官網提供了庫檔案的下載，89Kb的是壓縮版，原始碼檔案是221Kb。 和載入其他類庫一樣，RaphaelJs的載入很簡單： <script type="text/javascript" src="raphael-min.js"></script> 如果你使用sea.js，可以用spm直接下載已經模組化的RaphaelJs檔案： spm install[email protected] 建立畫布 在jQuery裡，jQuery()方法是一個非常強大的基本方法，它可以用來選擇各種元素，也可以用來設定domReady的回撥函式。 RaphaelJs也有一個類似的函式：Raphael()，這個函式也可以設定domReady的回撥函式，但是，它的主要作用還是建立畫布： //在div1裡建立一個寬300px、高200px的畫布。 //div1是dom節點的ID var paper = Raphael(‘div1’, 300, 200); //如果在一個沒有ID的元素裡建立畫布 //可以先獲取該元素，然後作為引數傳給Raphael() //eg: var div1 = document.getElementsByTagName('div')[0], paper = Raphael(div1, 300, 200); Raphael()方法的返回值是一個畫布物件，通過該物件可以呼叫各種繪圖方法。 上面我們已經建立了畫布，並且將變數paper指向了畫布物件，接下來，我們就可以呼叫畫布物件的各種方法進行繪圖了。 在RaphaelJs裡，用來繪製形狀的方法不算多，比較容易掌握。 矩形 引數：x軸座標，y軸座標，寬度，高度 paper.rect(x, y, width, height); 圓形 引數：圓心的x軸座標，y軸座標，圓半徑 paper.circle(x, y, r); 橢圓 引數：圓心的x軸座標，y軸座標，x軸半徑，y軸半徑 paper.ellipse(x, y, xr, yr); 路徑 paper.path('M10,10 L20,20'); 圖片 image方法可以引入圖片檔案，和HTML裡的img標籤作用相似。 paper.image(src, x, y, width, height); 文字 RaphaelJs有兩個方法用來繪製文字 1、paper.text(50, 50, "Raphaël\nkicks\nbutt!"); text方法用來繪製一般文字，和HTML裡的文字一樣，它只能使用瀏覽器支援的字型。 在字串引數中加入\n可以輸入多行文字 2、paper.print(10, 50, "print", paper.getFont("Museo"), 30); print方法可以渲染任意字型的文字，它的第四個引數是字型，這裡需要使用paper.getFont()方法，該方法接受一個字串引數，表示需要獲取的字型名稱。只要該字型已在系統中註冊，就可以獲取，並使用它渲染文字。 圖形物件 繪製形狀的方法會返回形狀物件，該物件可以使用show()、hide()等方法。 attr()是形狀物件的一個常用方法，它可以改變形狀物件的屬性，例如： //繪製一個矩形，左上角位於(10,10)，寬800，高600，黑色填充 //這裡可以使用鏈式操作 paper.rect(10, 10, 800, 600).attr('fill', '#000'); //或者用一個變數快取形狀物件，便於後續操作 var rect1 = paper.rect(10, 10, 800, 600); rect1.attr('fill', '#000'); setTimeout(function(){ rect1.attr('fill', 'red'); },1000);
路徑是向量繪圖裡最強大的工具，同時也比較複雜。
路徑的引數是一組字串，由“命令字母+座標數字”的組合構成。
具體設定方法可以參看另外幾篇介紹：
RaphaelJs的相關資源：