首頁 > 開發者 > 網站開發

用Raphael在網頁中畫圓環進度條

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

條狀的進度條我們見得太多了，實現起來比較簡單，它總是長方形的，在方形的地區裡擺放就不太好看了。隨著css3的出現，圓環狀的進度條開始用得越來越多，不過由於IE6/7/8不支援css3，我們只能換其它方法來實現。本文就採用Raphael來畫一個，這個組件對svg和vml進行了一個統一的封裝，根據瀏覽器使用不同的技術實現繪製，因此IE也能用。

先上：

650) this.width=650;" src="http://www.bkjia.com/uploads/allimg/131228/12250H2B-0.png" border="0" alt="" />


效果還不錯吧？代碼其實也不複雜，拋磚引玉一下：

 
    
  
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    2. 
  
  2.  
    3. 
  
  3. <html xmlns="http://www.w3.org/1999/xhtml" > 
    4. 
  
  4. <head> 
    5. 
  
  5. <title>圓形進度條</title> 
    6. 
  
  6. <meta http-equiv="Content-Type" content="text/html; charset=gb2312"/> 
    7. 
  
  7. <script src="jquery-1.4.2.js"></script> 
    8. 
  
  8. <script src="raphael-min.js"></script> 
    9. 
  
  9. <style> 
    10. 
  
  10. #txt{ 
    11. 
  
  11.     width:74px; 
    12. 
  
  12.     height:74px; 
    13. 
  
  13.     line-height:74px; 
    14. 
  
  14.     position:absolute; 
    15. 
  
  15.     margin-top:-74px; 
    16. 
  
  16.     text-align:center; 
    17. 
  
  17.     color:#9e9fa3; 
    18. 
  
  18.     font-size:18px; 
    19. 
  
  19.     font-family:Arial; 
    20. 
  
  20. } 
    21. 
  
  21. </style> 
    22. 
  
  22. <script> 
    23. 
  
  23.  
    24. 
  
  24. var demo = { 
    25. 
  
  25.      
    26. 
  
  26.     paper: null, 
    27. 
  
  27.  
    28. 
  
  28.     init: function(){ 
    29. 
  
  29.         //初始化Raphael畫布 
    30. 
  
  30.         this.paper = Raphael("bg", 74, 74); 
    31. 
  
  31.  
    32. 
  
  32.         //把底圖先畫上去 
    33. 
  
  33.         this.paper.image("progressBg.png", 0, 0, 74, 74); 
    34. 
  
  34.  
    35. 
  
  35.         //進度比例，0到1，在本例中我們畫65% 
    36. 
  
  36.         //需要注意，下面的演算法不支援畫100%，要按99.99%來畫 
    37. 
  
  37.         var percent = 0.65, 
    38. 
  
  38.             drawPercent = percent >= 1 ? 0.9999 : percent; 
    39. 
  
  39.  
    40. 
  
  40.         //開始計算各點的位置，見後圖 
    41. 
  
  41.         //r1是內圓半徑，r2是外圓半徑 
    42. 
  
  42.         var r1 = 26, r2 = 31, PI = Math.PI, 
    43. 
  
  43.             p1 = { 
    44. 
  
  44.                 x:37,  
    45. 
  
  45.                 y:69 
    46. 
  
  46.             }, 
    47. 
  
  47.             p4 = { 
    48. 
  
  48.                 x:p1.x, 
    49. 
  
  49.                 y:p1.y - r2 + r1 
    50. 
  
  50.             }, 
    51. 
  
  51.             p2 = {  
    52. 
  
  52.                 x:p1.x + r2 * Math.sin(2 * PI * (1 - drawPercent)), 
    53. 
  
  53.                 y:p1.y - r2 + r2 * Math.cos(2 * PI * (1 - drawPercent)) 
    54. 
  
  54.             }, 
    55. 
  
  55.             p3 = { 
    56. 
  
  56.                 x:p4.x + r1 * Math.sin(2 * PI * (1 - drawPercent)), 
    57. 
  
  57.                 y:p4.y - r1 + r1 * Math.cos(2 * PI * (1 - drawPercent)) 
    58. 
  
  58.             }, 
    59. 
  
  59.             path = [ 
    60. 
  
  60.                 'M', p1.x, ' ', p1.y, 
    61. 
  
  61.                 'A', r2, ' ', r2, ' 0 ', percent > 0.5 ? 1 : 0, ' 1 ', p2.x, ' ', p2.y, 
    62. 
  
  62.                 'L', p3.x, ' ', p3.y, 
    63. 
  
  63.                 'A', r1, ' ', r1, ' 0 ', percent > 0.5 ? 1 : 0, ' 0 ', p4.x, ' ', p4.y, 
    64. 
  
  64.                 'Z' 
    65. 
  
  65.             ].join(''); 
    66. 
  
  66.  
    67. 
  
  67.         //用path方法畫圖形，由兩段圓弧和兩條直線組成，畫弧線的演算法見後 
    68. 
  
  68.         this.paper.path(path) 
    69. 
  
  69.             //填滿漸層色，從#3f0b3f到#ff66ff 
    70. 
  
  70.             .attr({"stroke-width":0.5, "stroke":"#c32ec3", "fill":"90-#3f0b3f-#ff66ff"}); 
    71. 
  
  71.  
    72. 
  
  72.         //顯示進度文字 
    73. 
  
  73.         $("#txt").text(Math.round(percent * 100) + "%"); 
    74. 
  
  74.     } 
    75. 
  
  75.  
    76. 
  
  76. }; 
    77. 
  
  77.  
    78. 
  
  78. $(function(){ 
    79. 
  
  79.     demo.init(); 
    80. 
  
  80. }); 
    81. 
  
  81. </script> 
    82. 
  
  82. </head> 
    83. 
  
  83. <body> 
    84. 
  
  84.  
    85. 
  
  85. <!-- 承載圖形主體 --> 
    86. 
  
  86. <div id="bg"></div> 
    87. 
  
  87. <!-- 承載進度文字 --> 
    88. 
  
  88. <div id="txt"></div> 
    89. 
  
  89.  
    90. 
  
  90. </body> 
    91. 
  
  91. </html> 
    92.


