VB如何做到色彩漸層表單?

sshot-1

要如何讓VB背景底色變成如上圖漂亮的漸層呢?快看下去吧!

我們都知道,VB預設的表單背景顏色是灰的,實在是非常單調(如下圖)。
sshot-2

就算使用VB表單內建的BackColor屬性,也只能將背景顏色調為單色的任意色(如下圖)。
sshot-3

雖然顏色改了,但還是有種單調、死板的感覺。所以說,如果想要讓VB表單背景顏色不要那麼死板、單調,就必須來個創新。這部分或許你會想要直接使用BMP檔案當作背景(Picture),可是BMP檔案占的容量大小其實是很大的,加入到程式中會讓程式變得十分龐大,執行起來也會比較緩慢。所以在本文中,並不是使用已設計好的BMP漸層顏色圖片,而是以表單繪圖的方式來達成色彩漸層。

如何在表單上繪製圖案

在本篇文章的教學中,是教各位如何使用「線性漸層」,也就是利用直線的方式,繪出數條不同顏色的直線排列,達成漸層的效果,所以在本篇文章中不會討論到「放射性漸層」(從裡到外排列的色彩漸層)。既然要在表單上繪製不同顏色的直線,我們須了解在表單繪製直線的方法。

直線(Line)

VB內有提供Line函數,可以直接在表單內畫上直線,所以使用起來並不會有太大的困難。

格式如下:

Line (起始點座標)-(終止點座標)

何謂「起始點座標」與「終止點座標」?在VB的表單中,最左上角的那個點為(0,0)。你可以把表單想像成一個平面座標系統,最左上角為(0,0),向右X增加,向下Y增加(預設單位為Twip)。

舉個例子:

Line (0,0)-(1000,1000)

若VB執行上面程式,則會在表單上的最左上角,到座標(1000,1000)畫一條斜直線,如下圖:
sshot-4

改變直線的顏色(ForeColor)

直線的顏色取決於表單的ForeColor屬性,更變ForeColor屬性後畫出的Line直線,顏色會等於ForeColor,如下圖:
sshot-5

256色碼轉換(RGB)

VB提供了RGB函數,能將RGB三原色的值(0~255),轉成一個十進位的數值。

格式如下:

RGB(R值(0~255),G值(0~255),B值(0~255))

舉例:

RGB(255, 255, 255)

R=255,G=255,B=255,這是白色的RGB值。經過RGB函數轉換後,會傳回「16777215」。而「16777215」再經由Hex函數(10進位轉16進位)傳回的值為「FFFFFF」。

RGB函數通常跟更改顏色的屬性合用,例如:

Form1.ForeColor=RGB(255, 255, 255)

經過以上的程式碼,Form1上畫出來的直線便會為白色的。如下圖:
sshot-6

直線寬度(DrawWidth)

VB表單提供了DrawWidth屬性(預設值為1),DrawWidth值愈大,畫出來得直線愈粗。下圖是DrawWidth=10時的Line變化:
sshot-7

自動重繪(AutoRedraw)

VB表單中有AutoRedraw屬性(預設值為False),AutoRedraw是自動重繪。

自動重繪是什麼?比較下面兩張圖就知道了:

sshot-8
sshot-9

上圖是AutoRedraw=True(開啟自動重繪)的情況,下圖是AutoRedraw=False(未開啟自動重繪)的情況。當AutoRedraw=False時,表單上的繪圖線段、文字、幾何,如果被其它視窗蓋住了,該部分就會被洗掉。當然,本文中所教的色彩漸層也是一樣,如果AutoRedraw=False,那麼如果表單被其它視窗蓋住,該部分的漸層又會回到原本的背景底色了,如下圖:
sshot-10

如何用畫線的方式達成色彩漸層

