座標系統

Visual Basic 程式設計 繪圖世界

座標系統 設定顏色

繪圖函式 (繪點、繪線、繪圖)

2

座標系統

修改表單(form)的ScaleMode屬性可以改 變座標系統

單位大小:表單(Form)的ScaleMode屬性 設定ScaleMode常常必須配合其他的屬性, 例如:ScaleTop, ScaleLeft, ScaleWidth, ScaleHeight。這些屬性與物件外部相關 的屬性名稱雖然類似但功能不同，整理 如下頁的表。

x軸

y

(x,y) (0,0)

3

座標系統 (cont.)

ScaleMode、ScaleTop、ScaleLeft、ScaleHeight、ScaleWidth

屬性只有表單、圖片方塊、印表機等物件才有，而單位由ScaleMode屬性值決定。

屬性值 說明

ScaleMode 設定物件內部座標系統的單位。

ScaleLeft 設定物件左上角坐標的X值（可為負值）。

ScaleTop 設定物件左上角坐標的Y值（可為負值）。

ScaleWidth 設定物件X軸的寬度。

ScaleHeight 設定物件Y軸方向的高度。

Left 設定物件左邊界與母件左邊界的距離（單位由母 件決定）。

Top 設定物件上邊界與母件上邊界的距離（單位由母 件決定）。

Width 設定物件的寬度（單位由母件決定）。

Height 設定表物件的高度（單位由母件決定）。

4

座標系統 (cont.)

¾

Top都是指對於母件（例如表單的母件為螢幕）的座標，假設設 定Width=6000、Height=4000，則代表要在螢幕中建立一個寬為 6000Twips、高為4000Twips的表單（單位由母件決定）。設定 Left=500、Top=500，代表該表單位置相對於螢幕左上角(0,0)的 座標為(500,500)Twips（單位由母件決定）。所以這些值（大小、

位置）雖可由子件來決定，但座標單位則由母件決定。

5

座標系統 (cont.)

ScaleWidth、ScaleHeight、ScaleLeft、ScaleTop則是表單內部的另一套

內部座標左上角為(0,0)，向右、向下延伸正值，右下角座標恰為

（ScaleWidth, ScaleHeight），單位則由ScaleMode決定，例如上圖將

ScaleMode設為1，因此內部座標的單位也是Twips。

若將內部座標單位改為公分（ScaleMode=7），則變成下圖座標系統。

6

座標系統 (cont.)

¾ Visual Basic的座標系統內定為向右、向下延伸逐漸增加正值，和數學所

X,Y值。不過，我們也可以將座標系統改為其他方式。

¾

、ScaleLeft=-245、ScaleTop=-150。則座標如下圖：

在上圖中，並未寫出內部座標的單位，由於將ScaleMode設為0，因此該 座標系統專屬於使用者所制定的。

7

座標系統 (cont.)

vbUser 0 由程式設計師自訂（當ScaleTop, ScaleLeft, ScaleHeight, ScaleWidth的值改變時，系統 會自動設定ScaleMode 為 0）

vbTwips 1

2 3 4

5 6 7

預設值，以Twip為單位(每吋1440twips, 每公分567twips,每點20twips)

vbPoints 以點（Point）為單位（1點 = 1/72英吋）。

vbPixels 以像素（Pixel）為單位。(螢幕上最小的 單位)

vbCharacter 以字元（Character）為單位（每個字元高 1/6英吋、寬1/12英吋）。

vbInches 以英吋（inch）為單位。

vbMillimeters 以公厘（mm）為單位。

vbCentimeters 以公分（cm）為單位。

ScaleMode屬性

8

座標

CurrentX, CurrentY屬性(水平垂直座標值)

„ 【語法說明】：

¾ 物件為表單、圖片方塊或印表機，省略該參數則物件為表單。

¾ CurrentX , CurrentY屬性無法於編輯介面時指定，只能透過敘述在程式中設 定。

