职业IT人-IT人生活圈

 找回密码
 成为会员
搜索
查看: 685|回复: 6

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

[复制链接]
找不到我 发表于 2011-7-15 11:25 | 显示全部楼层 |阅读模式
这章介绍路径,本人觉得这是比较难和精髓的一部分。

先介绍基本知识:

可以参考:
http://www.chinasvg.com/support/ ... irective-guide.html
  1. Js代码  
  2. /*  命令解释:   
  3.             M = moveto   参数:(x y)  

  4. /*  命令解释:
  5.                         M = moveto   参数:(x y)Js代码  
  6. L = lineto  参数:(x y)  

  7.                         L = lineto  参数:(x y)Js代码  
  8. H = horizontal lineto    参数:(x)  

  9.                         H = horizontal lineto    参数:(x)Js代码  
  10. V = vertical lineto   参数:(y)  

  11.                         V = vertical lineto   参数:(y)Js代码  
  12. C = curveto   参数:(x1 y1 x2 y2 x y)  

  13.                         C = curveto   参数:(x1 y1 x2 y2 x y)Js代码  
  14. S = smooth curveto   参数:(x2 y2 x y)  

  15.                         S = smooth curveto   参数:(x2 y2 x y)Js代码  
  16. Q = quadratic Belzier curve   参数:(x1 y1 x y)  

  17.                         Q = quadratic Belzier curve   参数:(x1 y1 x y)Js代码  
  18. T = smooth quadratic Belzier curveto   参数:(x y)  

  19.                         T = smooth quadratic Belzier curveto   参数:(x y)Js代码  
  20. A = elliptical Arc    参数:(rx ry x-axis-rotation large-arc-flag sweep-flag x y)  

  21.                         A = elliptical Arc    参数:(rx ry x-axis-rotation large-arc-flag sweep-flag x y)Js代码  
  22. Z = closepath   参数(none)   
  23. /  

  24.                         Z = closepath   参数(none)
  25.                 */
  26. 例子:
  27. Js代码  
  28. var p1 = paper.path('M250 150 L180 350 L350 350 Z').attr({stroke:'red','stroke-width':2});   
  29.            
  30. var p2 = paper.path('M350,100 h-100 a100,100 0 1,0 100,-100 z').attr({stroke:'blue','stroke-width':2});   
  31.            
  32. var p3 = paper.path('M350,300 a100,100 0 1,0 100,-100 z').attr({stroke:'green','stroke-width':2});   
  33.            
  34. var p4 = paper.path('M150 100 L100 200 Z').attr({'stroke-width':2});   
  35. var p5 = paper.path('M100 100 L150 200 Z').attr({'stroke-width':2});  

  36. var p1 = paper.path('M250 150 L180 350 L350 350 Z').attr({stroke:'red','stroke-width':2});
  37.                
  38. var p2 = paper.path('M350,100 h-100 a100,100 0 1,0 100,-100 z').attr({stroke:'blue','stroke-width':2});
  39.                
  40. var p3 = paper.path('M350,300 a100,100 0 1,0 100,-100 z').attr({stroke:'green','stroke-width':2});
  41.                
  42. var p4 = paper.path('M150 100 L100 200 Z').attr({'stroke-width':2});
  43. var p5 = paper.path('M100 100 L150 200 Z').attr({'stroke-width':2}); 注释:例子p1定义了一条路径,它开始于位置 250 150,到达位置 150 350,然后从那里开始到 350 350,最后在 250 150 关闭路径。
复制代码
fossil 发表于 2011-7-15 11:26 | 显示全部楼层
求一条直线的末端带个箭头怎么画。。

无处不在 发表于 2011-7-15 11:26 | 显示全部楼层
求一条直线的末端带个箭头怎么画。。

江南枫 发表于 2011-7-16 11:32 | 显示全部楼层
我假装认真地工作,老板假装认真地付薪水
木已 发表于 2011-7-21 11:13 | 显示全部楼层
今天再看下
yoyo 发表于 2011-7-22 10:32 | 显示全部楼层
我晕到了~~~
秋秋 发表于 2011-8-11 14:34 | 显示全部楼层
现在生意是越来越不好做了哦。。。。
您需要登录后才可以回帖 登录 | 成为会员

本版积分规则

QQ|手机版|小黑屋|网站帮助|职业IT人-IT人生活圈 ( 粤ICP备12053935号-1 )|网站地图
本站文章版权归原发布者及原出处所有。内容为作者个人观点,并不代表本站赞同其观点和对其真实性负责,本站只提供参考并不构成任何投资及应用建议。本站是信息平台,网站上部分文章为转载,并不用于任何商业目的,我们已经尽可能的对作者和来源进行了通告,但是能力有限或疏忽造成漏登,请及时联系我们,我们将根据著作权人的要求立即更正或者删除有关内容。

GMT+8, 2024-3-29 05:25 , Processed in 0.121844 second(s), 20 queries , Gzip On.

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

快速回复 返回顶部 返回列表