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、椭圆曲线实例
为了更好的理解上面的参数描述,请看下面的代码:
<!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>
代码实现的效果: