码迷,mamicode.com
首页 > 编程语言 > 详细

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

时间:2014-10-25 01:59:48      阅读:270      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   color   io   os   ar   使用   java   

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

 先介绍基本知识:

 可以参考:

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 关闭路径。

 效果图:

bubuko.com,布布扣

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

标签:style   blog   http   color   io   os   ar   使用   java   

原文地址:http://www.cnblogs.com/kt520/p/4049609.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!