009_Raphael绘制图形
1. Raphael是一個用于在網頁中繪制矢量圖形的Javascript庫。它使用SVG W3C推薦標準和VML作為創建圖形的基礎, 你可以通過JavaScript操作DOM來輕松創建出各種復雜的柱狀圖、餅圖、曲線圖等各種圖表, 還可以繪制任意形狀的圖形, 可以進行圖表或圖像的裁剪和旋轉等復雜操作。
2. 創建畫布
2.1. 使用Raphael對象創建畫布。因為這個是在瀏覽器視口里面來創建的, 所以畫布的位置是絕對定位。
2.2. 以下創建Raphael對象的4個參數分別是x坐標、y坐標、寬度、高度。
var paper = new Raphael(x, y, width, height);2.3. 以下創建Raphael對象的3個參數分別是html元素的id、寬度、高度。
var paper = new Raphael(element, width, height);3. 圓
3.1. 我們可以使用circle()方法來創建一個圓形。這個方法一共有3個必須參數。3個參數按順序分別是x坐標、y坐標和r半徑。
paper.circle(x, y, r)// 圓心位置: x = 100, y = 50; 半徑: r = 40 var circle = paper.circle(60, 50, 40);4. 矩形
4.1. 我們可以使用rect()方法來創建一個矩形。這個方法一共有4個必須參數和一個可選參數。5個參數按順序分別是x坐標、y坐標、矩形寬度、矩形高度、圓角半徑。圓角半徑默認為0, 為可選參數。
paper.rect(x, y, w, h, [r])// 矩形起始位置: x = 200, y = 10, w = 100, h = 80 var rect = paper.rect(120, 10, 100, 80); // 矩形圓角半徑為10 var rect2 = paper.rect(240, 10, 100, 80, 10);5. 橢圓
5.1. ellipse()方法來創建一個矩形。這個方法一共有4個必須參數。4個參數按順序分別是x坐標、y坐標、rx水平半徑、垂直半徑ry。水平半徑和垂直半徑其實就是橢圓的寬和高除以2。
paper.ellipse(x, y, xr, yr)// 圓心位置: x = 400, y = 50; 半徑: xr = 60, yr = 40 var ellipse = paper.ellipse(420, 50, 60, 40);6. attr()方法
6.1. attr()方法是Raphael方法中最常用的方法之一, 它通過Raphael元素屬性鍵值對作為參數來對元素進行添加或者修改屬性。添加和修改可以使元素的樣式, 也可以是其它物理屬性, 比如: 坐標、寬高等等。
6.2. 語法如下:
element.attr({property1: value,property2: value });6.3. Raphael元素.attr({元素鍵值對}), 元素鍵值對就是json格式的數據。我們可以操作的元素屬性如下所示:
7. 復雜圖形
7.1. 復雜圖形的創建將使用path(pathString)方法。它只有一個參數, 我們稱它為pathString。看上去就是一串字母和數字的組合。其實它非常易于閱讀和理解。
7.2. pathString SVG格式的路徑字符串。路徑字符串由一個或多個命令組成。每個命令以一個字母開始, 隨后是逗號(",")分隔的參數。例如: "M10,20L30,40"。我們看到兩個命令: "M"與參數(10, 20)和"L"與參數(30, 40)大寫字母的意思是命令是絕對的, 小寫是相對的。
7.3. 命令的簡表
7.4. 在這里你可能會感覺很頭大, 因為這么多命令, 還有幾個挺難理解的曲線。再加上復雜圖形怎么可能直接就寫一串字符出來。其實不必擔心, 因為復雜圖形你可以使用工具來進行繪制。在矢量圖制作工具中制作完成然后導出svg格式就行了。推薦使用一個叫做inkscape的矢量圖制作工具。
7.5. 橢圓弧參數含義
- rx: 橫軸的長度;
- ry: 縱軸的長度;
- x-axis-rotation: 橢圓的橫軸與x軸的角度;
- large-arc-flag: 區分弧度的大小(0表示小角度弧度, 1表示大角度弧度);
- sweep-flag: 繪制弧度圍繞橢圓中心的方向(0表示逆時針方向, 1表示順時針方向);
- x y: 橢圓曲線終點坐標;
8. 顯示文字
8.1. text(x, y, "文字內容")是用來顯示文字內容的方法。語法其實很簡單, 就是x,y坐標和文字內容。
9. 繪制圖片
9.1. image(src, x, y, width, height)方法可以繪制圖片。
10. 例子
10.1. 代碼
<!DOCTYPE html> <html><head><title>Raphael繪制圖形</title><script type="text/javascript" src="raphael.js"></script><style type="text/css">#sample-1, #sample-2, #sample-3, #sample-4, #sample-5, #sample-6, #sample-7 {width: 600px;border: 1px solid #aaa;}</style></head><body><h1>繪制基本圖形, 圓、橢圓和矩形。</h1><div id="sample-1"></div><script type="text/javascript">var paper1 = Raphael("sample-1", 600, 100);// 圓心位置: x = 100, y = 50; 半徑: r = 40paper1.circle(60, 50, 40);// 矩形起始位置: x = 200, y = 10, w = 100, h = 80paper1.rect(120, 10, 100, 80);// 矩形圓角半徑為10paper1.rect(240, 10, 100, 80, 10);// 圓心位置: x = 400, y = 50; 半徑: xr = 60, yr = 40paper1.ellipse(420, 50, 60, 40);</script><h1>復雜圖形-俄羅斯方塊</h1><div id="sample-2"></div><script type="text/javascript">var paper2 = Raphael("sample-2", 600, 200);paper2.path("M 200,150 l 0,-50 l -50,0 l 0,-50 l -50,0 l 0,50 l -50,0 l 0,50 Z");var tetronimo = paper2.path("M 500,150 l 0,-50 l -50,0 l 0,-50 l -50,0 l 0,50 l -50,0 l 0,50 Z");tetronimo.attr({'fill': '0-#FF0000-#0000FF','stroke': '#3b4449','stroke-width': 10,'stroke-linejoin': 'round'});</script><h1>復雜圖形-水平、垂直直線</h1><div id="sample-3"></div><script type="text/javascript">var paper3 = Raphael("sample-3", 600, 100);paper3.path("M 50,10 h 50 v 20 h -20 v 50 h -10 v -50 h -20 Z").attr({'fill': '90-#FF0000-#0000FF'});paper3.path("M 150,10 H 200 V 30 H 180 V 80 H 170 V 30 H 150 Z").attr({'fill': '180-#FF0000-#0000FF'});paper3.path("M 250,10 h 50 V 30 h -20 V 80 h -10 V 30 h -20 Z").attr({'fill': '270-#FF0000-#0000FF'});</script><h1>復雜圖形-曲線,平滑曲線</h1><div id="sample-4"></div><script type="text/javascript">var paper4 = Raphael("sample-4", 600, 120);paper4.path('M 20,20 C 50,80 150,160 180,40');paper4.path('M 220,20 S 350,160 380,40');</script><h1>復雜圖形-二次貝賽爾曲線, 平滑二次貝塞爾曲線</h1><div id="sample-5"></div><script type="text/javascript">var paper5 = Raphael("sample-5", 600, 200);paper5.path("M 40,20 Q 100,20 100,80");paper5.path('M 210,190 Q 290,70 360,100 T 450,10');</script><h1>復雜圖形-橢圓弧</h1><div id="sample-6"></div><script type="text/javascript">var paper6 = Raphael("sample-6", 600, 350);// 繪制左上的橢圓 paper6.ellipse(130, 40, 60, 30); paper6.ellipse(70, 70, 60, 30); paper6.path('M 70,40 A 60,30 0 0,0 130,70').attr('stroke','yellow'); paper6.text(40, 30, 'start(70,40)').attr({'font-size': 11, 'fill': 'blue' }); paper6.text(160, 80, 'end(130,70)').attr({'font-size': 11, 'fill': 'blue' }); paper6.text(70, 120, 'large-arc-flag=0\nsweep-flag=0').attr({'font-size': 11, 'fill': 'green', 'text-anchor': 'middle' }); // 繪制右上的橢圓 paper6.ellipse(330, 40, 60, 30); paper6.ellipse(270, 70, 60, 30); paper6.path('M 270,40 A 60,30 0 0,1 330,70').attr('stroke','yellow'); paper6.text(240, 30, 'start(270,40)').attr({'font-size': 11, 'fill': 'blue' }); paper6.text(360, 80, 'end(330,70)').attr({'font-size': 11, 'fill': 'blue' }); paper6.text(270, 120, 'large-arc-flag=0\nsweep-flag=1').attr({'font-size': 11, 'fill': 'green', 'text-anchor': 'start' }); // 繪制左下的橢圓 paper6.ellipse(130, 240, 60, 30); paper6.ellipse(70, 270, 60, 30); paper6.path('M 70,240 A 60,30 0 1,0 130,270').attr('stroke','yellow'); paper6.text(40, 230, 'start(70,240)').attr({ 'font-size':11, 'fill':'blue' }); paper6.text(160, 280, 'end(130,270)').attr({ 'font-size': 11, 'fill': 'blue' }); paper6.text(70, 320, 'large-arc-flag=1\nsweep-flag=0').attr({ 'font-size': 11, 'fill': 'green', 'text-anchor': 'middle' }); // 繪制右下的橢圓 paper6.ellipse(330, 240, 60, 30); paper6.ellipse(270, 270, 60, 30); paper6.path('M 270,240 A 60,30 0 1,1 330,270').attr('stroke','yellow'); paper6.text(240, 230, 'start(270,240)').attr({'font-size': 11, 'fill': 'blue' }); paper6.text(360, 280, 'end(330,270)').attr({'font-size': 11, 'fill': 'blue' }); paper6.text(270, 320, 'large-arc-flag=1\nsweep-flag=1').attr({'font-size': 11, 'fill': 'green', 'text-anchor': 'end','href': 'http://www.baidu.com' }); </script><h1>繪制圖片</h1><div id="sample-7"></div><script type="text/javascript">var paper7 = Raphael("sample-7", 600, 100);paper7.image("ani_08.png", 10, 10, 70, 92);</script></body> </html>10.2. 效果圖
《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀總結
以上是生活随笔為你收集整理的009_Raphael绘制图形的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 用户界面改变图片锚点
- 下一篇： 001_html简介