首页 > 代码库 > 使用Raphael 画图(四) 路径(一) (javascript)
使用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 关闭路径。
效果图：
使用Raphael 画图(四) 路径(一) (javascript)
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。