Raphael

1、路径简介

 

Paper.path(pathString):绘制路径;

参数含义:

pathString:描述路径的字符串;

 

下面详细描述一下路径字符串的内容和书写风格。

路径由2部分组成:命令和坐标。

(1)命令:单个大(小)写字母。大写字母表示绝对坐标,小写字母表示相对坐标;

(2)坐标:一个或多个数字。多个数字之间使用逗号或者空格隔开;

(3)命令和坐标之间可以有空格,也可以省略空格;

 

移动坐标 M(m)moveto(x y)+

结束路径 Z(z)closepath(none)

直线 L(l)lineto(x y)+

水平直线 H(h)horizontal linetox+

竖直直线 V(v)vertical linetoy+

3次贝塞尔曲线 C(c)curveto(x1 y1 x2 y2 x y)+

平滑3次贝塞尔曲线 S(s)smooth curveto(x2 y2 x y)+

2次贝塞尔曲线 Q(q)quadratic Bézier curveto(x1 y1 x y)+

平滑2次贝塞尔曲线 T(t)smooth quadratic Bézier curveto(x y)+

椭圆曲线 A(a)elliptical arc(rx ry x-axis-rotation large-arc-flag sweep-flag x y)+

 

绘制光滑的2次、3次贝塞尔曲线需要注意:

(1)后一段曲线的起点必须是前一段曲线的终点;

(2)前后2段曲线必须对称;

 

关于贝赛尔曲线的知识,可以参考下面的文章:canvas中的贝赛尔曲线

 

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.             var raphael = new Raphael('raphael_1',400,400);  
  21.   
  22.             //绘制路径(三角形)  
  23.             raphael.path('M 160,100 L270,130 L200,170 z');  
  24.             //绘制路径(T型)  
  25.             raphael.path('M 50,190 H80 V220 H110 V250 H20 V220 H50 z');  
  26.   
  27.         });  
  28.           
  29.     </script>  
  30.   </head>   
  31.     
  32.   <body>  
  33.       
  34.     <div id="raphael_1" class="wraper"></div>  
  35.   
  36.   </body>  
  37. </html>  

 实现的效果:


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值