Raphael学习笔记（3）--绘图（路径【直线】）

lib

浏览: 133382 次
性别:
来自: 济南

最近访客更多访客>>

xuecaobao123

书生Zhuang

ananiah

max530

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

web前端
绘图
raphael

web前端绘图 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 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>

实现的效果：