这章介绍路径,本人觉得这是比较难和精髓的一部分。
先介绍基本知识:
可以参考:
http://www.chinasvg.com/support/ ... irective-guide.html- Js代码
- /* 命令解释:
- M = moveto 参数:(x y)
- /* 命令解释:
- M = moveto 参数:(x y)Js代码
- L = lineto 参数:(x y)
- L = lineto 参数:(x y)Js代码
- H = horizontal lineto 参数:(x)
- H = horizontal lineto 参数:(x)Js代码
- V = vertical lineto 参数:(y)
- V = vertical lineto 参数:(y)Js代码
- C = curveto 参数:(x1 y1 x2 y2 x y)
- C = curveto 参数:(x1 y1 x2 y2 x y)Js代码
- S = smooth curveto 参数:(x2 y2 x y)
- S = smooth curveto 参数:(x2 y2 x y)Js代码
- Q = quadratic Belzier curve 参数:(x1 y1 x y)
- Q = quadratic Belzier curve 参数:(x1 y1 x y)Js代码
- T = smooth quadratic Belzier curveto 参数:(x y)
- T = smooth quadratic Belzier curveto 参数:(x y)Js代码
- A = elliptical Arc 参数:(rx ry x-axis-rotation large-arc-flag sweep-flag x y)
- A = elliptical Arc 参数:(rx ry x-axis-rotation large-arc-flag sweep-flag x y)Js代码
- Z = closepath 参数(none)
- /
- Z = closepath 参数(none)
- */
- 例子:
- Js代码
- 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});
- 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 关闭路径。
复制代码 |