Một trong những giao diện được Microsoft dùng nhiều nhất cho các sản phẩm của mình là Wizard và đây cũng là loại giao diện chúng ta thường gặp nhất.
Wizard được hiểu là cách chia nhỏ những giao diện phức tạp thành một chuỗi các giao diện đơn giản. Việc làm này giúp người sử dụng dễ dàng hơn trong thao tác và tăng tính chuyên nghiệp cho chương trình.
Bộ môn Tựđộng hóa Thiết kế Cầu đường Page 41
Những lưu ý khi tạo Wizard UI
Không có định nghĩa chính xác Wizard UI là gì nhưng nếu xem những ứng dụng của nó
như “Create Form by using wizard” của MS Access ta sẽ thấy những đặc điểm sau đây của wizard.
1. Người sử dụng thao tác với một chuỗi các Form nhỏ, gọn gàng, thông suốt. 2. Từng trang có tiêu đề và mô tả giúp người dùng biết mình cần phải làm gì.
3. Từng trang yêu cầu người dùng hoàn thành một hoặc hai thao tác.
4. Ở dưới các trang có nút Tiến và Lùi (Nếu đó không phải là trang đầu hoặc cuối) 5. Tất cả các trang sẽ có nút Cancel để người dùng có thể thoát khỏi wizard
6. Trang cuối cùng có nút Finsh (Kết thúc). Đôi khi các trang khác cũng có.
7. Nếu chọn Lùi hoặc Tiến, wizard vẫn lưu lại những thông số ta đã nhập vào. 8. Các trường dữ liệu trên Form thường có những giá trị mặc định thường dùng. Khi xây dựng một giao diện Wizard nên tuân thủ những đặc điểm trên.
Các trang của wizard không nên thiết kế trên nhiều Form khác nhau, gây lãng phí bộ nhớ
và phức tạp trong quá trình xử lý, bên cạnh đó cũng tránh được việc thiết kế lại các điều khiển giống nhau.
Bộ môn Tựđộng hóa Thiết kế Cầu đường Page 42
CHƯƠNG II XỬ LÝ ĐỒ HỌA
Mục tiêu:
Chương này giới thiệu về các đối tượng, điều khiển đồ họa cơ bản trong VB.
Học xong chương này, sinh viên phải nắm bắt được các vấn đề sau: - Sử dụng các phương thức đồ họa vẽ thiết lập bản vẽ.
- Sử dụng các điều khiển đồ họa xây dựng giao diện. - Xây dựng các phương thức biến đổi tọa độ.
Kiến thức có liên quan:
- Các cấu trúc lập trình trong VB. - Cách thức xử lý sự kiện.
Trong Visual Basic 6.0, các phương thức và thuộc tính được sử dụng để vẽ trên Form hoặc
PictureBox. Đồ họa trong Visual Basic 6.0 dựa trên Windows Graphics Device Interface (GDI) APIs - Application Programming Interface.
II.1 Tọa độ màn hình
Góc trái trên của màn hình có tọa độ là (0,0) có nghĩa là X = 0 và Y = 0. Như vậy tức là
khi di chuyển sang phải màn hình thì X tăng lên cũng như di chuyển xuống dưới thì Y tăng lên.
Hình minh họa các kích thước của màn ảnh và Form.
Bộ môn Tựđộng hóa Thiết kế Cầu đường Page 43
Cách định nghĩa hệ tọa độ người dùng
Đểđịnh nghĩa hệ tọa độ người dùng ta sử dụng phương thức Scale với thông sốđầu vào là tọa độ hai góc của vùng.
ctl .Scale (x1, y1)-(x2, y2)
Visual Basic sẽ thiết lập các thuộc tính sau của đối tượng ctl
Property Value
ctl.ScaleLeft x1 ctl.ScaleWidth x2 - x1 ctl.ScaleTop y1 ctl.ScaleHeight y2 - y1 Thường sử dụng 2 đơn vị tọa độ chủ yếu sau: Twips và Pixel.
Twips: Đây là hệ tọa độ mặc định dùng cho Form. Mỗi điểm sẽ bằng 1/567 cm. Đây là hệ tọa độ không bịảnh hưởng bởi thiết bị, kết quả vẽ sẽ như nhau trên màn hình VGA, trên
máy in hay trên màn hình có độ phân giải cao khác. Ví dụ khi vẽ 1 đường dài 567twips nó
sẽ hiển thị dài 1cm trên màn ảnh và khi in nó cũng dài 1cm trên giấy.
Pixel: Đây là hệ tọa độ phổ biến nhất, mỗi một điểm trên màn hình sẽ bằng chính xác với một Pixel, như vậy khi sử dụng hệ tọa độ này sẽ giúp cho các ứng dụng đồ họa thực hiện được nhanh hơn vì không phải thông qua quá trình đổi hệ tọa độ.
II.2 Màu (Color)
VB6 cung cấp 4 cách để chọn màu hiển thị cho đối tượng đồ họa: 1. Chọn trực tiếp một con số hay chọn một màu từ bảng Palette.
Bộ môn Tựđộng hóa Thiết kế Cầu đường Page 44
3. Dùng Function QBColor để chọn một trong 16 màu.
Function QBColor xuất phát từ thời Quick Basic (QBasic) của Microsoft. Trong QBasic ta
có thể dùng các con số 1,2,3 .. để chỉđịnh các màu Blue, Green, Cyan ... Ví dụ:
Các màu với Function QBColor.
Trị số Màu Trị số Màu
0 Black 8 Gray
1 Blue 9 Light Blue
2 Green 10 Light Green
3 Cyan 11 Light Cyan
4 Red 12 Light Red
5 Magenta 13 Light Magenta
6 Yellow 14 Light Yellow
7 White 15 Bright White
4. Dùng Function RGB để trộn ba màu Red, Green và Blue.
Một màu được biểu diễn bằng sự pha trộn của ba thành phần màu căn bản, mỗi màu bằng một byte có trị số từ 0 đến 255. 0 là không dùng màu ấy, 255 là dùng tối đa màu ấy.
II.3 Các thuộc tính đồ họa của Form và PictureBox
• AutoRedraw – Tựđộng vẽ lại các phần đồ họa • DrawStyle – Kiểu đường hiển thị
• DrawWidth – Độ rộng của đường
• FillColor – Màu tô cho circles, lines và boxes.
• FillStyle – Mẫu tô cho circle, lines và boxes • ScaleHeight – Chiều cao vùng client
• ScaleWidth – Chiều rộng của vùng client • ScaleLeft – Giá trị bắt đầu trái của vùng client • ScaleTop – Giá trị bắt đầu trên của vùng client • ScaleMode – Đơn vị của vùng client
II.4 Các phương thức đồ họa
Các điều khiển được vẽ lên Form lúc thiết kế nhưng các phương thức đồ họa cho phép vẽ trực tiếp khi ứng dụng thi hành.
II.4.1 Phương thức Print
Phương thức Print cho phép in trực tiếp trên Form, PictureBox hay Printer.
Cú pháp [Object.]Print [Spc(n) | Tab(n) | expression charpos]
trong đó :
Object tên của đối tượng nhận kết quả vẽ (Printer, Form, PictureBox), default là
form hiện hành.
Spc(n) qui định n ký tự trống được in ra.
Tab(n) qui định n ký tự Tab được in ra, mỗi Tab đưa pointer in qua phải thêm 1 cột (vị trí các cột được qui định trước).
Bộ môn Tựđộng hóa Thiết kế Cầu đường Page 45
expression là biểu thức chuỗi hay số cần in.
charpos qui định vị trí in dữ liệu kế tiếp. Nếu charpos = ";" thì dữ liệu in kế tiếp sẽ được in liền ngay. Nếu charpos = "," thì sẽ thêm 1 Tab trước khi in dữ liệu kế. Nếu không có charpos sau cùng thì vị trí in sẽ dời xuống đầu dòng kế tiếp.
Thông tin về font chữ phải được thiết lập trước thủ tục Print thông qua các thuộc tính sau của đối tượng vẽ : FontName, FontSize, FontItalic, FontBold,...
Nên thiết lập thuộc tính CurrentX, CurrentY để qui định rõ ràng vị trí in của mỗi lệnh Print.
Ví dụ:
Private Sub CmdPrintFontSizes_Click() Dim i As Integer For i = 1 To 10 'Định nghĩa cỡ Font Me.Font.Size = Me.Font.Size + i 'Định nghĩa màu sử dụng hàm QBColor Me.ForeColor = QBColor(i) 'In trên một dòng, sử dụng dấu chấm phẩy ";" Me.Print Str(i); Next End Sub Kết quả:
II.4.2 Phương thức PSet
Phương thức này thao tác trên từng điểm và có công dụng gán một màu nào đó cho một
điểm trên đối tượng.
Cú pháp : [Object.]PSet [Step] (x, y), [color]
Object tên của đối tượng nhận kết quả vẽ (Printer, Form, PictureBox), default là
form hiện hành.
Step Tùy chọn. Nếu từ khóa Step được dùng thì (x,y) là tọa độ tương đối so với vị trí hiện hành được xác định bởi 2 thuộc tính CurrentX, CurrentY của đối tượng vẽ. Nếu từ khóa Step không được dùng thì (x,y) là tọa độ so với điểm gốc (0,0).
(x, y) Tọa độ của điểm.
Color giá trị kiểu Long miêu tả màu vẽ theo hệ màu RGB (hoặc dùng hàm
QBColor() hoặc dùng hàm RGB(r,g,b) để xác định màu vẽ).
Bộ môn Tựđộng hóa Thiết kế Cầu đường Page 46
II.4.3 Phương thức Line
Phương thức Line dùng để vẽ một đường thẳng trong quá trình thực thi chương trình.
Cú pháp: [objName.]Line [Step] (x1, y1) - [Step] (x2, y2), [color], [B][F]
Object tên của đối tượng nhận kết quả vẽ (Printer, Form, PictureBox), default là
form hiện hành.
(x1,y1) miêu tả tọa độđiểm đầu của đoạn thẳng cần vẽ trên đối tượng nhận kết quả. Nếu từ khóa Step được dùng trước tọa độ (x1,y1) thì nó là tọa độ tương đối so với vị trí hiện hành được xác định bởi 2 thuộc tính CurrentX, CurrentY của đối tượng nhận kết quả. Nếu từ khóa Step không được dùng thì (x1,y1)
là tọa độ so với điểm gốc (0,0).
(x2,y2) miêu tả tọa độ điểm cuối của đoạn thẳng cần vẽ. Ý nghĩa của (x2,y2) cũng giống như (x1,y1).
Color giá trị kiểu Long miêu tả màu vẽ theo hệ màu RGB.
B F nếu không có thông số B thì thủ tục Line sẽ vẽđoạn thẳng qua 2 điểm. nếu có thông số B, thủ tục Line sẽ vẽ hình chữ nhật mà 2 đỉnh chéo được xác định bởi 2 điểm.
Trong trường hợp này nếu có thông số F, hình chữ nhật sẽđược tô cùng màu với màu vẽ, ngược lại thuộc tính FillColor và FillStyle của đối tượng nhận kết quả sẽ qui định màu được tô.
Đểđơn giản ta có 3 cách chỉđịnh tọa độ 2 đầu đoạn thẳng muốn vẽ:
1. Cho biết tọa độ của đầu và cuối đường thẳng:
Ví dụ: Line (50, 100)-(3000, 4000)
Khi đường này được vẽ xong thì vị trí của con trỏđồ họa là vị trí cuối của đường này, tức là CurrentX=3000 và CurrentY=4000.
2. Chỉ cho biết tọa độ cuối đường thẳng:
Ví dụ: Line -(3600, 4500), vbMagenta
Trong trường hợp này vị trí của con trỏđồ họa (CurrentX, CurrentY) được lấy làm tọa độ của đầu đường thẳng khi vẽ.
3. Dùng chữStep để nói sự khác biệt từ CurrentX và CurrentY:
Ví dụ: Line Step(400, 600)-Step(800, -500), vbGreen
Nếu trước khi execute dòng code này CurrentX=3600 và CurrentY=4500 thì dòng code
tương đương với: Line (4000,5100)-(4800,4600), vbGreen Các ví dụ sử dụng phương thức Line
Vẽ tam giác: Cách 1
Private Sub CmdTrianI_Click() Line (700, 500)-(2800, 2400) Line (2800, 2400)-(1800, 900) Line (1800, 900)-(700, 500) End Sub
Cách 2
Private Sub CmdTrianII_Click() Line (700, 500)-(2800, 2400), vbRed Line -(1800, 900), vbRed
Line -(700, 500), vbRed End Sub
Bộ môn Tựđộng hóa Thiết kế Cầu đường Page 47 Vẽ hình chữ nhật
Private Sub Rectangle(ByVal X1 As Integer, ByVal Y1 As Integer, ByVal X2 As Integer, ByVal Y2 As Integer)
' Draw a rectangle Line (X1, Y1)-(X2, Y1) Line -(X2, Y2)
Line -(X1, Y2) Line -(X1, Y1) End Sub
Hình chữ nhật 4 góc tròn:
Private Sub RoundCornerRectangle(ByVal X1 As Integer, ByVal Y1 As
Integer, ByVal X2 As Integer, ByVal Y2 As Integer)
Const Delta = 50
' Draw a rectangle with round corner Line (X1 + Delta, Y1)-(X2 - Delta, Y1) Line -Step(Delta, Delta)
Line -(X2, Y2 - Delta) Line -Step(-Delta, Delta) Line -(X1 + Delta, Y2) Line -Step(-Delta, -Delta) Line -(X1, Y1 + Delta) Line -Step(Delta, -Delta) End Sub
Tô màu hình chữ nhật sử dụng phương thức Pset:
Private Sub Shade(ByVal X1 As Integer, ByVal Y1 As Integer, ByVal X2 As Integer, ByVal Y2 As Integer)
Const Delta = 50 Dim i As Integer Dim j As Integer
' Make sure that X1 is less than X2 ' Swap values of X1, X2 if X1 > X2 If X2 < X1 Then Temp = X1 X1 = X2 X2 = Temp End If
' Make sure that Y1 is less than Y2 ' Swap values of Y1, Y2 if Y1 > Y2 If Y2 < Y1 Then Temp = Y1 Y1 = Y2 Y2 = Temp End If ' Vẽ các điểm cách nhau 50 Pixel
For i = X1 + Delta To X2 - Delta Step 50 For j = Y1 + Delta To Y2 - Delta Step 50 PSet (i, j)
Next Next End Sub
Bộ môn Tựđộng hóa Thiết kế Cầu đường Page 48
II.4.4 Phương thức Circle
VB cung cấp phương thức Circle cho phép ta vẽ đường tròn, đường cong, cung tròn,
ellipse …
Để vẽ một đường tròn ta dùng phương thức Circle do VB cung cấp.
Cú pháp: Object.Circle (X, Y), Radius, [color]
Object Đối tượng mà phương thức làm việc.
(x, y) Tọa độ tâm đường tròn.
Radius Bán kính của đường tròn
Color Màu đặt cho đường tròn. .
Để vẽ một cung tròn, ta cũng sử dụng phương thức Circle, tuy nhiên ta cần cung cấp thêm 2 thông sốđó là điểm bắt đầu và điểm kết thúc của cung tròn. Thông thường chúng ta quen sử dụng đơn vịđo góc là độ, tuy nhiên đối với VB ta cần phải đưa vào đơn vị là Radians. Ví dụ vẽ một cung tròn tâm (1000, 1500), bán kính 500 bắt đầu từ góc 60o đến góc 90o ta dùng đoạn lệnh như sau:
Const pi = 3.1415
Circle (1000, 15000), 500, , pi/3, pi/2
Để vẽ một Ellipse, ta cung cấp thêm thông số cuối cùng (thông số Aspect) đó là sự
co giãn của đường tròn theo chiều ngang. Cú pháp tổng quát của phương thức Circle:
object.Circle [Step] (x, y), radius, [color, start, end, aspect]
Object Đối tượng mà phương thức làm việc.
(x, y) miêu tả tọa độ tâm điểm của vòng tròn/ellipse/arc cần vẽ trên đối tượng nhận kết quả. Nếu từ khóa Step được dùng trước tọa độ (x,y) thì (x,y) là tọa độ tương đối so với vị trí hiện hành được xác định bởi 2 thuộc tính CurrentX, CurrentY của đối tượng nhận kết quả. Nếu từ khóa Step không được dùng thì (x,y) là tọa độ so với điểm (0,0).
Radius Bán kính của đường tròn
Color giá trị kiểu Long miêu tả màu vẽ theo hệ màu RGB
start, end góc xác định điểm đầu và cuối của arc theo đơn vị radian (default điểm đầu là 0 và điểm cuối là 2π).
aspect tỉ lệ kích thước dọc/ngang của ellipse (default là 1 để vẽ vòng tròn).
II.4.5 Phương thức PaintPicture
Phương thức PaintPicture cho phép sao chép nhanh các hình ảnh từ Form, hộp hình và máy in.
Cú pháp:
object.PaintPicture picture, x1, y1, width1, height1, x2, y2, width2, height2, opcode
Object Object là đối tượng mà phương thức sẽ làm việc, nó có thể là Form, hộp hình hay đối tượng máy in.
Bộ môn Tựđộng hóa Thiết kế Cầu đường Page 49
Picture Hình ảnh nguồn sẽđược vẽ lên đối tượng phải được chỉ rõ bởi thuộc tính Picture của Form hoặc hộp hình.
x1, y1 Giá trị chỉ định vị trí của hình ảnh trên đối tượng. Thuộc tính ScaleMode xác định hệ tọa độ nào được sử dụng.
Width1 Giá trị xác định độ rộng của hình ảnh, nếu bỏ qua thì mặc định là độ
rộng của ảnh nguồn.
Height1 Giá trị xác định độ cao của hình ảnh, nếu bỏ qua thì mặc định là độ
cao của ảnh nguồn.
x2, y2 Các giá trị xác định hình ảnh sẽđược vẽ lại từ vị trí nào. Nếu bỏ qua thì giá trị mặc định là 0, tức toàn bộ hình ảnh được vẽ lại.
Width2 Tương tự như Width1, nhưng ởđây là tác động đến ảnh nguồn.
Height2 Tương tự như Height1, nhưng ởđây là tác động đến ảnh nguồn.
Opcode Đây là tùy chọn và chỉ có tác dụng với ảnh Bitmap.
Ví dụ: Thiết kế chương trình sao cho khi người sử dụng vừa di chuyển vừa nắm giữ
phím chuột thì một hình ảnh sẽđược vẽ lại ở tọa độ mới.
Dim re
Private Sub Form_Load() re = False
End Sub
Private Sub Form_MouseDown(Button As Integer, Shift As Integer, X As Single, Y As Single)
re = True End Sub
Private Sub Form_MouseMove(Button As Integer, Shift As Integer, X As Single, Y As Single)
If re Then
Form1.PaintPicture Image1.Picture, X, Y, Image1.Width, Image1.Height
End If End Sub
Private Sub Form_MouseUp(Button As Integer, Shift As Integer, X As Single, Y As Single)
re = False End Sub
Qua ví dụ trên ta thấy phương thức PaintPicture cho phép sao chép nhanh một ảnh nguồn trên các đối tượng khác.
Bộ môn Tựđộng hóa Thiết kế Cầu đường Page 50
II.4.6 Bài toán vẽđa giác bất kỳ
Định nghĩa đa giác (Polygone): Đa giác là một đường gấp khúc kín có đỉnh đầu và đỉnh cuối trùng nhau.
Đây là bài toán thường gặp trong các ứng dụng chuyên ngành. Ví dụ ta cần vẽ một mặt cắt ngang dầm, vẽ các hình chiếu, trụ mố…
Mặt cắt ngang dầm hộp được tạo bởi 2 đa giác. Ta sẽ tìm hiểu thuật toán để vẽ một đa giác bất kỳ:
Xây dựng cấu trúc dữ liệu để vẽ đa giác
Private Type DinhDaGiac x as Long
y as Long End Type
Với cách xây dựng cấu trúc dữ liệu như thế này thì chúng ta chỉ cần nhập vào tọa độ các đỉnh và sau đó gọi thủ tục vẽđường thẳng lần lượt qua 2 đỉnh như (0, 1), (1,2), ..., (n-1, n), trong đó đỉnh n trùng với đỉnh 0 thì ta sẽ vẽđược toàn bộđa giác.
Ví dụ vẽ trên Form một đa giác 5 cạnh: Private Type DinhDaGiac x As Long
y As Long End Type
Private Sub Command1_Click() Dim DiemVe(4) As DinhDaGiac
DiemVe(0).x = 100: DiemVe(0).y = 45 DiemVe(1).x = 95: DiemVe(1).y = 100 DiemVe(2).x = 123: DiemVe(2).y = 80 DiemVe(3).x = 187: DiemVe(3).y = 150