raphaeljs图形库学习笔记

官网地址：点我

<!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>

</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属性。

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>

</body>
</html>