注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

天涯倦客的博客

祝福你朋友永远快乐!

 
 
 

日志

 
 

raphaeljs图形库学习笔记  

2013-12-18 23:28:23|  分类: JS |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

官网地址:点我

<!doctype html>
<html dir="ltr" lang="zh-CN">
  <head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=8">
    <script src="http://bloghighlighter.googlecode.com/files/raphael-min.js" type="text/javascript" ></script>
    <script type="text/javascript" charset="utf-8">
      window.onload = function () {
        var paper = Raphael("canvas", 640, 480);
        paper.path({fill: "#000"},"M20,20L100,110z")
      };
    </script>
    <title>直线</title>
  </head>
  <body>
    <div id="canvas"></div>
  </body>
</html>
<!doctype html> <html dir="ltr" lang="zh-CN"> <head> <meta charset="utf-8"/> <meta http-equiv="X-UA-Compatible" content="IE=8"> <script src="http://bloghighlighter.googlecode.com/files/raphael-min.js" type="text/javascript" ></script> <script type="text/javascript" charset="utf-8"> window.onload = function () { var paper = Raphael("canvas", 640, 480); paper.path({fill: "#000"},"M20,20L100,110z") }; </script> <title>直线</title> </head> <body> <div id="canvas"></div> </body> </html>
<!doctype html>
<html dir="ltr" lang="zh-CN">
  <head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=8">
    <script src="http://bloghighlighter.googlecode.com/files/raphael-min.js" type="text/javascript" ></script>
    <script type="text/javascript" charset="utf-8">
      window.onload = function () {
        var paper = Raphael("canvas", 640, 480);
        var c = paper.circle(10, 10, 10).attr({fill: "#a9ea00", stroke: "none"}).animate({cx:100,cy:100,r: 20}, 2000)
      };
    </script>
    <title>移动圆形</title>
  </head>
  <body>
    <div id="canvas"></div>
  </body>
</html>

animate 函数中的哈希为变化后的圆的坐标与半径(radii)。

<!doctype html> <html dir="ltr" lang="zh-CN"> <head> <meta charset="utf-8"/> <meta http-equiv="X-UA-Compatible" content="IE=8"> <script src="http://bloghighlighter.googlecode.com/files/raphael-min.js" type="text/javascript" ></script> <script type="text/javascript" charset="utf-8"> window.onload = function () { var paper = Raphael("canvas", 640, 480); var c = paper.circle(10, 10, 10).attr({fill: "#a9ea00", stroke: "none"}).animate({cx:100,cy:100,r: 20}, 2000) }; </script> <title>移动圆形</title> </head> <body> <div id="canvas"></div> </body> </html>
<!doctype html>
<html dir="ltr" lang="zh-CN">
  <head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=8">
    <script src="http://bloghighlighter.googlecode.com/files/raphael-min.js" type="text/javascript" ></script>
    <script type="text/javascript" charset="utf-8">
      window.onload = function () {
        var paper = Raphael("canvas", 640, 480);
        paper.rect(0, 0, 640, 480,10).attr({fill: "#F2F1D7",stroke: "none"});
        paper.path({"fill":"#a9ea00","stroke":"#c9c"},"M300,200 h-150 a150,150 0 1,0 150,-150 z");
      };
    </script>
    <title>扇形</title>
  </head>
  <body>
    <div id="canvas"></div>
  </body>
</html>

要点:h为水平延伸,后面跟着一个数值为延伸的距离,负数为向左,正数为向右。

我们再来看a的参数:rx ry x-axis-rotation large-arc-flag sweep-flag x y,相当于水平半径,垂直半径,是否以x轴旋转,是否为大弧,是否顺时针,最终x坐标,最终y坐标

弧度(radians) = 角度(degrees) * Math.PI /180

角度(degrees) = 弧度(radians) * 180 / Math.PI

180 度大约等于 3.14…弧度。换句话讲,半圆为 pi 个弧度,整圆为 2 pi 个弧度,一个弧度大概为 57.29…度。

large-arc-flag:true sweep-flag:true,大弧,顺时针

<!doctype html> <html dir="ltr" lang="zh-CN"> <head> <meta charset="utf-8"/> <meta http-equiv="X-UA-Compatible" content="IE=8"> <script src="http://bloghighlighter.googlecode.com/files/raphael-min.js" type="text/javascript" ></script> <script type="text/javascript" charset="utf-8"> window.onload = function () { var paper = Raphael("canvas", 640, 480); paper.rect(0, 0, 640, 480,10).attr({fill: "#F2F1D7",stroke: "none"}); paper.path({"fill":"#a9ea00","stroke":"#c9c"},"M300,200 h-150 a150,150 0 1,1 150,-150 z"); }; </script> <title>扇形</title> </head> <body> <div id="canvas"></div> </body> </html>

