使用Raphael 画图(四) 路径(一) (javascript)

这章介绍路径，本人觉得这是比较难和精髓的一部分。

 

先介绍基本知识：

 

可以参考：

http://www.chinasvg.com/support/svg-tutorial/svg-path-directive-guide.html

 

 

/*  命令解释：
			M = moveto   参数:(x y)

			L = lineto  参数:(x y)

			H = horizontal lineto    参数:(x)

			V = vertical lineto   参数:(y)

			C = curveto   参数:(x1 y1 x2 y2 x y)

			S = smooth curveto   参数:(x2 y2 x y)

			Q = quadratic Belzier curve   参数:(x1 y1 x y)

			T = smooth quadratic Belzier curveto   参数:(x y)

			A = elliptical Arc    参数:(rx ry x-axis-rotation large-arc-flag sweep-flag x y)

			Z = closepath   参数(none)
		*/

 

例子：

var p1 = paper.path('M250 150 L180 350 L350 350 Z').attr({stroke:'red','stroke-width':2});
		
var p2 = paper.path('M350,100 h-100 a100,100 0 1,0 100,-100 z').attr({stroke:'blue','stroke-width':2});
		
var p3 = paper.path('M350,300 a100,100 0 1,0 100,-100 z').attr({stroke:'green','stroke-width':2});
		
var p4 = paper.path('M150 100 L100 200 Z').attr({'stroke-width':2});
var p5 = paper.path('M100 100 L150 200 Z').attr({'stroke-width':2});

 注释：例子p1定义了一条路径，它开始于位置 250 150，到达位置 150 350，然后从那里开始到 350 350，最后在 250 150 关闭路径。

 

效果图：

 

评论

2 楼 fx_feng 2011-06-02  

hpyhgz 写道

求一条直线的末端带个箭头怎么画。。

1 楼 hpyhgz 2010-12-30  

求一条直线的末端带个箭头怎么画。。