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

2021-09-21 23:49:09 字數 3000 閱讀 2322

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

先上效果圖:

效果還不錯吧?**其實也不複雜,拋磚引玉一下:

12

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

進度條由兩部分組成,首先是底圖 progressbg.png,74×74的png,把它用raphael的image方法先畫上去:

其次是用raphael畫進度部分,由兩條圓弧和兩條線段組成,見下圖:

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

12

3

4

5

m37 69

a31 31 0 1 1 62.079526825623375 19.778657178933337

l58.03444185374863 22.7175834403957

a26 26 0 1 0 37 64

z

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

◆ 第一行表示移動到(37, 69)這個點作為起點,也就是p1;

◆ 第二行表示畫一段圓弧,就是p1到p2之間的這一段;

◆ 第三行表示畫一條直線,就是p2到p3之間的這一段;

◆ 第四行表示畫一段圓板,已經p3到p4之間的這一段;

◆ 第五行表示封閉圖形,相當於從p4連回p1;

這其中比較複雜的是圓弧的引數,其引數是這樣的:

1a rx ry x-axis-rotation large-arc-flag sweep-flag x y

以第一段弧為例,各引數說明如下:

◆ rx和ry:弧的半長軸和半短軸長度,由於我們畫的是正圓,所以我們用的都是31;

◆ x-axix-rotation:此段弧的x軸與水平方向夾角,由於我們畫的是正圓,所以此引數沒用,填了0;

◆ large-arc-flag:大角度弧線還是小角度弧線,簡單點說就是畫圓的哪半邊,1表示大角度。由於我們畫的是65%的弧,是比較大的那半個弧,所以填了1。程式裡是做了判斷的;

◆ sweep-flag:繞中心的方向,1表示順時針,0表示逆時針。我們的第一段弧是順時針的,第二段是逆時針的;

◆ x和y:弧的終點座標;

想深入了解的同學可以參考一下這篇文章:講得挺不錯的。

ps:如果不需要漸變,直接畫一比較粗的圓弧就可以了,要簡單得多。

pps:不一定要畫正圓,小修改一下,我們也可以畫橢圓形的進度條。

在網頁中呼叫ActiveX

最主要的就是這個了,在html中加入object的標籤 1.如果是用vc開發,classid等資訊可以從控制項工程的.odl檔案來找 我的控制項如下 2.如果是用visual studio,可以用它自帶的小工具ole view 3.如果控制項已經被註冊了,可以直接檢視嘍 在js裡面呼叫ocx的函式則...

在網頁中應用CSS

1.外部樣式表 把css單獨放到乙個檔案裡,字尾名自然是.css,然後在html內引用 rel stylesheet type text css href mystyle.css head 2.內部樣式表 當單個文件需要特殊的樣式時,可以使用內部樣式表。顧名思義就是把css寫在html檔案內部,可以...

在網頁中顯示CHM

chm即 已編譯的幫助檔案 主要由.hhc 目錄檔案 hhk 索引檔案 以及相應的幫助主題檔案 html,htm 這些內容編譯而成。方法對比 在網頁中顯示chm內容,大致有以下幾種辦法 依然是反編譯這些檔案,把相關目錄及html檔案內容直接存到資料庫中 直接解析chm檔案 這些方法有優點也有缺點 方...