¾ 不同的函數執行後焦點座標位置有些不同，當執行Line方法畫直線之後，焦 點座標會停留在直線終點，執行Circle方法畫圓形之後，焦點座標位於圓心。

語法：X = [物件.] CurrentX Y = [物件.] CurrentY

功能：取得目前座標點所在的水平與垂直座標值 語法：[物件.] CurrentX = X

[物件.] CurrentY = Y

功能：設定文字或圖形左上角起始點之水平與垂直座標。

9

座標 (cont.)

Print:畫出文字

„ CurrentX:x座標值

„ CurrentY:y座標值

For i=1 to 5

print “CurrentX=”;CurrentX, _

“CurrentY=”;CurrentY

Next i

，不用宣告

10

座標 (cont.)

改變CurrentX與CurrentY的值可以改變文 字的位置

Randomize Cls

For i=1 to 5

CurrentX=Rnd()*Width CurrentY=Rnd()*Height print “test”

Next i

11

座標 (cont.)

„

在設計介面時，可以直接在屬性視窗中修改ScaleMode、ScaleWidth、

ScaleHeight、ScaleLeft、ScaleTop屬性來設定表單、圖片方塊及印表機

在程式執行時，也可以藉由程式重新指定ScaleMode、ScaleWidth、

ScaleHeight、ScaleLeft、ScaleTop的屬性值來改變物件內部座標，除此

、ScaleTop的屬性值。

Scale方法的語法如下：

„

¾ X1：代表ScaleLeft屬性值。Y1：ScaleTop的屬性值。

¾ X2-X1：ScaleWidth的屬性值。（所以X2為右下角座標的X值）

¾ Y2-Y1：ScaleHeight的屬性值。（所以Y2為右下角座標的Y值）

¾ 若省略[(X1,Y1 )-(X2,Y2)]參數，則物件的內部座標將會變成預設值（

ScaleMode=1）。

語法：[物件.] Scale [(X1,Y1)-(X2,Y2)]

功能：設定物件的內部座標。

Visual Basic 程式設計 繪圖世界

座標系統 設定顏色

繪圖函式 (繪點、繪線、繪圖)

13

設定顏色

Visual Basic設定顏色的方法一共分為3種：用十六進位

相關的屬性

„ BackColor：背景顏色，設定表單的背景顏色。

„ ForeColor：前景顏色，在表單上輸出文字或圖形的顏色（預 設為“黑色”）。

„ FillColor：塗抹顏色，塗抹圖形封閉區域的顏色。

„ FillStyle：塗抹樣式，等於0，代表“實心”，會以FillColor設定 的顏色，來塗抹圖形的封閉區域；等於1，代表“透明”，就不 會塗抹（即保持原來的顏色）。

14

設定顏色 (cont.)

設定顏色的各種屬性應用

Private Sub Form_Activate()

BackColor = &HFFFFFF ‘

ForeColor = QBColor(9) ‘

FillColor = RGB(255,255,0) ‘

FillStyle = 0 ‘

Print “

ForeColor = &HFF ‘

Line(500,800)-(1500,1500),,B ‘畫方框 ForeColor = RGB(0,255,0) ‘

FillStyle = 1 ‘

Line(2000,800)-(3000,1500),,B‘

End Sub

15

設定顏色 (cont.)

用十六進位數設定顏色

„

“&h00BBGGRR&”，BB、GG、RR分別代表藍色、綠 色以及紅色的比重值，都用十六進位數00~FF來表 示（十進位數為0~255），因此：

Š

Š

Š

Š

Š

16

設定顏色 (cont.)

用QBColor函數來設定顏色

„ 此函數只能使用16種顏色，其用法如下：

Š

BackColor = QBColor(2)

17

設定顏色 (cont.)

用RGB函數設定顏色

„

RGB函數是利用3原色原理產生更多色彩，語法如下：

„ 【語法說明】：

¾ RGB函數共有3個參數，分別代表紅、綠、

藍顏色的比例。每個顏色值分別為0~255，

