20121130102900615  

<!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.65,
drawPercent = percent >= 1 ? 0.9999 : percent;

 

開始計算各點的位置,見後圖
r1是內圓半徑,r2是外圓半徑
var r1 = 26, r2 = 31, PI = Math.PI,
p1 = {
x:37,
y:69
},
p4 = {
x:p1.x,
y:p1.y - r2 + r1
},
p2 = {
x:p1.x + r2 * Math.sin(2 * PI * (1 - drawPercent)),
y:p1.y - r2 + r2 * Math.cos(2 * PI * (1 - drawPercent))
},
p3 = {
x:p4.x + r1 * Math.sin(2 * PI * (1 - drawPercent)),
y:p4.y - r1 + r1 * Math.cos(2 * PI * (1 - drawPercent))
},
path = [
'M', p1.x, ' ', p1.y,
'A', r2, ' ', r2, ' 0 ', percent > 0.5 ? 1 : 0, ' 1 ', p2.x, ' ', p2.y,
'L', p3.x, ' ', p3.y,
'A', r1, ' ', r1, ' 0 ', percent > 0.5 ? 1 : 0, ' 0 ', p4.x, ' ', p4.y,
'Z'
].join('');

 

用path方法畫圖形,由兩段圓弧和兩條直線組成,畫弧線的演算法見後 www.it165.net
this.paper.path(path)
填充漸變色,從#3f0b3f到#ff66ff
.attr({"stroke-width":0.5, "stroke":"#c32ec3", "fill":"90-#3f0b3f-#ff66ff"});

 

顯示進度文字
$("#txt").text(Math.round(percent * 100) + "%");
}

 

};

 

$(function(){
demo.init();
});
</script>
</head>
<body>

 

<!-- 承載圖形主體 -->
<div id="bg"></div>
<!-- 承載進度文字 -->
<div id="txt"></div>

 

</body>
</html>

 

創作者介紹
創作者 shadow 的頭像
shadow

資訊園

shadow 發表在 痞客邦 留言(0) 人氣()