利用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/

四、理解

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

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

巴特西

利用raphael画图

最新文章

热门文章