利用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研究还不够深入,一些专业词语,假设翻译有误,欢迎大家指 ...
随机推荐
- LightOJ - 1197 素数筛
深夜无事可干啊 #include<bits/stdc++.h> using namespace std; const int maxn = 1e6+11; typedef long lon ...
- poj3040
一.题意:约翰要给他的牛贝西发工资,每天不得低于C元,约翰有n种面值的钱币,第i种的面值为v_i,数量有b_i.问这些钱最多给贝西发多少天的工资.注意,每种面值的金钱都是下一种的面值的倍数. 二.思路 ...
- SQL Server 2008 SQL2012 SQL2014 收缩日志 清空删除大日志文件
SQL2008 SQL2012 SQL2014 的收缩日志 由于SQL2008对文件和日志管理进行了优化,所以以下语句在SQL2005中可以运行但在SQL2008中已经被取消:(SQL2005)Bac ...
- oem的使用
1 浏览器输入下面的网址: 虚拟机[安装orcale的机器]:http://localhost:1158/em/ 本机:http://192.168.47.10:1158/em/ 192.168.47 ...
- 精选9个值得学习的 HTML5 效果
此文转自:http://www.cnblogs.com/lhb25/p/9-html5-effects.html,仅供本人学习参考,版权归原作者所有! 精选9个值得学习的 HTML5 效果[附源码] ...
- C#(Winform)的SaveFileDialog(文件保存对话框)控件使用
#region 保存对话框 private void ShowSaveFileDialog() { //string localFilePath, fileNameExt ...
- Oracle中查询关键字select--from--where--group by--having--order by执行顺序
select--from--where--group by--having--order by 这6个查询关键字的执行顺序: 1.from组装来自不同数据源的数据:2.where基于指定的条件对记录行 ...
- Linux抓包工具:tcpdump
tcpdump 是一个命令行实用工具,允许你抓取和分析经过系统的流量数据包.它通常被用作于网络故障分析工具以及安全工具. tcpdump 是一款强大的工具,支持多种选项和过滤规则,适用场景十分广泛.由 ...
- 深入理解JavaScript系列(12):变量对象(Variable Object)
介绍 JavaScript编程的时候总避免不了声明函数和变量,以成功构建我们的系统,但是解释器是如何并且在什么地方去查找这些函数和变量呢?我们引用这些对象的时候究竟发生了什么? 原始发布:Dmitry ...
- [转]微信小程序安全浅析
本文转自:http://blog.csdn.net/baize_security/article/details/54582854 引言 近期微信小程序重磅发布,在互联网界掀起不小的波澜,已有许多公司 ...