Bài 4: Ðồ họa: PictureBox, Image, Shape và Line controls

1. 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.

2. 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:

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í.