利用raphael画图
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画图的更多相关文章
- 使用Raphael 画图(二) 扩展的图形 (javascript)
看这文章前,建议先看第一编文章<使用Raphael 画图(一) 基本图形 (javascript)>. 在Raphael基础上扩展的图形: 要运行该例子要引入附件的2个js包.(g.rap ...
- 初识Python,利用turtle画图
目录 我的第三篇博客 一.初识Python 1.变量 2.注释 3.turtle库 我的第三篇博客 一.初识Python 1.变量 变量就是可变的的量,用来描述某个事物的属性.本质作用就是描述和接收变 ...
- 对Raphael画图标的一个jquery简单封装
公司要做一个项目的demo,要求地图上可以插红旗,所以就用到了Raphael. 因为是个demo,所以地图就用了一张图片,效果如下: 所以为了更好的封装一下这个功能,就写了一个简单的插件:jquery ...
- 利用IOS画图功能画出五角星,并且可以调整五角星的填充范围
我们要花的为一个黄色的五角星并且其中的填充黄色能够任意调整,比如只填满半个五角星,或者只填满一个角等等. 首先要重写DrawRect 方法,然后在这里实现我们的画图代码. - (void)drawRe ...
- raphael画图
// 在坐标(10,50)创建宽320,高200的画布 var paper = Raphael(10, 50, 320, 200); // 在坐标(x = 50, y = 40)绘制半径为 10 的圆 ...
- 使用Raphael 画图(一) 基本图形 (javascript)
Raphael是什么? Raphael 是一个用于在网页中绘制矢量图形的 Javascript 库.它使用 SVG W3C 推荐标准和 VML 作为创建图形的基础,你可以通过 JavaScript 操 ...
- 使用Raphael 画图(四) 路径(一) (javascript)
这章介绍路径,本人觉得这是比较难和精髓的一部分. 先介绍基本知识: 可以参考: http://www.chinasvg.com/support/svg-tutorial/svg-path-direct ...
- 使用Raphael 画图(三) 事件 (javascript)
这章展示事件例子. 下图是官方API的事件: 例子: var butt1 = paper.set(); var a1 = paper.circle(24.833, 26.917, 26.667).at ...
- [WebGL入门]十八,利用索引缓存来画图
注:文章译自http://wgld.org/.原作者杉本雅広(doxas),文章中假设有我的额外说明.我会加上[lufy:].另外,鄙人webgl研究还不够深入,一些专业词语,假设翻译有误,欢迎大家指 ...
随机推荐
- centos 7 ssh登录安全问题
2018-10-11 1.ssh禁止root远程登录 修改ssh配置文件/etc/ssh/sshd_config vim /etc/ssh/sshd_config PermitRootLogin ye ...
- redis cluster 集群拓展
redis cluster 集群拓展 准备工作 举例:添加2个节点(1主7006节点,1从7007节点) 在/home/redis-cluster下生成conf和data目标,并生成配置信息 `; d ...
- 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 ...
- Mercurial stuck “waiting for lock”, tortoisehg pull版本卡住在等待 解决办法
最近使用hg的时候,拖取版本一直卡住不动.报错类似waiting for lock on working directory of xxxx held by ''. 原本以为是网络不好或者hg安装有问 ...
- javascript 定时任务封装
/** * 定时任务 * 间隔时间,执行次数,要带的参数,要执行的函数. */ var TimingTask = function(time,count,param,fun){ this.id = - ...
- 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= ...
- TimesTen LINUX 安装日志
$ ./setup.sh NOTE: Each TimesTen installation is identified by a unique instance name. The instance ...
- 常用Redis命令
在 Windows 下配置 Redis 集群 在 Windows 下配置多个 Redis(简化配置) MicrosoftArchive/redis 官方Redis集群搭建文档 Redis命令 Cent ...
- nyoj 214——单调递增子序列(二)——————【二分搜索加dp】
单调递增子序列(二) 时间限制:1000 ms | 内存限制:65535 KB 难度:4 描述 给定一整型数列{a1,a2...,an}(0<n<=100000),找出单调递增最长 ...
- 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 ...