用Raphael在网页中画圆环进度条(简化版)

上篇写了用Raphael画圆环进度条(http://boytnt.blog.51cto.com/966121/1074215),这一篇把它简化一下,只画一条比较粗的弧,优点是简单,缺点是不能做渐变色了。

先上效果图,其实也不差是吧:

然后是代码,基本思想与上一篇完全相同:

  
  
  
  
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
  2.  
  3. <html xmlns="http://www.w3.org/1999/xhtml" > 
  4. <head> 
  5. <title>圆形进度条(简化版)</title> 
  6. <meta http-equiv="Content-Type" content="text/html; charset=gb2312"/> 
  7. <script src="jquery-1.4.2.js"></script> 
  8. <script src="raphael-min.js"></script> 
  9. <style> 
  10. #txt{ 
  11.     width:74px; 
  12.     height:74px; 
  13.     line-height:74px; 
  14.     position:absolute; 
  15.     margin-top:-74px; 
  16.     text-align:center; 
  17.     color:#9e9fa3; 
  18.     font-size:18px; 
  19.     font-family:Arial; 
  20. </style> 
  21. <script> 
  22.  
  23. var demo = { 
  24.      
  25.     paper: null
  26.  
  27.     init: function(){ 
  28.         //初始化Raphael画布 
  29.         this.paper = Raphael("bg", 74, 74); 
  30.  
  31.         //把底图先画上去 
  32.         this.paper.image("progressBg.png", 0, 0, 74, 74); 
  33.  
  34.         //进度比例,0到1,在本例中我们画65% 
  35.         //需要注意,下面的算法不支持画100%,要按99.99%来画 
  36.         var percent = 0.79, 
  37.             drawPercent = percent >= 1 ? 0.9999 : percent; 
  38.  
  39.         //由于只画一条弧,所以参数简单多了,只用计算弧的起点和终点就好了,与上一篇相比简化了许多 
  40.         var r = 28.5, PI = Math.PI, 
  41.             p1 = { 
  42.                 x:37, 
  43.                 y:66 
  44.             }, 
  45.             p2 = { 
  46.                 x:p1.x + r * Math.sin(2 * PI * (1 - drawPercent)), 
  47.                 y:p1.y - r + r * Math.cos(2 * PI * (1 - drawPercent)) 
  48.             }, 
  49.             path = [ 
  50.                 'M', p1.x, ' ', p1.y, 
  51.                 'A', r, ' ', r, ' 0 ', percent > 0.5 ? 1 : 0, ' 1 ', p2.x, ' ', p2.y 
  52.             ].join(''); 
  53.  
  54.         this.paper.path(path) 
  55.             //线的粗线为6 
  56.             .attr({"stroke-width":6, "stroke":"#c32ec3"}); 
  57.  
  58.         //显示进度文字 
  59.         $("#txt").text(Math.round(percent * 100) + "%"); 
  60.     } 
  61.  
  62. }; 
  63.  
  64. $(function(){ 
  65.     demo.init(); 
  66. }); 
  67. </script> 
  68. </head> 
  69. <body> 
  70.  
  71. <!-- 承载图形主体 --> 
  72. <div id="bg"></div> 
  73. <!-- 承载进度文字 --> 
  74. <div id="txt"></div> 
  75.  
  76. </body> 
  77. </html> 

PS:Raphael组件是基于MIT协议的,因此闭源商用没有任何问题,感谢作者提供了这么好用的东西。

 

你可能感兴趣的:(圆环进度条)