學會了Line的畫線方法,我們就可以開始思考如何用畫線的方式達成色彩漸層了。什麼是漸層?就是某顏色從某起始點,漸漸的轉為終點的另一顏色,而這個轉移過程,顏色絕對是成比例的,不然顏色就會斷斷續續,那就不叫漸層了。因此我們要取得起始顏色跟終點顏色的差值,再除以會出現的線數,來求其等差。要如何得知從起始顏色到終點顏色共會畫幾條線呢?我們可以看看表單的ScaleWidth屬性,或是ScaleHeight屬性。ScaleWidth是只表單內從最左邊到最右邊的單位大小,而ScaleHeight則是表單內最上面到最下面的單位大小。利用此兩種屬性,我們也可以繪製出正好等長於ScaleWidth或是ScaleHeight的線段。如果你是畫水平線,那麼ScaleHeight/DrawWidth將會是你線的數量,ScaleWidth將會是你線的長度;反之,如果你是畫垂直線,那麼ScaleWidth/DrawWidth將會是你線的數量,ScaleHeight將會是你線的長度。利用此方法便可以繪製出線性漸層了。

這樣說明你可能還是會霧煞煞,我們就來先做做看「由左到右」的線性漸層吧!

要做由左到右的色彩漸層,你覺得要如何畫線呢?從左到右線的顏色都是不同的,所以絕對是畫垂直線也就是起始點為(X,0)終點為(X,ScaleHeight)的直線,X為變數,就是你畫線的X位置,每畫一條線,X就必須加DrawWidth。每次畫線前,ForeColor就必須以等差的方式接近終點顏色。把這些項目都考慮到程式裡去後,就能夠寫出程式了!
sshot-11

程式碼提供

