利用raphael画图

raphael是一个js的矢量库，可以js操作DOM可以实现柱形图、走势图等一些基本的图形；

一、使用：

在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等信息

二、实例：

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
				};
} 

三、实现一个流程图

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

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

四、理解

其实每一个图形的使用就是确定它的起始位置；对于矩形和圆形等确定它的宽高或者半径；对于线段的话每一个点的位置；然后连接就可以了

每次画的时候确定好自己要画的图形大体的形状，然后确定上面几个要素就可以了