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. centos 7 ssh登录安全问题

    2018-10-11 1.ssh禁止root远程登录 修改ssh配置文件/etc/ssh/sshd_config vim /etc/ssh/sshd_config PermitRootLogin ye ...

  2. redis cluster 集群拓展

    redis cluster 集群拓展 准备工作 举例:添加2个节点(1主7006节点,1从7007节点) 在/home/redis-cluster下生成conf和data目标,并生成配置信息 `; d ...

  3. bat mvn Maven中-DskipTests和-Dmaven.test.skip=true的区别 Maven 生命周期

    cd C:\Users\lt32806\git\tempest call mvn clean compile -Dmaven.test.skip=truepause Maven中-DskipTests ...

  4. Mercurial stuck “waiting for lock”, tortoisehg pull版本卡住在等待 解决办法

    最近使用hg的时候,拖取版本一直卡住不动.报错类似waiting for lock on working directory of xxxx held by ''. 原本以为是网络不好或者hg安装有问 ...

  5. javascript 定时任务封装

    /** * 定时任务 * 间隔时间,执行次数,要带的参数,要执行的函数. */ var TimingTask = function(time,count,param,fun){ this.id = - ...

  6. Merge Sorted Array II

    Merge two given sorted integer array A and B into a new sorted integer array. Example A=[1,2,3,4] B= ...

  7. TimesTen LINUX 安装日志

    $ ./setup.sh NOTE: Each TimesTen installation is identified by a unique instance name. The instance ...

  8. 常用Redis命令

    在 Windows 下配置 Redis 集群 在 Windows 下配置多个 Redis(简化配置) MicrosoftArchive/redis 官方Redis集群搭建文档 Redis命令 Cent ...

  9. nyoj 214——单调递增子序列(二)——————【二分搜索加dp】

    单调递增子序列(二) 时间限制:1000 ms  |  内存限制:65535 KB 难度:4   描述 给定一整型数列{a1,a2...,an}(0<n<=100000),找出单调递增最长 ...

  10. BNU4299——God Save the i-th Queen——————【皇后攻击,找到对应关系压缩空间】

    God Save the i-th Queen Time Limit: 5000ms Memory Limit: 65536KB 64-bit integer IO format: %lld      ...