Raphael学习笔记（5）--绘图（路径【椭圆曲线】）

 

1、椭圆曲线简介

 

 

前面的学习笔记：Raphael学习笔记（3）--绘图（路径【直线】）简单的描述了绘制椭圆曲线的参数，但没有详细的介绍各个参数的含义，这次，我们就详细的学习一下椭圆曲线的绘制。

 

A(a) elliptical arc (rx ry x-axis-rotation large-arc-flag sweep-flag x y) ；

 

参数含义：

rx：横轴的长度；

ry：纵轴的长度；

x-axis-rotation：椭圆的横轴与x轴的角度；

large-arc-flag：区分弧度的大小（0表示小角度弧度，1表示大角度弧度）；

sweep-flag：绘制弧度围绕椭圆中心的方向（0表示逆时针方向，1表示顺时针方向）；

x y：椭圆曲线终点坐标；

 

2、椭圆曲线实例

 

为了更好的理解上面的参数描述，请看下面的代码：

<script type="text/javascript" src="/health/svg/js/raphael.js"></script>
<script type="text/javascript" src="/health/svg/js/jquery.js"></script>

<style type="text/css">  
        .wraper {  
            position: relative;  
            float: left;  
            width: 400px;  
            height: 400px;  
            margin-left: 10px;  
            margin-top: 10px;  
            border: 1px solid orange;  
        }  
    </style>  
    <script type="text/javascript">  
        $(document).ready(function(){  
 
            /*
                绘制椭圆曲线
            */  
            var raphael_4 = new Raphael('raphael_4',400,400);  
 
            //绘制左上的椭圆  
            raphael_4.ellipse(130,40,60,30);  
            raphael_4.ellipse(70,70,60,30);  
            raphael_4.path('M70,40 A60,30 0 0,0 130,70').attr('stroke','red');  
            raphael_4.text(40,30,'start(70,40)')  
                .attr({  
                    'font-size':11,  
                    'fill':'blue'  
                });  
            raphael_4.text(160,80,'end(130,70)')  
                .attr({  
                    'font-size':11,  
                    'fill':'blue'  
                });  
 
            raphael_4.text(70,120,'large-arc-flag=0\nsweep-flag=0')  
                .attr({  
                    'font-size': 11,  
                    'fill': 'green',  
                    'text-anchor': 'start'  
                });  
              
            //绘制右上的椭圆  
            raphael_4.ellipse(330,40,60,30);  
            raphael_4.ellipse(270,70,60,30);  
            raphael_4.path('M270,40 A60,30 0 0,1 330,70').attr('stroke','red');  
            raphael_4.text(240,30,'start(270,40)')  
                .attr({  
                    'font-size':11,  
                    'fill':'blue'  
                });  
            raphael_4.text(360,80,'end(330,70)')  
                .attr({  
                    'font-size':11,  
                    'fill':'blue'  
                });  
            raphael_4.text(270,120,'large-arc-flag=0\nsweep-flag=1')  
                .attr({  
                    'font-size': 11,  
                    'fill': 'green',  
                    'text-anchor': 'start'  
                });  
 
            //绘制左下的椭圆  
            raphael_4.ellipse(130,240,60,30);  
            raphael_4.ellipse(70,270,60,30);  
            raphael_4.path('M70,240 A60,30 0 1,0 130,270').attr('stroke','red');  
            raphael_4.text(40,230,'start(70,240)')  
                .attr({  
                    'font-size':11,  
                    'fill':'blue'  
                });  
            raphael_4.text(160,280,'end(130,270)')  
                .attr({  
                    'font-size':11,  
                    'fill':'blue'  
                });  
            raphael_4.text(70,320,'large-arc-flag=1\nsweep-flag=0')  
                .attr({  
                    'font-size': 11,  
                    'fill': 'green',  
                    'text-anchor': 'start'  
                });  
              
            //绘制右下的椭圆  
            raphael_4.ellipse(330,240,60,30);  
            raphael_4.ellipse(270,270,60,30);  
            raphael_4.path('M270,240 A60,30 0 1,1 330,270').attr('stroke','red');  
            raphael_4.text(240,230,'start(270,240)')  
                .attr({  
                    'font-size':11,  
                    'fill':'blue'  
                });  
            raphael_4.text(360,280,'end(330,270)')  
                .attr({  
                    'font-size':11,  
                    'fill':'blue'  
                });  
            raphael_4.text(270,320,'large-arc-flag=1\nsweep-flag=1')  
                .attr({  
                    'font-size': 11,  
                    'fill': 'green',  
                    'text-anchor': 'start'  
                });  
              
 
        });  
          
    </script>  
  </head>   
    
  <body>  
      
    <div id="raphael_4" class="wraper"></div>  
 
  </body>  
</html> 

代码实现的效果：