值越大者代表該原色所佔比例越大。由於

，因此紅、綠、藍3原色各佔1個Byte，每 一個顏色則佔用3個Bytes（24 bits），也 就是「24bit全彩」。

¾

舉例來說，要設定紅色的話，則可以使用

、設定藍色則RGB(0,0,255)。而黃色則為

（紅+綠），所以是RGB(255,255,0)，

語法：RGB (Red, Green, Blue)。

功能：利用3原色設定色彩。

18

捲軸 (Scroll Bar)

捲軸分成水平捲軸與重直捲軸，在表單

上設定捲軸，可以讓使用者調整捲動鈕

的位置，來示某一“數值”，以取代用文字

方塊輸入數值的呆板方式。

19

捲軸 (Scroll Bar) (cont.)

捲軸的建立與相關說明

1:按一下水平捲軸工具。

2:在表單上拖曳出捲軸控制項的大小。

微動鈕 捲動鈕 快捲區

20

捲軸 (Scroll Bar) (cont.)

捲軸的常用屬性

屬性 屬性值說明

Value（捲軸值）

SmallChange（微動距離）

LargeChange（快捲距離）

Max（最大值） 捲軸最大值可介於-32768~32767。

（預設值為32767）

Min（最小值） 捲軸最小值可介於-32768~32767 。 （預設值為0）

代表目前捲動鈕所在位置的值。

設定使用者按微動鈕時，捲動鈕移動的距離。

（預設值為1）

設定使用者按快捲區時，捲動鈕每次移動的距離。

（預設值為1）

21

捲軸 (Scroll Bar) (cont.)

捲軸的常用事件

„ Change事件：當按下捲軸控制項的『微動鈕』、『

快捲區』或拖曳『捲動鈕』時會觸發「Change」事 件。

„ Scroll事件：當拖曳『捲動鈕』時會觸發Change事

Scroll事件中較為適當。

22

課堂練習

請撰寫一個表單程式，使用RGB函數來設定顏色，並利用捲軸設 定3原色所佔比例。

Visual Basic 程式設計 繪圖世界

座標系統 設定顏色

繪圖函式 (繪點、繪線、繪圖)

24

繪點

„

z 【

語法說明】：

¾ PSet方法執行完畢，CurrentX、CurrentY將被設定為該點的座標值。 例如：執行 PSet(50,100)後，則CurrentX=50，CurrentY=100。

¾

若要在表單上畫出不同大小的點，可以配合表單的DrawWidth屬性，可以繪出不同大小 的點。

¾

若將顏色設為與BackColor顏色相同的話，Pset所畫的點會看不到。因此可以用來清除某 個特定點。

z 【範例9-5】：使用Pset方法，繪製y=x³-3x²+3的方程式圖形。

語法：[物件.] PSet (X,Y) [,Color]

功能：在表單、圖片方塊或印表機物件上繪製一個點（可指定 該點的顏色）。

25

繪點 (cont.)

4 5 6 7 8 9 10 11 12 13

Private Sub Form_Activate() Scale (-10, 10)-(10, -10)

DrawWidth = 2 '畫筆寬度為2

Line (-10, 0)-(10, 0), RGB(0, 0, 0) 'X軸 Line (0, 10)-(0, -10), RGB(0, 0, 0) 'Y軸 DrawWidth = 3 '畫筆寬度為3

For X = -10 To 10 Step 0.1

PSet (X, X ^ 3 - 3 * X ^ 2 + 3), RGB(0, 0, 255) Next X

End Sub

26

繪點 (cont.)

請撰寫一個程式，亂數在表單上以繪點

函數畫出多個點。

27

Line函式 - 繪線

„

z 【語法說明】：

¾ X1,Y1：線的起點；X2,Y2：線的終點；Color：使用RGB函數。

¾ 執行Line方法後，CurrentX、CurrentY將是直線的終點座標標。例如：Line (100,150)-(350,450)，則敘述執行完畢後CurrentX=350、CurrentY=450。

