Bài 4: Ðồ họa: PictureBox, Image, Shape và Line controls
I. Giới Thiệu :
Ðồ họa (Graphics)đóng vai trò khá quan trọng trong các ứng dụng chạy trên
Window. Cho dù ứng dụng đó hay cỡ nào nếu giao diện đồ họa (Graphical User
Interface) không "bắt mắt" thì cűng khó khuyến khích người ta sử dụng. Visual Basic
cho phép chúng ta tạo ra các hình ảnh bằng 2 cách:
• Sử dụng các graphics controls. Ðây là những hình(shapes) mà ta có thể đặt lên
form trong lúc design như các controls khác.
• Sử dụng các Graphics Methods để vẽ hình khi ứng dụng đang chạy (on the fly).
Trong bài này chúng ta chủ yếu tập trung vào các graphics controls như PictureBox
, Image , Line và Shape controls và một số graphics methods thông
dụng.
PictureBox và Image controls trong Visual Basic được dùng để hiển thị (display)
hình ảnh. Cả hai đều có property quan trọng là
Picture
dùng để xác định image file
nào sẽ được hiển thị. Khi double-click vào property
Picture
trên Properties window,
một Load Picture window sẽ xuất hiện cho phép chúng ta chọn image file (thuộc một
trong các formats sau: *.BMP, *.WMF, *.GIF, *.JPG, *.ICO). Chúng ta hãy thử tìm
hiểu sự khác biệt giữa hai controls.
Image control: Là một lightweight (nhẹ) control (một số lightweight control khác
là Line, Shape và Label control). Một lightweight control cần ít system resource (tài
nguyên của hệ thống thí dụ như thời gian và bộ nhớ) hơn các controls khác(như
PictureBox, Command Button control...). Ta không thể đặt Image control lên trên một
control khác trừ khi đặt lên một container control (như picturebox, frame). Ngoài ra
control này không thể nhận được focus lúc run time.
PictureBox control l: có nhiều chức năng hơn Image control. Nó có thể được đặt
bất kỳ nơi nào. Ngoài ra nó còn là một container control nghĩa là chúng ta có thể đặt
các control khác nhau vào bên trong PictureBox.
II.
Thực Hành:
Mở một Project mới , đặt một PictureBox control lên form1. Sau đó đặt một Image
control lên trên picturebox1. Double click vào property Picture của image1. Một
window sẽ hiện ra cho phép chúng ta chọn một image file. (Nếu Visual Basic được
install đầy đủ, quý vị có thể tìm các Image files trong c:\ Microsoft Visual
Studio\Common\Graphics\.). Giả sử chúng ta chọn hình như hình1. Sau đó
chúng ta có thể tùy ý vẽ các control như Shape, Line control lên trên form hoặc
PictureBox. Chẳng hạn trong bài này để vẽ một hình Oval như hình1 chúng ta click
vào Shape control, vẽ một hình chữ nhật lên PictureBox. Chọn property cho
Shape1như bảng sau:
Property Value
Shape 2-Oval
BackStyle 1-Opaque
BackColor &H00FF0000&(Blue)
Shape1 Properties.
Hình 1.
Như vậy nếu muốn vẽ các hình căn bản như đường thẳng, hình tròn, oval, chữ
nhật v.v chúng ta có thể dùng Line và Shape control.Ðồng thời có thể thay đổi
properties để có được hình như ý. Còn nếu muốn load một hình có sẳn thì dùng
Image hoặc PictureBox control.
Bây giờ chúng ta hãy thử thay đổi không khí bằng cách "play around" với method
PaintPicture của PictureBox. Ðánh vào những dòng sau:
Dim dragging As Boolean
Private Sub Picture1_MouseDown(Button As Integer, Shift As Integer, X As Single, Y As
Single)
dragging = True
End Sub
Private Sub Picture1_MouseMove(Button As Integer, Shift As Integer, X As Single, Y As
Single)
If dragging Then Picture1.PaintPicture Image1, X, Y
End Sub
Private Sub Picture1_MouseUp(Button As Integer, Shift As Integer, X As Single, Y As Single)
dragging = False
End Sub
Hãy thử chạy chương trình. Ấn nút trái chuột(Mouse), giữ nguyên như thế và kéo
chuột(drag) vẽ một hình gì chẳng hạn. Ổ thật là tuyệt vời ! Hình chúng ta đang vẽ
được tạo ra bởi Image1. Ví dụ chúng tôi vẽ chữ Vovi như Hình 2:
Hình 2.
Giải thích
: Chúng ta dùng biến dragging thuộc loại Boolean (True/False) để nhận biết
user đang kéo chuột hay không, khi nút trái chuột được ấn thì xảy ra event
MouseDown đối với picture1. chúng ta cho dragging=True. Khi mouse di chuyển thì
xảy ra event MouseMove, ta kiểm tra nếu đúng là user đang vẽ thì gọi method
PaintPicture để vẽ Image1 tại vị trí tương ứng. Khi user thả nút trái chuột ra
(MouseUp)thì cho dragging=False báo hiệu user đã ngưng vẽ.
Tóm lại để trang trí (decorate) một Form chúng ta có thể dùng các graphics
controls hoặc graphics methods. Tuy nhiên Image và PictureBox control có các events
như MouseUp, MouseDown, MouseMove...Trong khi Shape và Line control không có
event, nghĩa là chỉ thuần túy dùng cho việc trang trí.