1
2
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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
Sub LineGradient(ByVal R1 As Single, G1 As Single, B1 As Single, R2 As Single, G2 As Single, B2 As Single, Types As Integer) '線性漸層副程式
'R1,G1,B1為起始的RGB顏色值,R2,G2,B2為終止的RGB顏色值,Types為漸層類型(1~5)

    Me.ScaleMode = 1 '以Twip為單位
    Me.AutoRedraw = True '開啟自動重繪
    Me.DrawWidth = 1 '愈小品質愈好,但愈LAG

    Dim Rd As Single, Gd As Single, Bd As Single '儲存RGB的單位差值
    Dim I As Integer 'I為For迴圈的計次變數
    Select Case Types
        Case 1 '左到右漸層
            Rd = (R2 - R1) / Me.ScaleWidth * Me.DrawWidth '計算R1與R2的差值,看它每個間隔差了多少數值
            Gd = (G2 - G1) / Me.ScaleWidth * Me.DrawWidth '計算G1與G2的差值,看它每個間隔差了多少數值
            Bd = (B2 - B1) / Me.ScaleWidth * Me.DrawWidth '計算B1與B2的差值,看它每個間隔差了多少數值
            For I = 0 To Me.ScaleWidth Step Me.DrawWidth '繪圖For迴圈
                If R1 > 255 Then R1 = 255 '防溢位判斷,R1的範圍需為0~255
                If R1 < 0 Then R1 = 0
                If G1 > 255 Then G1 = 255 '防溢位判斷,G1的範圍需為0~255
                If G1 < 0 Then G1 = 0
                If B1 > 255 Then B1 = 255 '防溢位判斷,B1的範圍需為0~255
                If B1 < 0 Then B1 = 0
                Me.ForeColor = RGB(R1, G1, B1) '更改線條顏色
                Line (I, 0)-(I, Me.ScaleHeight) '利用Line來畫線(垂直線)
                R1 = R1 + Rd '原R1加上間隔數值,便可以以固定比例來進行顏色更變
                G1 = G1 + Gd '原G1加上間隔數值,便可以以固定比例來進行顏色更變
                B1 = B1 + Bd '原B1加上間隔數值,便可以以固定比例來進行顏色更變
            Next I
        Case 2 '上到下漸層
            Rd = (R2 - R1) / Me.ScaleHeight * Me.DrawWidth '計算R1與R2的差值,看它每個間隔差了多少數值
            Gd = (G2 - G1) / Me.ScaleHeight * Me.DrawWidth '計算G1與G2的差值,看它每個間隔差了多少數值
            Bd = (B2 - B1) / Me.ScaleHeight * Me.DrawWidth '計算B1與B2的差值,看它每個間隔差了多少數值
            For I = 0 To Me.ScaleHeight Step Me.DrawWidth '繪圖For迴圈
                If R1 > 255 Then R1 = 255 '防溢位判斷,R1的範圍需為0~255
                If R1 < 0 Then R1 = 0
                If G1 > 255 Then G1 = 255 '防溢位判斷,G1的範圍需為0~255
                If G1 < 0 Then G1 = 0
                If B1 > 255 Then B1 = 255 '防溢位判斷,B1的範圍需為0~255
                If B1 < 0 Then B1 = 0
                Me.ForeColor = RGB(R1, G1, B1) '更改線條顏色
                Line (0, I)-(Me.ScaleWidth, I) '利用Line來畫線(水平橫線)
                R1 = R1 + Rd '原R1加上間隔數值,便可以以固定比例來進行顏色更變
                G1 = G1 + Gd '原G1加上間隔數值,便可以以固定比例來進行顏色更變
                B1 = B1 + Bd '原B1加上間隔數值,便可以以固定比例來進行顏色更變
            Next I
        Case 3 '左中右漸層
            Rd = (R2 - R1) / Me.ScaleWidth * Me.DrawWidth * 2 '計算R1與R2的差值,看它每個間隔差了多少數值(算到中間部分,故Me.ScaleWidth要先除2,即Rd乘2)
            Gd = (G2 - G1) / Me.ScaleWidth * Me.DrawWidth * 2 '計算G1與G2的差值,看它每個間隔差了多少數值(算到中間部分,故Me.ScaleWidth要先除2,即Gd乘2)
            Bd = (B2 - B1) / Me.ScaleWidth * Me.DrawWidth * 2 '計算B1與B2的差值,看它每個間隔差了多少數值(算到中間部分,故Me.ScaleWidth要先除2,即Bd乘2)
            For I = 0 To Me.ScaleWidth / 2 Step Me.DrawWidth '繪圖For迴圈(到Me.ScaleWidth的一半)
                If R1 > 255 Then R1 = 255 '防溢位判斷,R1的範圍需為0~255
                If R1 < 0 Then R1 = 0
                If G1 > 255 Then G1 = 255 '防溢位判斷,G1的範圍需為0~255
                If G1 < 0 Then G1 = 0
                If B1 > 255 Then B1 = 255 '防溢位判斷,B1的範圍需為0~255
                If B1 < 0 Then B1 = 0
                Me.ForeColor = RGB(R1, G1, B1) '更改線條顏色
                Line (I, 0)-(I, Me.ScaleHeight) '利用Line來畫線(垂直線)
                R1 = R1 + Rd '原R1加上間隔數值,便可以以固定比例來進行顏色更變
                G1 = G1 + Gd '原G1加上間隔數值,便可以以固定比例來進行顏色更變
                B1 = B1 + Bd '原B1加上間隔數值,便可以以固定比例來進行顏色更變
            Next I
            For I = Me.ScaleWidth / 2 To Me.ScaleWidth Step Me.DrawWidth '繪圖For迴圈(從Me.ScaleWidth的一半到Me.ScaleWidth,反轉漸層)
                If R1 > 255 Then R1 = 255 '防溢位判斷,R1的範圍需為0~255
                If R1 < 0 Then R1 = 0
                If G1 > 255 Then G1 = 255 '防溢位判斷,G1的範圍需為0~255
                If G1 < 0 Then G1 = 0
                If B1 > 255 Then B1 = 255 '防溢位判斷,B1的範圍需為0~255
                If B1 < 0 Then B1 = 0
                Me.ForeColor = RGB(R1, G1, B1) '更改線條顏色
                Line (I, 0)-(I, Me.ScaleHeight) '利用Line來畫線(垂直線)
                R1 = R1 - Rd '原R1減掉間隔數值,便可以反轉漸層
                G1 = G1 - Gd '原G1減掉間隔數值,便可以反轉漸層
                B1 = B1 - Bd '原B1減掉間隔數值,便可以反轉漸層
            Next I
        Case 4 '上中下漸層
            Rd = (R2 - R1) / Me.ScaleHeight * Me.DrawWidth * 2 '計算R1與R2的差值,看它每個間隔差了多少數值(算到中間部分,故Me.ScaleHeight要先除2,即Rd乘2)
            Gd = (G2 - G1) / Me.ScaleHeight * Me.DrawWidth * 2 '計算G1與G2的差值,看它每個間隔差了多少數值(算到中間部分,故Me.ScaleWidth要先除2,即Gd乘2)
            Bd = (B2 - B1) / Me.ScaleHeight * Me.DrawWidth * 2 '計算B1與B2的差值,看它每個間隔差了多少數值(算到中間部分,故Me.ScaleWidth要先除2,即Bd乘2)
            For I = 0 To Me.ScaleHeight / 2 Step Me.DrawWidth '繪圖For迴圈(到Me.ScaleHeight的一半)
                If R1 > 255 Then R1 = 255 '防溢位判斷,R1的範圍需為0~255
                If R1 < 0 Then R1 = 0
                If G1 > 255 Then G1 = 255 '防溢位判斷,G1的範圍需為0~255
                If G1 < 0 Then G1 = 0
                If B1 > 255 Then B1 = 255 '防溢位判斷,B1的範圍需為0~255
                If B1 < 0 Then B1 = 0
                Me.ForeColor = RGB(R1, G1, B1) '更改線條顏色
                Line (0, I)-(Me.ScaleWidth, I) '利用Line來畫線(水平橫線)
                R1 = R1 + Rd '原R1加上間隔數值,便可以以固定比例來進行顏色更變
                G1 = G1 + Gd '原G1加上間隔數值,便可以以固定比例來進行顏色更變
                B1 = B1 + Bd '原B1加上間隔數值,便可以以固定比例來進行顏色更變
            Next I
            For I = Me.ScaleHeight / 2 To Me.ScaleHeight Step Me.DrawWidth '繪圖For迴圈(從Me.ScaleHeight的一半到Me.ScaleHeight,反轉漸層)
                If R1 > 255 Then R1 = 255 '防溢位判斷,R1的範圍需為0~255
                If R1 < 0 Then R1 = 0
                If G1 > 255 Then G1 = 255 '防溢位判斷,G1的範圍需為0~255
                If G1 < 0 Then G1 = 0
                If B1 > 255 Then B1 = 255 '防溢位判斷,B1的範圍需為0~255
                If B1 < 0 Then B1 = 0
                Me.ForeColor = RGB(R1, G1, B1) '更改線條顏色
                Line (0, I)-(Me.ScaleWidth, I) '利用Line來畫線(水平橫線)
                R1 = R1 - Rd '原R1減掉間隔數值,便可以反轉漸層
                G1 = G1 - Gd '原G1減掉間隔數值,便可以反轉漸層
                B1 = B1 - Bd '原B1減掉間隔數值,便可以反轉漸層
            Next I
        Case 5 '亂數漸層
            Randomize Timer '時間亂數種子
            Call LineGradient(Int(Rnd * 255 + 1), Int(Rnd * 255 + 1), Int(Rnd * 255 + 1), Int(Rnd * 255 + 1), Int(Rnd * 255 + 1), Int(Rnd * 255 + 1), Int(Rnd * 4 + 1)) '再呼叫LineGradient,引數為亂數
    End Select
End Sub

這個Sub LineGradient包含4+1種漸層格式,可以在Types引數中選用。另外,表單色彩漸層還需注意到繪圖完Line後,如果表單改變大小,那該怎麼辦?我的解決方法是使用表單的Resize事件程序來重繪。

Load程序中呼叫LineGradient副程式的方法如下:

Call LineGradient(R1, G1, B1, R2, G2, B2, Types)

例如:

Call LineGradient(0, 0, 0, 255, 255, 255, 3)

如此便會出現中間白,兩邊黑的漸層了。

Resize程序中重繪LineGradient的方法如下:

Call Form_Load ‘直接呼叫Load程序來進行重繪

圖片預覽

Call LineGradient(150, 250, 150, 225, 105, 255, 1)
sshot-12
Call LineGradient(150, 250, 150, 225, 105, 255, 2)
sshot-13
Call LineGradient(150, 250, 150, 225, 105, 255, 3)
sshot-14
Call LineGradient(150, 250, 150, 225, 105, 255, 4)
sshot-15


放射性漸層比較困難,有空我會寫寫看,到時再寫教學。
那麼,本篇教學就到此結束了。

文章分類:VB6.0|標籤:, , ,

迴響已關閉