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 lineto x+
- 竖直直线 V(v) vertical lineto y+
- 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" class="wraper"></div>
</body>
</html>
实现的效果: