Góp ý về việc lập trình giao diện trong VB

(Post 16/06/2007) Trong các số báo trước đây TGVT đã nhiều lần trả lời về vấn đề “tạo giao diện bất kì trong VB 6.0”, tuy nhiên theo tôi các câu trả lời chỉ đáp ứng được yêu cầu “tạo giao diện khác hình chữ nhật” chứ chưa có được tính “bất kì”. Việc tạo giao diện bất kì từ các toạ độ mà bạn nhập hay đọc từ một file dữ liệu vào là việc gần như không thực tế. Trong bài viết này tôi muốn giới thiệu một kĩ thuật tạo giao diện bất kì, mà theo tôi biết thì Microsoft đã dùng kĩ thuật này để tạo các “skin” cho Windows Media Player.

Giao diện máy tính là tập hợp các điểm ảnh (pixel), được sắp xếp như một ma trận mà ta gọi là pixel, giao diện của các ứng dụng VB cũng vậy. Thuật toán ở đây là duyệt qua tất cả các cột và các hàng ma trận pixel của form, gặp điểm ảnh nào có màu trùng với màu cần xoá thì ta làm cho nó trong suốt, cuối cùng, khi kết thúc việc duyệt này ta được hình ảnh tạo bởi các điểm ảnh mà ta không xoá, đó chính là giao diện mong muốn.

Một cách để đơn giản hoá dữ liệu màu của các điểm ảnh ta muốn xoá là gán cho chúng cùng một màu, với điều kiện màu này không trùng hoặc trùng với một số ít điểm ảnh mà ta không muốn xoá. Việc lấy màu của các điểm ảnh trong VB được giao cho hàm API GetPixel đảm nhận. Còn để gán màu, ta dùng Photoshop. Ở đây tôi sẽ làm từng bước cho một ví dụ cụ thể, bạn có thể làm tương tự với giao diện mà mình mong muốn.

Ví dụ này, tôi sẽ tạo ứng dụng VB giao diện là skin của Windows Media Player.

Đầu tiên, bạn mở chương trình Window Media Player (WMP), ở đây tôi dùng phiên bản 10. Chọn một skin tuỳ ý.

Đăng ký ngay

Đăng ký ngay

– Nhấn chuột phải lên màn hình desktop, chọn Properties. Trong hộp thoại Dislay Properties chọn thẻ Desktop, trong mục Background chọn None (bạn nên thiết lập hình nền của màn hình Desktop là None để sau này dễ cắt ảnh trong Photoshop).

– Với cửa sổ WMP ở trên cùng, ấn tổ hợp Alt+PrintScreen để chụp cửa sổ WMP.

– Mở Photoshop. Tạo một file mới và paste hình vừa chụp vào.

– Dùng công cụ Magic Wand Tool (W) và Seclection Tool để chọn hình giao diện WMP. Xoá màu nền đi, chỉ giữ lại hình hình máy phát nhạc.

– Chọn công cụ Paint Bucket Tool. Vào menu Window/Color. Bảng Color cho ta thiết lập màu theo kiểu RGB, do màu tím xuất hiện ít trong hình máy nghe nhạc nên trong bảng Color ta thiết lập ba giá trị R,G,B lần lượt là 255,0,255 (màu tím). (Yêu cầu bạn phải nhập giá trị số vào, nếu bạn chỉnh bằng tay sẽ có sai số làm ảnh hưởng kết quả sau này).

– Bây giờ bạn lưu nó lại dưới định dạng bitmap (*.BMP).

– Mở chương trình VB 6.0, tạo một dự án Standard EXE. Trong bảng thuộc tính của Form1 ta thiết lập:

• Name: bg
• Autoredraw: True
• BorderStyle: 0-None
• Pictures: Ảnh bạn vừa lưu

– Bạn hãy co giãn form sao cho càng khít với hình skin càng tốt.

– Thêm một module vào chương trình, trong module khai báo như sau:

Public Declare Function GetPixel Lib “gdi32” (ByVal hdc As Long, ByVal X As Long, ByVal Y As Long) As Long

Public Declare Function SetWindowRgn Lib “user32” (ByVal hwnd As Long, ByVal hRgn As Long, ByVal bRedraw As Boolean) As Long

Public Declare Function CreateRectRgn Lib “gdi32” (ByVal X1 As Long, ByVal Y1 As Long, ByVal X2 As Long, ByVal Y2 As Long) As Long

Public Declare Function CombineRgn Lib “gdi32” (ByVal hDestRgn As Long, ByVal hSrcRgn1 As Long, ByVal hSrcRgn2 As Long, ByVal nCombineMode As Long) As Long

Public Declare Function DeleteObject Lib “gdi32” (ByVal hObject As Long) As Long

Public Const RGN_DiFF = 4

Dim CurRgn, TempRgn As Long

Public Function AutoFormShape(bg As Form, transColor)

Dim X, Y As integer

Tạo vùng cơ sở cho cửa sổ hiện hành

CurRgn = CreateRectRgn(0, 0, bg.ScaleWidth, bg.ScaleHeight)

Đi qua từn cột các diểm ảnh trên form

While Y <= bg.ScaleHeight

Đi qua từng hàng các điểm ảnh trên form

While X <= bg.ScaleWidth

Nếu màu của điểm ảnh trùng với màu ta chọn làm trong suốt thì

if GetPixel(bg.hdc, X, Y) = transColor Then

Tạo vùng điểm ảnh tạm thời cho các điểm ảnh này

TempRgn = CreateRectRgn(X, Y, X + 1, Y + 1)

Kết hợp diểm ảnh tạm thời và vùng cơ sở ở trên. Dùng hằng số RGN_DiFF = 4 để loại bỏ các điểm ảnh. Bằng cách này sẽ làm cho điểm ảnh này trong suốt

CombineRgn CurRgn, CurRgn, TempRgn, RGN_DiFF

Giải phóng tài nguyên hệ thống cấp cho vùng tạm

DeleteObject (TempRgn)

End if

X = X + 1

Wend

Y = Y + 1

X = 0

Wend

Thiết lập vùng cửa sổ cho Window

SetWindowRgn bg.hwnd, CurRgn, True

Xoá tài nguyên hệ thống cấp cho biến CurRgn

DeleteObject (CurRgn)

End Function

Trong thủ tục Form_Load ta nhập lệnh sau:

Private Sub Form_Load()

AutoFormShape Me, RGB(255, 0, 255)

// Đây là màu thiết lập trong Photoshop

Me.Show 1

End Sub

Ở đây tôi mới chỉ đề cập phần tạo giao diện, còn phần di chuyển form và bắt các sự kiện chuột bạn có thể tham khảo các bài viết trước đây trên TGVT.

Hồ Quốc Huy

(theo PC World VN)

FPT Aptech – Hệ Thống Đào Tạo Lập Trình Viên Quốc Tế