raphaeljs图形库学习笔记

最新推荐文章于 2024-09-26 01:42:12 发布

weixin_33805743

最新推荐文章于 2024-09-26 01:42:12 发布

阅读量68

点赞数

文章标签： javascript ViewUI

官网地址：点我


<!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);
        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，大弧，顺时针

运行代码

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

运行代码

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

运行代码

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

运行代码

画出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）

运行代码

画虚线要用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>

运行代码