raphael用法学习

最近公司项目中需要绘图，就去学习了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;
        }