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画图的更多相关文章

  1. 使用Raphael 画图(二) 扩展的图形 (javascript)

    看这文章前,建议先看第一编文章<使用Raphael 画图(一) 基本图形 (javascript)>. 在Raphael基础上扩展的图形: 要运行该例子要引入附件的2个js包.(g.rap ...

  2. 初识Python,利用turtle画图

    目录 我的第三篇博客 一.初识Python 1.变量 2.注释 3.turtle库 我的第三篇博客 一.初识Python 1.变量 变量就是可变的的量,用来描述某个事物的属性.本质作用就是描述和接收变 ...

  3. 对Raphael画图标的一个jquery简单封装

    公司要做一个项目的demo,要求地图上可以插红旗,所以就用到了Raphael. 因为是个demo,所以地图就用了一张图片,效果如下: 所以为了更好的封装一下这个功能,就写了一个简单的插件:jquery ...

  4. 利用IOS画图功能画出五角星,并且可以调整五角星的填充范围

    我们要花的为一个黄色的五角星并且其中的填充黄色能够任意调整,比如只填满半个五角星,或者只填满一个角等等. 首先要重写DrawRect 方法,然后在这里实现我们的画图代码. - (void)drawRe ...

  5. raphael画图

    // 在坐标(10,50)创建宽320,高200的画布 var paper = Raphael(10, 50, 320, 200); // 在坐标(x = 50, y = 40)绘制半径为 10 的圆 ...

  6. 使用Raphael 画图(一) 基本图形 (javascript)

    Raphael是什么? Raphael 是一个用于在网页中绘制矢量图形的 Javascript 库.它使用 SVG W3C 推荐标准和 VML 作为创建图形的基础,你可以通过 JavaScript 操 ...

  7. 使用Raphael 画图(四) 路径(一) (javascript)

    这章介绍路径,本人觉得这是比较难和精髓的一部分. 先介绍基本知识: 可以参考: http://www.chinasvg.com/support/svg-tutorial/svg-path-direct ...

  8. 使用Raphael 画图(三) 事件 (javascript)

    这章展示事件例子. 下图是官方API的事件: 例子: var butt1 = paper.set(); var a1 = paper.circle(24.833, 26.917, 26.667).at ...

  9. [WebGL入门]十八,利用索引缓存来画图

    注:文章译自http://wgld.org/.原作者杉本雅広(doxas),文章中假设有我的额外说明.我会加上[lufy:].另外,鄙人webgl研究还不够深入,一些专业词语,假设翻译有误,欢迎大家指 ...

随机推荐

  1. SPOJ - MAXXOR

    依然是异或运算,这次是限制L,R范围内挑2个数使其异或值最大 如果r最高为是pos,那最理想状态当然是(1ll<<pos+1)-1 只有2个数如果凑近最理想的状态?直接找紧挨着的一个就好, ...

  2. Http多线程下载文件

    package unit; import java.io.ByteArrayOutputStream; import java.io.File; import java.io.FileOutputSt ...

  3. [转] Mysql命令基础

    [From] http://c.biancheng.net/cpp/u/mysql_ml/ 连接Mysql数据库 mysql命令格式: mysql -h主机地址 -u用户名 -p用户密码 1) 连接到 ...

  4. Spring property文件配置方法以及如何与工程分离

    1,Spring使用property文件作为配置源    工程中难免出现一些需要每次部署都需要配置的参数,如数据源连接参数等,测试环境跟实际运行环境是不一样的.    使用spring框架的话,这些参 ...

  5. http statusCode(状态码) 200、300、400、500序列详解

    201-206都表示服务器成功处理了请求的状态代码,说明网页可以正常访问.200(成功) 服务器已成功处理了请求.通常,这表示服务器提供了请求的网页.201(已创建) 请求成功且服务器已创建了新的资源 ...

  6. linux 输出 之 nl 命令

    1.命令格式:nl [选项]... [文件]... 2.命令参数: -b  :指定行号指定的方式,主要有两种: -b a :表示不论是否为空行,也同样列出行号(类似 cat -n): -b t :如果 ...

  7. linux 基础运维 之 Linux的闹钟

    1. linux 删除一个文件的权限要看文件所在的目录的权限 删除文件需要对对这个目录拥有w权限 修改文件 查看文件的内容需要对文件有rw权限 删除 创建一个文件 需要对文件坐在地目录拥有wx权限2. ...

  8. NPOI开发手记

    目录 注意事项 读取Excel 创建Excel表 保存Excel 行 列 单元格样式 添加公式 Dataset.DataGridView转换Excel帮助类 NPOI其实就是POI的.NET移植 项目 ...

  9. 022-pinyin4j工具类模板

    模板一 package ${enclosing_package}; import java.util.Arrays; import net.sourceforge.pinyin4j.PinyinHel ...

  10. 设置ibus为默认输入法

    /etc/profile  文件中编辑 export INPUT_METHOD="ibus"