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