利用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研究还不够深入,一些专业词语,假设翻译有误,欢迎大家指 ...
随机推荐
- SPOJ - MAXXOR
依然是异或运算,这次是限制L,R范围内挑2个数使其异或值最大 如果r最高为是pos,那最理想状态当然是(1ll<<pos+1)-1 只有2个数如果凑近最理想的状态?直接找紧挨着的一个就好, ...
- Http多线程下载文件
package unit; import java.io.ByteArrayOutputStream; import java.io.File; import java.io.FileOutputSt ...
- [转] Mysql命令基础
[From] http://c.biancheng.net/cpp/u/mysql_ml/ 连接Mysql数据库 mysql命令格式: mysql -h主机地址 -u用户名 -p用户密码 1) 连接到 ...
- Spring property文件配置方法以及如何与工程分离
1,Spring使用property文件作为配置源 工程中难免出现一些需要每次部署都需要配置的参数,如数据源连接参数等,测试环境跟实际运行环境是不一样的. 使用spring框架的话,这些参 ...
- http statusCode(状态码) 200、300、400、500序列详解
201-206都表示服务器成功处理了请求的状态代码,说明网页可以正常访问.200(成功) 服务器已成功处理了请求.通常,这表示服务器提供了请求的网页.201(已创建) 请求成功且服务器已创建了新的资源 ...
- linux 输出 之 nl 命令
1.命令格式:nl [选项]... [文件]... 2.命令参数: -b :指定行号指定的方式,主要有两种: -b a :表示不论是否为空行,也同样列出行号(类似 cat -n): -b t :如果 ...
- linux 基础运维 之 Linux的闹钟
1. linux 删除一个文件的权限要看文件所在的目录的权限 删除文件需要对对这个目录拥有w权限 修改文件 查看文件的内容需要对文件有rw权限 删除 创建一个文件 需要对文件坐在地目录拥有wx权限2. ...
- NPOI开发手记
目录 注意事项 读取Excel 创建Excel表 保存Excel 行 列 单元格样式 添加公式 Dataset.DataGridView转换Excel帮助类 NPOI其实就是POI的.NET移植 项目 ...
- 022-pinyin4j工具类模板
模板一 package ${enclosing_package}; import java.util.Arrays; import net.sourceforge.pinyin4j.PinyinHel ...
- 设置ibus为默认输入法
/etc/profile 文件中编辑 export INPUT_METHOD="ibus"