上篇写了用Raphael画圆环进度条(http://boytnt.blog.51cto.com/966121/1074215),这一篇把它简化一下,只画一条比较粗的弧,优点是简单,缺点是不能做渐变色了。
先上效果图,其实也不差是吧:
然后是代码,基本思想与上一篇完全相同:
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml" >
- <head>
- <title>圆形进度条(简化版)</title>
- <meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
- <script src="jquery-1.4.2.js"></script>
- <script src="raphael-min.js"></script>
- <style>
- #txt{
- width:74px;
- height:74px;
- line-height:74px;
- position:absolute;
- margin-top:-74px;
- text-align:center;
- color:#9e9fa3;
- font-size:18px;
- font-family:Arial;
- }
- </style>
- <script>
- var demo = {
- paper: null,
- init: function(){
- //初始化Raphael画布
- this.paper = Raphael("bg", 74, 74);
- //把底图先画上去
- this.paper.image("progressBg.png", 0, 0, 74, 74);
- //进度比例,0到1,在本例中我们画65%
- //需要注意,下面的算法不支持画100%,要按99.99%来画
- var percent = 0.79,
- drawPercent = percent >= 1 ? 0.9999 : percent;
- //由于只画一条弧,所以参数简单多了,只用计算弧的起点和终点就好了,与上一篇相比简化了许多
- var r = 28.5, PI = Math.PI,
- p1 = {
- x:37,
- y:66
- },
- p2 = {
- x:p1.x + r * Math.sin(2 * PI * (1 - drawPercent)),
- y:p1.y - r + r * Math.cos(2 * PI * (1 - drawPercent))
- },
- path = [
- 'M', p1.x, ' ', p1.y,
- 'A', r, ' ', r, ' 0 ', percent > 0.5 ? 1 : 0, ' 1 ', p2.x, ' ', p2.y
- ].join('');
- this.paper.path(path)
- //线的粗线为6
- .attr({"stroke-width":6, "stroke":"#c32ec3"});
- //显示进度文字
- $("#txt").text(Math.round(percent * 100) + "%");
- }
- };
- $(function(){
- demo.init();
- });
- </script>
- </head>
- <body>
- <!-- 承载图形主体 -->
- <div id="bg"></div>
- <!-- 承载进度文字 -->
- <div id="txt"></div>
- </body>
- </html>
PS:Raphael组件是基于MIT协议的,因此闭源商用没有任何问题,感谢作者提供了这么好用的东西。
本文转自 BoyTNT 51CTO博客,原文链接:http://blog.51cto.com/boytnt/1074691,如需转载请自行联系原作者