進度條由兩部分組成，首先是底圖 progressBg.png，74×74的png圖片，把它用Raphael的image方法先畫上去：

650) this.width=650;" src="http://www.bkjia.com/uploads/allimg/131228/12250L102-1.png" border="0" alt="" />

其次是用Raphael畫進度部分，由兩條圓弧和兩條線段組成，見：

650) this.width=650;" src="http://www.bkjia.com/uploads/allimg/131228/12250M527-2.png" border="0" alt="" />

先從p1畫順時針圓弧到p2，然後直線到p3，然後逆時針畫圓弧到p4，再直線收回p1。之後用漸層色填充一下。以65%時為例，描述這個圖形的path如下(基本上就是svg的文法)：

 
    
  
  1. M37 69
    2. 
  
  2. A31 31 0 1 1 62.079526825623375 19.778657178933337
    3. 
  
  3. L58.03444185374863 22.7175834403957
    4. 
  
  4. A26 26 0 1 0 37 64
    5. 
  
  5. Z 
    6.

看起來有點嚇人，其實分成幾部分來看就簡單了：

 ◆ 第一行表示移動到(37, 69)這個點作為起點，也就是p1；
 ◆ 第二行表示畫一段圓弧，就是p1到p2之間的這一段；
 ◆ 第三行表示畫一條直線，就是p2到p3之間的這一段；
 ◆ 第四行表示畫一段圓板，已經p3到p4之間的這一段；
 ◆ 第五行表示封閉圖形，相當於從p4連回p1；

這其中比較複雜的是圓弧的參數，其參數是這樣的：

 
    
  
  1. A  rx ry x-axis-rotation large-arc-flag sweep-flag x y 
    2.

以第一段弧為例，各參數說明如下：

 ◆ rx和ry：弧的半長軸和半短軸長度，由於我們畫的是正圓，所以我們用的都是31；
 ◆ x-axix-rotation：此段弧的x軸與水平方向夾角，由於我們畫的是正圓，所以此參數沒用，填了0；
 ◆ large-arc-flag：大角度弧線還是小角度弧線，簡單點說就是畫圓的哪半邊，1表示大角度。由於我們畫的是65%的弧，是比較大的那半個弧，所以填了1。程式裡是做了判斷的；
 ◆ sweep-flag：繞中心的方向，1表示順時針，0表示逆時針。我們的第一段弧是順時針的，第二段是逆時針的；
 ◆ x和y：弧的終點座標；

想深入瞭解的同學可以參考一下這篇文章：http://www.cnblogs.com/dxy1982/archive/2012/04/06/2395729.html，講得挺不錯的。

PS：如果不需要漸層，直接畫一比較粗的圓弧就可以了，要簡單得多。
PPS：不一定要畫正圓，小修改一下，我們也可以畫橢圓形的進度條。

 

本文出自 “兔子窩” 部落格，請務必保留此出處http://boytnt.blog.51cto.com/966121/1074215

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

相關關鍵詞：
raphael js examples
相關文章
H5 中html 頁面存為圖片並長按 儲存
__x__(20)0907第四天__ css 框模型

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

熱門內容

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More