large-arc-flag:true sweep-flag:false,大弧,逆时针

<!doctype html> <html dir="ltr" lang="zh-CN"> <head> <meta charset="utf-8"/> <meta http-equiv="X-UA-Compatible" content="IE=8"> <script src="http://bloghighlighter.googlecode.com/files/raphael-min.js" type="text/javascript" ></script> <script type="text/javascript" charset="utf-8"> window.onload = function () { var paper = Raphael("canvas", 640, 480); paper.rect(0, 0, 640, 480,10).attr({fill: "#F2F1D7",stroke: "none"}); paper.path({"fill":"#a9ea00","stroke":"#c9c"},"M300,200 h-150 a150,150 0 1,0 150,-150 z"); }; </script> <title>扇形</title> </head> <body> <div id="canvas"></div> </body> </html>

large-arc-flag:true sweep-flag:false,小弧,顺时针

<!doctype html> <html dir="ltr" lang="zh-CN"> <head> <meta charset="utf-8"/> <meta http-equiv="X-UA-Compatible" content="IE=8"> <script src="http://bloghighlighter.googlecode.com/files/raphael-min.js" type="text/javascript" ></script> <script type="text/javascript" charset="utf-8"> window.onload = function () { var paper = Raphael("canvas", 640, 480); paper.rect(0, 0, 640, 480,10).attr({fill: "#F2F1D7",stroke: "none"}); paper.path({"fill":"#a9ea00","stroke":"#c9c"},"M300,200 h-150 a150,150 0 0,1 150,-150 z"); }; </script> <title>扇形</title> </head> <body> <div id="canvas"></div> </body> </html>

large-arc-flag:false sweep-flag:false,小弧,逆时针

<!doctype html> <html dir="ltr" lang="zh-CN"> <head> <meta charset="utf-8"/> <meta http-equiv="X-UA-Compatible" content="IE=8"> <script src="http://bloghighlighter.googlecode.com/files/raphael-min.js" type="text/javascript" ></script> <script type="text/javascript" charset="utf-8"> window.onload = function () { var paper = Raphael("canvas", 640, 480); paper.rect(0, 0, 640, 480,10).attr({fill: "#F2F1D7",stroke: "none"}); paper.path({"fill":"#a9ea00","stroke":"#c9c"},"M300,200 h-150 a150,150 0 0,0 150,-150 z"); }; </script> <title>扇形</title> </head> <body> <div id="canvas"></div> </body> </html>

画出40%在圆中所占的比例。

