使用Raphael 画图(四) 路径(一) (javascript)
2014-10-25 00:49
369 查看
这章介绍路径,本人觉得这是比较难和精髓的一部分。
先介绍基本知识:
可以参考:
http://www.chinasvg.com/support/svg-tutorial/svg-path-directive-guide.html
例子:
注释:例子p1定义了一条路径,它开始于位置 250 150,到达位置 150 350,然后从那里开始到 350 350,最后在 250 150 关闭路径。
效果图:
先介绍基本知识:
可以参考:
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 关闭路径。
效果图:
![](http://dl.iteye.com/upload/attachment/352715/8d04a1f1-536a-3f3a-80cb-b3a41967f041.jpg)
相关文章推荐
- 使用Raphael 画图 之 路径
- 使用Raphael 画图(一) 基本图形 (javascript)
- 使用Raphael 画图(三) 事件 (javascript)
- 使用Raphael 画图(二) 扩展的图形 (javascript)
- javascript中使用a标签获取当前目录的绝对路径方法
- JavaScript基础——使用Canvas画图
- JavaScript基础——使用Canvas画图
- JavaScript打开窗口函数(Window.Open)使用详解、绝对路径与相对路径的获取与转换(含ASP.NET)
- 使用JavaScript为一张图片设置备选路径的方法
- Javascript中使用A标签获取当前目录的绝对路径方法
- 使用javascript改变图片路径
- JavaScript基础——使用Canvas画图
- wpf 使用路径画图
- 使用Javascript获取当前目录的绝对路径
- JavaScript打开窗口函数(Window.Open)使用详解、绝对路径与相对路径的获取与转换
- Javascript中使用A标签获取当前目录的绝对路径方法
- JavaScript打开窗口函数(Window.Open)使用详解、绝对路径与相对路径的获取与转换(含ASP.NET)
- javaScript打开窗体函数的使用详解和路径转换问题
- 使用Javascript获取页面所在目录的绝对路径
- Javascript实战开发:教你使用raphael.js绘制中国地图