前端繪圖用的最多的就是svg和canvas，現在有許多基於這兩種技術的圖形框架，比如基於svg的D3 和基於canvas的echarts 。今天要講的是基於svg的Raphael Javascript ，它是一個 Javascript的矢量庫。
首先你要在HTML中引入RaphaelJS
<script type="text/javascript" src="raphael.min.js"></script>
image.png
然後你就可以在js中使用這個包了
我是先建了一個名為master.js的文件，在這個文件中寫js，注意兩個文件的放置順序，由於要在master.js中使用RaphaelJS，所以raphael.js的引用要放在前麵
創建畫布
1.以坐標點定義畫布位置
var paper = Raphael(20, 30, 650, 400); 分別為橫坐標，縱坐標，寬度，高度
2.以節點定義畫布位置
var width = 600;var height = 200;var paper = Raphael("mySvg",width,height); //定義svg繪圖節點，及寬度，高度封裝繪圖函數
1.畫矩形
function drawRect(x,y,w,h,radius){
var rect = paper.rect(x,y,w,h); //若繪圓角矩形加上圓角參數(橫坐標，縱坐標，寬，高，圓角)
rect.attr({
"fill": "red", //填充顏色
"stroke": "lime", //邊框顏色
"stroke-width": 2 // 邊框寬度
});}2.畫圓
function drawCircle(x,y,r){
var cir = paper.circle(x,y,r); //(圓心橫坐標，圓心縱坐標，半徑)
cir.attr({
"fill": "blue",
"stroke": "lime",
"stroke-width": 2
})}3.畫橢圓
function drawEllipse(x,y,rx,ry){ //水平半徑和垂直半徑其實就是橢圓的rx和ry
var ellipse = paper.ellipse(x,y,rx,ry);
ellipse.attr({
"fill": "yellow",
"stroke": "lime",
"stroke-width": 2
})}4.畫上五邊形
function drawDownFive(x,y,w,h){ // 傳起點坐標，寬和高
// 若要使邊框完整，從起始坐標到起始坐標，僅填充的話不需在後麵加起始坐標或加閉合路徑
// var DownFive = paper.path('M'+x+','+y+'H'+(w+x)+'V'+(h+y)+'L'+(w/2+x)+','+(h+h/2+y)
// +'L'+x+','+(y+h)+'L'+x+','+y);
// var DownFive = paper.path('M'+x+','+y+'H'+(w+x)+'V'+(h+y)+'L'+(w/2+x)+','+(h+h/2+y)
// +'L'+x+','+(y+h)+'Z');
var DownFive = paper.path('m'+x+','+y+'h'+w+'v'+h+'l'+(-w/2)+','+(h/2)+'l'+(-w/2)+','+(-h/2)+'Z');//相對坐標
DownFive.attr({
"fill": 'orangered',
"stroke": 'lime',
"stroke-width": 2
});
}5.添加文字
function drawText(x,y,txt){ // 橫坐標+縱坐標+文本
var tip = paper.text(x,y,txt);
tip.attr({
"font-size": 16, //字體大小
"fill": 'brown', //字體顏色
"text-anchor":"middle", // 字體對齊樣式
});
}
drawText(200,140,"橢圓弧的使用");Raphael元素的變換
// T 平移
// S 縮放 Sx,y 橫向縮放x倍,縱向縮放y倍
// R 按角度旋轉
// M 變換矩陣
// 每個字母是一個命令 t是平移，r是旋轉，s是縮放，m是矩陣
// 也有另類的“絕對”平移、旋轉和縮放：T、R和S。他們不會考慮到以前的變換
var rect1 = paper.rect(20,300,100,50);
rect1.attr({
"transform": 'r90T100,0s0.5'
});Raphael圖形的動畫效果
// 語法如下：Element.animate({動畫屬性的鍵值對},動畫時間,緩動類型,回調函數);
// 緩動類型其實就是動畫過渡公式，是哪種類型的。主要有以下這些類型：
// “linear”（線性）
// “<”或“easeIn”或“ease-in” （由慢到快）
// “>”或“easeOut”或“ease-out”（又快到慢）
// “<>”或“easeInOut”或“ease-in-out”（由慢到快再到慢）
// “backIn”或“back-in”（開始時回彈）
// “backOut”或“back-out”（結束時回彈）
// “elastic”（橡皮筋）
// “bounce”（彈跳）
rect1.animate({transform: "r90t100,0s1.5"}, 1000,"bounce",function(){console.log("finish");});事件綁定
var rect2 = paper.rect(60,300,100,50,10);rect2.attr('fill', 'blue');rect2.mouseover(function() { //綁定鼠標懸浮事件，其他事件類似
rect2.attr({
"transform": 'T0,50s2',
"fill": '#000'
});});rect2.mouseout(function() {
rect2.attr({
"fill": 'blue',
"transform": 'T0,0s1'
});});clone() 複製一個
var rect3 = rect2.clone().attr({
"x": 400,
"y": 400});畫布的方法
// 畫布的方法
// paper.clear(); // paper.clear()方法清空畫布
// 加載圖片 paper.image()
// 參數 說明
// src 圖片的路徑，對經常寫前台的童鞋們來說這個小菜一碟
// X 圖片擺放位置的x坐標
// Y 圖片擺放位置的y坐標
// width 圖片的寬度
// height 圖片的高度
// 例：paper.image("images/testimage.png",10,10,200,150);將在畫布的(10,10)位置擺放一個寬200，長150的圖片。
// paper.setSize()用來重新設置畫布的大小。你以在發現畫布大小不合適時調整畫布的大小
// 而不是需要從頭建立畫布然後重複原來的工作。方法有2個參數：寬和高
paper.setSize(1000,1000);// 我們將畫布的大小修改為寬100px，1000px。
// paper.set()方法是個很重要的方法。它幫助我們對Raphael元素進行分組然後進行批量管理
var rect4 = paper.rect(300,600,100,50,10);
var circle1 = paper.circle(400,680,50);
var set = paper.set();
set.push(circle1,rect4);
// set.clear();
// set.exclude(circle1);
// set.attr('fill', 'green');
// 我們想要清空set，可不要用remove()而是用clear()，remove()會把所有set裏麵的元素remove掉。
// clear()隻是清除set裏的內容，並不會對裏麵的內容本身有影響
// set.exclude(rect);還記得我前麵的代碼裏麵將rect添加進入raphaelSet裏麵嗎?
// 現在你可以試一試在在執行raphaelSet.attr()之前使用raphaelSet.exclude(rect);
// 試一試。效果和我們想象的一樣，第一個矩形沒有被填充紅色，因為它被從set裏麵剔除出來了。
// set.forEach()就是去循環我們創建的set對象，然後通過遍曆對set內的元素進行操作。
// 這個功能是差不多算是set裏麵最重要的方法了，我們使用set大部分業務都需要這個循環了
set.forEach(function(ele){
ele.attr({"fill":"red"});});// set.pop(); 清除最後一個添加進去的元素
// set.splice()方法 它有3個參數index,count,element set.splice(1,2,rect)，
// 我從set裏麵index為1的位置開始往後刪除2個元素，然後把rect添加進來。所以slice可以同時刪除和添加元素
透明度
// 元素透明度鍵名opacity,取值範圍為0（完全不透明）到1（完全透明），也可以分別設置stroke-opacity和fill-opacity
var circle2 = paper.circle(600,680,50);
circle2.attr({
"fill": 'blue',
"stroke": 'lime',
"stroke-width":5,
"fill-opacity":0.5
});
// Raphael支持通過clip-rect屬性來進行元素的矩形切割，它允許我們將圖形切割出一部分下來
circle2.attr('clip-rect', '545,625,50,50');Raphael支持線性和梯度漸變去填充圖形，要達到這個效果，而不是直接用一個顏色的字符串去設置fill屬性。
我們需要指定了下麵這種字符串的格式去做到線性漸變：
<angle>-<color>[-<color>[:<offset>]]-<color>
下麵的語法就是達到徑向漸變的效果：
r[(<fx>,<fy>)]<color>[-<color>[:<offset>]]-<color>
1.線性漸變 <angle>-<color1>-<color2>
var rect5 = paper.rect(760,600,100,80);
rect5.attr('fill', '0-red-blue');
rect5.attr('fill', '45-red-yellow');2.徑向漸變 r<color>-<color>
var circle3 = paper.circle(940,650,50);
circle3.attr('fill', 'rblack-white-black');
circle3.attr('fill', 'rblack-white:80-black'); //以半徑的80%處為第二階段的漸變分割點3.偏離圓心的漸變
var circle4 = paper.circle(70,900,50);
var circle5 = paper.circle(200,900,50);
var circle6 = paper.circle(330,900,50);
var circle7 = paper.circle(460,900,50);
var circle8 = paper.circle(590,900,50);
circle4.attr('fill', 'r(0.1,0.5)#fff-#000'); //r(0.5,o.5)是正圓心
circle5.attr('fill', 'r(0.5,0.1)#fff-#000');
circle6.attr('fill', 'r(0.9,0.5)#fff-#000');
circle7.attr('fill', 'r(0.5,0.9)#fff-#000');
circle8.attr('fill', 'r(0.5,0.5)#c8c8c8-#000');給線條加箭頭
路徑的末尾顯示箭頭。字符串格式是<type>[-<width>[-<length>]]。
可能的類型：classic、block、open、oval、diamond、none
寬：wide、narrow、midium，長：long 、short、midium。
var arrow = paper.path("M20,960L120,960").attr('stroke', 'lime'); //繪一條直線
arrow.attr({
"arrow-end":'classic-wide-midium', //加箭頭屬性
"stroke-width":3
});線條虛化
stroke-dasharray string [“”, “-”, “.”, “-.”, “-..”, “.”, “- ”, “--”, “- .”, “--.”, “--..”]
var dottedLine = paper.path("M200,960,L300,960");
dottedLine.attr({
"stroke": 'blue', //先給個顏色
"stroke-dasharray": '-.'
});線段端點處理
stroke-linecap string [“butt”, “square”, “round”]
var lineCap = paper.path("M320,960L420,960");
lineCap.attr({
"stroke": 'red',
"stroke-linecap": 'butt',
"stroke-width": 10
});stroke-linejoin 屬性指明路徑的轉角處使用的形狀或者繪製的基礎形狀。
stroke-linejoin string [“bevel”, “round”, “miter”]
var linejoin = paper.path("M440,960L500,960L500,1000");
linejoin.attr({
"stroke": 'orangered',
"stroke-linejoin": 'bevel',
"stroke-width": 5
});