<!doctype html> <html dir="ltr" lang="zh-CN"> <head> <meta charset="utf-8"/> <meta http-equiv="X-UA-Compatible" content="IE=8"> <script src="http://bloghighlighter.googlecode.com/files/raphael-min.js" type="text/javascript" ></script> <script type="text/javascript" charset="utf-8"> window.onload = function () { var paper = Raphael("holder", 700, 700); paper.rect(0, 0, 640, 480,10).attr({fill: "#F2F1D7",stroke: "none"});//设置画板 var angleplus = 360 * 40 / 100,//360度乘以40% angle = 0, startAngle = angle, endAngle =angle+angleplus, r = 200, cx = 300, cy = 300, rad = Math.PI / 180, x1 = cx + r * Math.cos(-startAngle * rad), x2 = cx + r * Math.cos(-endAngle * rad),//转化为弧度,再然半径,再加圆心的x坐标,得出变化后x坐标 y1 = cy + r * Math.sin(-startAngle * rad), y2 = cy + r * Math.sin(-endAngle * rad); var path = ["M", cx, cy, "L", x1, y1, "A", r, r, 0, +(endAngle - startAngle > 180), 0, x2, y2, "z"] path = path.join(" ") paper.path({fill:"red"},path) }; </script> <title>画出40%在圆中所占的比例</title> <style type="text/css" media="screen"> #holder { width: 700px; height: 700px; } </style> </head> <body> <p>画出40%在圆中所占的比例</p> <div id="holder"></div> </body> </html>

初级饼图

<!doctype html> <html dir="ltr" lang="zh-CN"> <head> <meta charset="utf-8"/> <meta http-equiv="X-UA-Compatible" content="IE=8"> <script src="http://bloghighlighter.googlecode.com/files/raphael-min.js" type="text/javascript" ></script> <script type="text/javascript" charset="utf-8"> window.onload = function () { var paper = Raphael("holder", 700, 700); paper.rect(0, 0, 640, 480,10).attr({fill: "#F2F1D7",stroke: "none"});//设置画板 /* *cx:圆心x坐标 *cy:圆心y坐标 *r:圆的半径 *oc:occupancy ,占有率 **/ function drawSector(cx,cy,r,paper,oc,startAngle){ var angleplus = 360 * oc / 100,//360度乘以40% startAngle = startAngle || 0, endAngle =startAngle+angleplus, rad = Math.PI / 180, x1 = cx + r * Math.cos(-startAngle * rad), x2 = cx + r * Math.cos(-endAngle * rad), y1 = cy + r * Math.sin(-startAngle * rad), y2 = cy + r * Math.sin(-endAngle * rad); var path = ["M", cx, cy, "L", x1, y1, "A", r, r, 0, +(endAngle - startAngle > 180), 0, x2, y2, "z"] path = path.join(" ") paper.path({fill:"red"},path); return endAngle } var ocs = [40,20,30,10]; for(var i=0,l=ocs.length,startAngle;i<l;i++){ startAngle = drawSector(300,300,100,paper,ocs[i],startAngle); } }; </script> <style type="text/css" media="screen"> #holder { width: 700px; height: 700px; } </style> <title>初级饼图</title> </head> <body> <p>初级饼图</p> <div id="holder"></div> </body> </html>

在javascript与flash的坐标系中,角度是以顺时针计算的,并以 0 度为起点 向正 X 轴引一条线,这就意味顺时针旋转角度为正角。逆时针就意味着为负角。

sin求出y轴的值,cos求出x轴的值。

  • lineTo:画一条直线
  • cplineTo:画一条三次方贝塞尔曲线(传入三个参数)
  • curveTo:画一条方贝塞尔曲线(二次或三次)
  • qcurveTo:画一条二次方方贝塞尔曲线
  • arcTo:画一个弧(参数:rx, ry, large_arc_flag, sweep_flag, x2, y2)
<!doctype html> <html dir="ltr" lang="zh-CN"> <head> <meta charset="utf-8"/> <meta http-equiv="X-UA-Compatible" content="IE=8"> <script src="http://bloghighlighter.googlecode.com/files/raphael-min.js" type="text/javascript" ></script> <script type="text/javascript" charset="utf-8"> window.onload = function () { var paper = Raphael("holder", 800, 300); paper.rect(0, 0, 798, 298, 10).attr({fill:"#FBFBEA",stroke:"#000","stroke-width":"1px"}); var circle = paper.circle(60, 60, 20).attr({fill:"#a9ea00",stroke:"#000","stroke-width":"1px"}); circle.mouseover(function(){ circle.attr({"r":40}); }); circle.mouseout(function(){ circle.attr({"r":20}); }); }; </script> <title>事件</title> </head> <body> <p>事件</p> <div id="holder"></div> </body> </html>

画虚线要用stroke-dasharray属性,同时不能共用stroke-width属性。

<!doctype html> <html dir="ltr" lang="zh-CN"> <head> <meta charset="utf-8"/> <meta http-equiv="X-UA-Compatible" content="IE=8"> <script src="http://bloghighlighter.googlecode.com/files/raphael-min.js" type="text/javascript" ></script> <script type="text/javascript" charset="utf-8"> window.onload = function () { var paper = Raphael("holder", 800, 400); paper.rect(0, 0, 798, 398, 10).attr({fill:"#EEFFEE",stroke:"#000","stroke-width":"1px"}); var style = {fill:"#B3E2D5",stroke: "#666","stroke-dasharray":"- "} paper.circle(200, 200, 150).attr(style);//第一环 paper.circle(200, 200, 110).attr(style);//第二环 paper.circle(200, 200, 70).attr(style);//第三环 paper.circle(200, 200, 30).attr(style);//第四环 var path = ["M", 200, 50, "L", 350, 200, "L", 200, 350, "L", 50, 200,"z"] path = path.join(" ") paper.path({fill:"red",opacity :0.7,stroke:"none"},path); //把Y当作高,X当作宽 //我以200*200为圆心,半径为150,那么上右下左的坐标应该为(200,50),(350,200),(200,350),(50,200) }; </script> <title>事件</title> </head> <body> <p>事件</p> <div id="holder"></div> </body> </html>

如果您觉得这文章对您有帮助,可以打赏点钱给我,鼓励我继续写博,我的支付宝

转自:http://www.cnblogs.com/rubylouvre/archive/2009/11/17/1572377.html

  评论这张
 
阅读(456)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017