¾ Step代表以直線起點做相對位移。例如：Line (20,40)-Step(30,50)，則

CurrentX = 20+30=50、CurrentY = 40+50 = 110。若想要畫頭尾相連多條連 續直線，使用Line-Step(X,Y)即為方便。

語法：[物件.]Line [(X1 , Y1)] - [Step] (X2 , Y2) [,Color] [,B[F]]

功能：在表單、圖片方塊或印表機等物件上畫一條直線、方框、方塊。

畫直線語法：[物件.] Line [(X1,Y1)]-[Step](X2,Y2) [,Color]

28

Line函式 - 繪方框、方塊

z 【

語法說明】：

¾

加B表示畫方框。（中間空心）

¾ X1,Y1：方框的左上角頂點；X2,Y2：方框的右下角頂點。

【範例】：Line (20,20) - (180,180) , RGB(255,0,0) , B

上述敘述會畫出以(20,20)、(80,80)為對角頂點的紅色空心方框，面積為3600。

z 【

語法說明】：

¾

加BF表示畫方塊。（中間實心）

¾ X1,Y1：方塊的左上角頂點；X2,Y2：方塊的右下角頂點。

【範例】：Line (20,20) - (80,80) , RGB(255,0,0) , BF

上述敘述會畫出以(20,20)、(80,80)為對角頂點的紅色實心方塊，面積為3600。

畫方框語法：[物件.] Line [(X1,Y1)]-[Step](X2,Y2) [,Color] B

畫方塊語法：[物件.] Line [(X1,Y1)]-[Step](X2,Y2) [,Color] BF

29

線條樣式

DrawStyle屬性

設定線條的樣式： 線條效果

0-實線(預設值) 1-破折線

2-點線

3-破折線+點線

4-破折線+點線+點線 5-透明

6-內實線

30

課堂練習

請使用Line函式繪製下列圖形。

31

Circle函式 - 繪圓

„ Circle語法如下：

z 【

語法說明】：

¾ (x,y)：圓心座標。

¾ r：圓的半徑。

¾ Color：顏色值。

z 【

語法說明】：

¾ d1：圓弧的起點角度，以弳為單位。（省略時d1為0）

¾ d2：圓弧的終點角度。（省略時d1為2π）（π近似於3.14159）。

畫圓形語法：[物件.]Circle(x,y),r [,Color]

功能：表單、圖片方塊或印表機等物件上畫圓形。

畫圓弧語法：[物件.]Circle(x,y),r [,Color] ,d1,d2 功能：表單、圖片方塊或印表機等物件上畫圓弧。

32

Circle函式 - 繪扇形

¾ 弳度與角度的轉換如右圖：

¾ 【轉換公式】：

畫扇形語法： [物件.]Circle(x,y),r [,Color] ,-d1,-d2 功能：表單、圖片方塊或印表機等物件上畫扇形。

z 【語法說明】：

¾ 當d1,d2前面加上負號『-』，則在圓弧角度的圓周會連一條到圓心的線

，可以用來畫出扇形。

33

Circle函式 - 繪橢圓

z 【語法說明】：

a：橢圓之兩軸比，a=(垂直半徑長)/(水平半徑長)。

¾ (1) a=1時，圓為正圓。

¾ (2) a>1時，為瘦長橢圓。（r為垂直半徑長，垂直軸較長）

¾ (3) a<1時，為扁平橢圓。（r為水平半徑長，水平軸較長）

畫橢圓語法： [物件.]Circle(x,y),r[,Color],,,a 功能：表單、圖片方塊或印表機等物件上畫橢圓。

畫橢圓弧語法：[物件.]Circle(x,y),r[,Color],d1,d2,a 功能：表單、圖片方塊或印表機等物件上畫橢圓弧。

34

課堂練習

請使用Circle函式繪製下列圖形。

35

課堂練習

請用Circle函式，依輸入的百分比的比率

繪製如下的圓餅圖。