利用raphael畫圖

raphael是一個js的矢量庫，能夠js操做DOM能夠實現柱形圖、走勢圖等一些基本的圖形；

1、使用：

在html中設置<div class="my"></div>

引入raphael文件，在js中寫var myR=Raphael(my,myW,myH);//這樣就實現了一個相似畫布的東西（也就是初始化了一下raphael）

矩形 myR.rect(x,y,w,hi；//這就實現一個矩形

橢圓 myR.ellipse(x,y,r1,r2)

線條 myR.path('M'+x1+","+y1+"L"+"x2"+","+y2)這就是實現一個線條了

注意：想要獲取到某個圖形的邊界框的話myR.getBBox()獲取到這個圖形的x y等信息

2、實例：

1.矩形 

function recttangle(start,text){//開始的圖形 text裏面的文字
				var rstart = start.getBBox();
				var rstartX = rstart.x2;
				var rstartY = (rstart.y+rstart.y2)/2;
				var wsnew = r.rect(rstartX,rstartY-rh/2,rw,rh).attr(undo);
				wsnew.glow(glow);
				var wsnew_text = r.text(rstartX+rw/2+es,rstartY,text).attr(ok_text);
				return wsnew;
}

2.菱形：

function rhombC(start,w,h,text){//start開始的圖形 w寬度 h高度 text裏面的文字
				var rstart = start.getBBox();
				var rstartX = rstart.x2;
				var rstartY = rstart.y2;
				var judgereview = r.path("M"+(rstartX)+","+(rstartY)+"L"+(rstartX-w)+","+(rstartY+h)+"L"+(rstartX)+","+(rstartY+h*2)+"L"+(rstartX+w)+","+(rstartY+h)+"Z").attr(undo);
				judgereview.glow(glow);
				var judgereview_text = r.text(rstartX,rstartY+dh,text).attr(ok_text);
				return judgereview;
}

 3.橢圓：

function ell(start,text){//start開始的圖形 text裏面的文字
				var estart = start.getBBox();
				var estartX = estart.x2;
				var estartY = (estart.y+estart.y2)/2;
				var start = r.ellipse(estartX+rx+es,estartY,rx,rx).attr(undo);
				  start.glow(glow);
				var start_text = r.text(estartX+rx+es,estartY,text).attr(ok_text);
				return start;
}

4.線段：

function Hline(start,w,text,no){//解釋 start從這個圖形開始 w長度 text在線段上寫的文字 no是否顯示箭頭
				var wsimpbb = start.getBBox();
				var wsimpaccx = wsimpbb.x2;
				var wsimpaccy = (wsimpbb.y+wsimpbb.y2)/2;
				var p2 = r.path("M"+(wsimpaccx+w)+","+wsimpaccy+"L"+(wsimpaccx+es/2)+","+wsimpaccy).attr(undo_line);
				if(!no){
					var pp2 = r.path("M"+(wsimpaccx+w)+","+(wsimpaccy+3)+"L"+(wsimpaccx+w)+","+(wsimpaccy-3)+"L"+(wsimpaccx+w+3)+","+(wsimpaccy)+"Z").attr(undo_line).attr(undo);
				}
				if(text){	
					var pt2 = r.text(wsimpaccx+w/2,wsimpaccy,text).attr(undo_stext);
				}
				return {
					p2:p2,
					pp2:pp2,
					pt2:pt2
				};
} 

3、實現一個流程圖

https://github.com/GainLoss/summary/tree/master/%E7%94%BB%E5%9B%BE

官網：http://dmitrybaranovskiy.github.io/raphael/

4、理解

其實每個圖形的使用就是肯定它的起始位置；對於矩形和圓形等肯定它的寬高或者半徑；對於線段的話每個點的位置；而後鏈接就能夠了

每次畫的時候肯定好本身要畫的圖形大致的形狀，而後肯定上面幾個要素就能夠了