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、绘图实例

 

下面让我们看看代码的书写：

<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" src="/health/svg/js/raphael.js"></script>
<script type="text/javascript" src="/health/svg/js/jquery.js"></script>
<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');  

}); 

 实现的效果：