SVG -椭圆曲线简介

最新推荐文章于 2024-01-17 15:37:13 发布

零度空间0520

最新推荐文章于 2024-01-17 15:37:13 发布

阅读量783

点赞数

1、椭圆曲线简介

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、椭圆曲线实例

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

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
        <script type="text/javascript" src="js/raphael.js"></script>
        <script type="text/javascript" src="js/jquery-1.7.2.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>