Raphael学习笔记（3）--绘图（路径【直线】）
?
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、绘图实例
?
下面让我们看看代码的书写：
?
<!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 = new Raphael('raphael_1',400,400);//绘制路径(三角形)raphael.path('M 160,100 L270,130 L200,170 z');//绘制路径(T型)raphael.path('M 50,190 H80 V220 H110 V250 H20 V220 H50 z');});</script> </head> <body><div id="raphael_1" src="/img/2012/11/10/120504254.png">?