注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

天涯倦客的博客

祝福你朋友永远快乐!

 
 
 

日志

 
 

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

2013-12-19 22:47:21|  分类: Raphael |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

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

 

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

 

Js代码  收藏代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3.   <head>  
  4.     <script type="text/javascript" src="js/raphael.js"></script>  
  5.     <script type="text/javascript" src="js/jquery-1.7.2.js"></script>  
  6.   
  7.     <style type="text/css">  
  8.         .wraper {  
  9.             position: relative;  
  10.             float: left;  
  11.             width: 400px;  
  12.             height: 400px;  
  13.             margin-left: 10px;  
  14.             margin-top: 10px;  
  15.             border: 1px solid orange;  
  16.         }  
  17.     </style>  
  18.     <script type="text/javascript">  
  19.         $(document).ready(function(){  
  20.   
  21.             /* 
  22.                 绘制椭圆曲线 
  23.             */  
  24.             var raphael_4 = new Raphael('raphael_4',400,400);  
  25.   
  26.             //绘制左上的椭圆  
  27.             raphael_4.ellipse(130,40,60,30);  
  28.             raphael_4.ellipse(70,70,60,30);  
  29.             raphael_4.path('M70,40 A60,30 0 0,0 130,70').attr('stroke','red');  
  30.             raphael_4.text(40,30,'start(70,40)')  
  31.                 .attr({  
  32.                     'font-size':11,  
  33.                     'fill':'blue'  
  34.                 });  
  35.             raphael_4.text(160,80,'end(130,70)')  
  36.                 .attr({  
  37.                     'font-size':11,  
  38.                     'fill':'blue'  
  39.                 });  
  40.   
  41.             raphael_4.text(70,120,'large-arc-flag=0\nsweep-flag=0')  
  42.                 .attr({  
  43.                     'font-size': 11,  
  44.                     'fill''green',  
  45.                     'text-anchor''start'  
  46.                 });  
  47.               
  48.             //绘制右上的椭圆  
  49.             raphael_4.ellipse(330,40,60,30);  
  50.             raphael_4.ellipse(270,70,60,30);  
  51.             raphael_4.path('M270,40 A60,30 0 0,1 330,70').attr('stroke','red');  
  52.             raphael_4.text(240,30,'start(270,40)')  
  53.                 .attr({  
  54.                     'font-size':11,  
  55.                     'fill':'blue'  
  56.                 });  
  57.             raphael_4.text(360,80,'end(330,70)')  
  58.                 .attr({  
  59.                     'font-size':11,  
  60.                     'fill':'blue'  
  61.                 });  
  62.             raphael_4.text(270,120,'large-arc-flag=0\nsweep-flag=1')  
  63.                 .attr({  
  64.                     'font-size': 11,  
  65.                     'fill''green',  
  66.                     'text-anchor''start'  
  67.                 });  
  68.   
  69.             //绘制左下的椭圆  
  70.             raphael_4.ellipse(130,240,60,30);  
  71.             raphael_4.ellipse(70,270,60,30);  
  72.             raphael_4.path('M70,240 A60,30 0 1,0 130,270').attr('stroke','red');  
  73.             raphael_4.text(40,230,'start(70,240)')  
  74.                 .attr({  
  75.                     'font-size':11,  
  76.                     'fill':'blue'  
  77.                 });  
  78.             raphael_4.text(160,280,'end(130,270)')  
  79.                 .attr({  
  80.                     'font-size':11,  
  81.                     'fill':'blue'  
  82.                 });  
  83.             raphael_4.text(70,320,'large-arc-flag=1\nsweep-flag=0')  
  84.                 .attr({  
  85.                     'font-size': 11,  
  86.                     'fill''green',  
  87.                     'text-anchor''start'  
  88.                 });  
  89.               
  90.             //绘制右下的椭圆  
  91.             raphael_4.ellipse(330,240,60,30);  
  92.             raphael_4.ellipse(270,270,60,30);  
  93.             raphael_4.path('M270,240 A60,30 0 1,1 330,270').attr('stroke','red');  
  94.             raphael_4.text(240,230,'start(270,240)')  
  95.                 .attr({  
  96.                     'font-size':11,  
  97.                     'fill':'blue'  
  98.                 });  
  99.             raphael_4.text(360,280,'end(330,270)')  
  100.                 .attr({  
  101.                     'font-size':11,  
  102.                     'fill':'blue'  
  103.                 });  
  104.             raphael_4.text(270,320,'large-arc-flag=1\nsweep-flag=1')  
  105.                 .attr({  
  106.                     'font-size': 11,  
  107.                     'fill''green',  
  108.                     'text-anchor''start'  
  109.                 });  
  110.               
  111.   
  112.         });  
  113.           
  114.     </script>  
  115.   </head>   
  116.     
  117.   <body>  
  118.       
  119.     <div id="raphael_4" class="wraper"></div>  
  120.   
  121.   </body>  
  122. </html>  
 

代码实现的效果:

 


  评论这张
 
阅读(429)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017