最近公司項目中需要繪圖，就去學習了raphael插件，先介紹下這個插件吧
Raphael 是一個用於在網頁中繪製矢量圖形的 Javascript 庫。它使用 SVG W3C 推薦標準和 VML 作爲創建圖形的基礎，你可以通過 JavaScript 操作 DOM 來輕鬆創建出各種複雜的柱狀圖、餅圖、曲線圖等各種圖表，還可以繪製任意形狀的圖形，可以進行圖表或圖像的裁剪和旋轉等複雜操作。
在引入了raphael.js插件後，就可以繪製任意的矢量圖形了
先創建一塊畫布指定起始座標以及長和寬 var canvas=Raphael(100,100,50,40);在html頁面中一般用法是在指定id的標籤處創建圖形 var canvas=Raphael("id",100,300);之後繪製各種圖形
矩形 var rectangle=canvas.rect(100,100,130,140);這樣就可以繪製各種長方形或正方形了，如果需要帶圓角的矩形，可以
var rectangle=canvas.rect(100,100,130,140,10)再加一個參數就行
畫圓var circle=canvas.circle(100,50,10);這樣就在座標（100,50）處畫了一個半徑爲10的圓
給繪製的圖形添加屬性 circle.attr("fill","blue"); //circle.attr({"fill":"#ff0","stroke":"none"}); //fill填充圖形 ，stroke描邊
在畫布上添加字 canvas.text(300,250,"綜合故障處理系統").attr({"fill":"black","font-size":"15px"});
動畫效果,在2秒時間裏座標爲（10，10）半徑爲10的圓 變爲座標爲（100,100,）半徑爲20
var paper = Raphael("canvas", 640, 480);
var c = paper.circle(10, 10, 10).attr({fill: "#a9ea00", stroke: "none"}).animate({cx:100,cy:100,r: 20}, 2000);
鼠標移上的效果
var circle = paper.rect(100,60, 200, 320).attr({fill:"#a9ea00",stroke:"#ff0","stroke-width":"12px","stroke-linejoin":"round"});
circle.mouseover(function(){
circle.attr({"r":40,"rotation": -90});
});
circle.mouseout(function(){
circle.attr({"r":20});
});
var json = {
name: "綜合故障處理系統", children: [
[
{ name: "EOMS" },
{ name: "統一流程平臺" },
],
[
{ name: "綜合監控系統" },
{ name: "業務質量監控系統" },
{ name: "網絡投訴支撐系統" }
],
[
{ name: "統一數據採集平臺" }
],
[
{ name: "綜合資源管理系統" },
{ name: "綜合配置激活系統" },
{ name: "集中操作維護系統" },
{ name: "應急通信管理系統" }]
]
};
function DrawImg(){
//子節點的個數
var num = json.children.length;
var canvas = Raphael("canvas",800,800);
//設置主節點座標
var Node = { x:300,y:200,width:200,height:110};
//先畫出主節點位置 根據主節點定位上下左右
canvas.rect(Node.x,Node.y,Node.width,Node.height,10).attr("fill","#FFA488");
canvas.text(Node.x+Node.width/2,Node.y+Node.height/2,json.name).attr({"fill":"black","font-size":"15px"});;
//alert(json.children[1][1].name);
//alert(json.children[0].length);
//根據數組對象中子節點個數畫圖
//把上左右下的各個部分根據子節點個數平均劃分 默認是上左右下
for(var j=0; j<json.children.length ;j++){
var subNodeNum=json.children[j].length;
for(var i = 0; i < subNodeNum; i++){
var subNode={ x:0,y:0,width:130,height:60 };
//上方
if(j==0){
//設置子節點座標
var upPosXy = {x:(Node.x+Node.width)/subNodeNum+i*150,y:Node.height-100};
subNode.x=upPosXy.x;
subNode.y=upPosXy.y;
canvas.rect(subNode.x,subNode.y,subNode.width,subNode.height,10).attr("fill","#00BBFF");
canvas.path(getDoubleArr(Node.x+Node.width/2+i*10,Node.y-5,subNode.x+subNode.width/2,subNode.y+subNode.height+5,5)).attr("stroke","#FF8888");
canvas.text(subNode.x+subNode.width/2,subNode.y+subNode.height/2,json.children[j][i].name).attr({"fill":"black","font-size":"15px"});
}
//左邊
if(j==1){
//設置子節點座標
var leftPosXy = {x: Node.x-200 , y:(Node.y+Node.height/2)/subNodeNum+i*120};
subNode.x=leftPosXy.x;
subNode.y=leftPosXy.y;
canvas.rect(subNode.x,subNode.y,subNode.width,subNode.height,10).attr("fill","#00BBFF");
canvas.path(getDoubleArr(Node.x-5,Node.y+Node.height/2+i*10,subNode.x+subNode.width+5,subNode.y+subNode.height/2,5)).attr("stroke","#FF8888");
canvas.text(subNode.x+subNode.width/2,subNode.y+subNode.height/2,json.children[j][i].name).attr({"fill":"black","font-size":"15px"});
}
//右邊
if(j==2){
var rightPosXy = {x:Node.x+Node.width+90 ,y:(Node.y+Node.height/2)/subNodeNum+i*120-30};
subNode.x=rightPosXy.x;
subNode.y=rightPosXy.y;
canvas.rect(subNode.x,subNode.y,subNode.width,subNode.height,10).attr("fill","#00BBFF");
canvas.path(getDoubleArr(Node.x+Node.width+5,Node.y+Node.height/2+i*10,subNode.x-5,subNode.y+subNode.height/2,5)).attr("stroke","#FF8888");
canvas.text(subNode.x+subNode.width/2,subNode.y+subNode.height/2,json.children[j][i].name).attr({"fill":"black","font-size":"15px"});
}
//下方
if(j==3){
var downPosXy = {x:(Node.x+Node.width)/subNodeNum+i*150,y:Node.height+Node.y+130};
subNode.x=downPosXy.x;
subNode.y=downPosXy.y;
canvas.rect(subNode.x,subNode.y,subNode.width,subNode.height,10).attr("fill","#00BBFF");
canvas.path(getDoubleArr(Node.x+Node.width/2+i*10,Node.y+Node.height+5,subNode.x+subNode.width/2,subNode.y-5,5)).attr("stroke","#FF8888");
canvas.text(subNode.x+subNode.width/2,subNode.y+subNode.height/2,json.children[j][i].name).attr({"fill":"black","font-size":"15px"});
}
}
}
}
DrawImg();
//單向箭頭的實現 指定起點終點以及箭頭的長度
function getArr(x1, y1, x2, y2, size) {
var angle = Raphael.angle(x1, y1, x2, y2);//得到兩點之間的角度
var a45 = Raphael.rad(angle - 45);//角度轉換成弧度
var a45m = Raphael.rad(angle + 45);
var x2a = x2 + Math.cos(a45) * size;
var y2a = y2 + Math.sin(a45) * size;
var x2b = x2 + Math.cos(a45m) * size;
var y2b = y2 + Math.sin(a45m) * size;
var result = ["M", x1, y1, "L", x2, y2, "L", x2a, y2a, "M", x2, y2, "L", x2b, y2b];
return result;
}
//雙向箭頭的實現
function getDoubleArr(x1, y1, x2, y2, size) {
var angle = Raphael.angle(x1, y1, x2, y2);//得到兩點之間的角度
var a45 = Raphael.rad(angle - 45);//角度轉換成弧度
var a45m = Raphael.rad(angle + 45);
var x2a = x2 + Math.cos(a45) * size;
var y2a = y2 + Math.sin(a45) * size;
var x2b = x2 + Math.cos(a45m) * size;
var y2b = y2 + Math.sin(a45m) * size;
var x2c = x1 - Math.cos(a45) * size;
var y2c = y1 - Math.sin(a45) * size;
var x2d = x1 - Math.cos(a45m) * size;
var y2d = y1 - Math.sin(a45m) * size;
var result = ["M", x1, y1, "L",x2c,y2c,"M",x1,y1,"L",x2d,y2d,"M",x1,y1,"L", x2, y2, "L", x2a, y2a, "M", x2, y2, "L", x2b, y2b];
return result;
}