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

raphael用法学习相关推荐

mysql explain 实例_Mysql实例mysql explain用法学习
<Mysql实例mysql explain用法学习>要点: 本文介绍了Mysql实例mysql explain用法学习,希望对您有用.如果有疑问,可以联系我们. 导读:本节内容:mysql ...
ModelAndView绑定数据模型配合Thymeleaf渲染数据用法学习
分开介绍,大致说一下ModelAndView ModelAndView是Spring MVC里面重要的组成部分.分为两部分Model和View,Model是后端的返回值,View指的视图.先回忆一下当 ...
SQL语言的基本用法——学习笔记
SQL语言的基本用法结构化查询语言(Structured Query Language)简称SQL,是一种特殊目的的编程语言,是一种数据库查询和程序设计语言,用于存取数据以及查询.更新和管理关系 ...
Typedef用法学习
不管实在C还是C++代码中,typedef这个词都不少见,当然出现频率较高的还是在C代码中.typedef与#define有些相似,但更多的是不同,特别是在一些复杂的用法上,就完全不同了,看了网上一些 ...
Raphael属性学习--基本
使用步骤: a:下载Raphael.js并导入相应的页面(推荐放在下部,HTML的编译过程是有顺序的,放在title下边,容易导致页面加载过程中的中断现象) b:定义画布. 在浏览器视图中定义: ...
strace用法学习
一.strace是什么? 按照strace官网的描述,strace是一个可用于诊断.调试和教学的Linux用户空间跟踪器.我们用它来监控用户空间进程和内核的交互,比如系统调用.信号传递.进程状态变更等 ...
Linux中rename和mv命令用法学习修改文件名区别和总结
如何用命令修改文件名呢?在Linux下可以用rename命令,当然还可以使用mv命令,这里分享下Linux rename命令的用法. 有一部分人说Linux下没有rename命令,建议大家用mv命令. ...
Android事件总线 EventBus3.0用法学习
http://blog.csdn.net/itachi85/article/details/52205464 1.EventBus的三要素 Event:事件,可以是任意类型的对象. Subscribe ...
python 栈的用法--学习
栈栈(stack),可以理解成一盒口香糖,想要拿出一颗,自然从顶部取走最后放入的,这里的顶部就是"栈顶";添加和移除新项都发生在栈顶,与栈顶对应的端称为"栈底" ...

raphael用法学习

raphael用法学习相关推荐

最新文章

热门文章