Hư
ớng dẫn lập tr
ình VB.NET
Chương 16: S
ử lý đồ họa v
à các hiệu ứng ảnh động
Biên so
ạn: Phạm Đức Lập
- 1 - Add: cnt-44-dh, VIMARU
Chương 16:
Xử lý đồ họa và các hiệu ứng ảnh động
oOo
N
ội dung thảo luận:
- S
ử dụng thư viện hay không gian tên System.Drawing để vẽ ảnh đồ họa
- T
ạo hiệu ứng ảnh động trên form
- Co giãn
đối tượng trên form
- T
ạo một form trong suốt (transparency)
VB.NET cung c
ấp đủ công cụ và thư viện để khai thác các hiệu ứng đồ họa. Trong chương
này chúng ta sẽ khám phá việc tạo các form mang dáng dấp đồ họa, tạo hiệu ứng ảnh động
d
ựa v
ào PictureBox và bộ định thời Timer, co giãn các đối tượng dựa vào thuộc tính
Height và Width.
Chú ý:
 VB.NET s

l.
Có hai tr
ục, trục ngang là trục hoành
– tr
ục x, chiều hướng qua phải. Trục dọc, chiều
hương xu
ống dưới là trục tung
– tr
ục y. Một điểm trên form được xác định bởi cặp tọa độ
(x, y).
2. L
ớp xử lý đồ họa System.Drawing.Graphics
L
ớp Graphics trong thư viện
System.Drawing ch
ứa các phương thức và thuộc tính để vẽ
hình ảnh lên form. Các lớp khác bạn có thể tham khảo trong Help của VB.NET.
Hư
ớng dẫn lập tr
ình VB.NET
Chương 16: S
ử lý đồ họa v
à các hiệu ứng ảnh động
Biên so
ạn: Phạm Đức Lập
- 2 - Add: cnt-44-dh, VIMARU
Sau đây là các phương th
ức dùng vẽ đường hình học cơ bản có trong lớp Graphics:
Đư
ờng h

DrawCurve
Đư
ờng cong tự nhiên nối thành từ mảng các điểm
Đư
ờng cong bezier
DrawBezier
Đư
ờng cong Bezier
Ngoài ra còn có m
ột số hàm tô đầy như là FillRectangle, FillEllipse, FillPolygon.
Khi sử dụng các phương thức của system.Drawing.Graphics bạn cần tạo ra một thể hiện
c
ủa biến lớp Graphics.
Ti
ếp theo tạo ra các đối t
ượng bút vẽ (Pen), chổi vẽ (Brush) để xác
đ
ịnh nét vẽ h
ình học sẽ dùng vẽ và tô. Đối tượng vẽ Pen được truyền như tham số cho các
phương th
ức vẽ không cần đến tô m
àu. Đối tượng Bru
sh đư
ợc truyền nh
ư tham số cho các
phương th
ức vẽ yêu cầu đến tô màu.
Ví d
ụ như phương thức DrawLine sau sẽ vẽ đường
th

ình hay thay
đổi kích thước của form thì đường thẳng sẽ biến mất. Muốn nó hiện
di
ện th
ường xuyên thì bạn phải biết khi nào cần vẽ lại đường thẳng. VB cung cấp sự kiện
Paint đ
ể thực hiện công việc n
ày
. B
ất kỳ khi n
ào chương trình bị Windo
ws xóa n
ội dung
c
ửa sổ và yêu cầu vẽ lại, nó sẽ gọi đến phương thức Paint, vì thế muốn tất cả các hình ảnh
trên form hi
ển thị thường trực bạn cần đặt nó trong sự kiện Paint này.
Trong bài t
ập MyDrawShaps sau đây, chúng ta sẽ thực hành vẽ các đường cơ bản l
ên form
s
ử dụng sự kiện Paint này. Bạn có thể di chuyển cửa sổ khác đè lên, thay đổi kích thước
mà các hình không h
ề mất đi.
2.2. Chương tr
ình MyDrawShaps v
ẽ hình chữ nhật, đường thẳng và Ellipse
T
ạo mới một Solution và Add vào một dự án cùng tên MyDrawSha
ps

góc.
Ch
ạy chương trình:
B
ạn ấn F5 để chạy chương trình.
Khi chương tr
ình chạy, thủ tục For
m1_Paint đư
ợc triệu gọi và các hình xuất hiện. Bạn có
th
ể thay đổi kích thước hay cho một cửa sổ khác đè lên mà không làm mất đi các hình trên
đ
ã vẽ. Kết quả:
Hư
ớng dẫn lập tr
ình VB.NET
Chương 16: S
ử lý đồ họa v
à các hiệu ứng ảnh động
Biên so
ạn: Phạm Đức Lập
- 4 - Add: cnt-44-dh, VIMARU
3. Thêm ho
ạt h
ình cho chương trình
Trong phần này chúng ta sẽ khám phá một số hiệu ứng đơn giản như di chuyển vị trí ảnh
trong PictureBox, phóng to, thu nh
ỏ ảnh kết hợp với bộ định thời Timer.
3.1. Di chuy
ển một đối tượng trên form

SetBounds
Thi
ết lập phạm vi (kích th
ước và vị trí cho đối tượng)
Thu
ộc tính Left v
à Top được dùng nhiều nhất khi muốn thay đổi vị trí của đối tượng. Để
thay đ
ổi vị trí đối t
ượng theo chiều ngang, ta thay đổi hay
gán l
ại giá trị cho Left. Ng
ược
l
ại theo chiều dọc, thay đổi hay gán lại giá trị cho Top.
Ví d
ụ:
Đ
ể di chuyển đối tượng PictureBox1 sang ngang 300 bạn cộng Left của nó lên 300:
PictureBox1.Left = PictureBox1.Left + 300
Hư
ớng dẫn lập tr
ình VB.NET
Chương 16: S
ử lý đồ họa v
à các hiệu ứng ảnh động
Biên so
ạn: Phạm Đức Lập
- 5 - Add: cnt-44-dh, VIMARU
Đ

d
ụng đối tượng Timer để định thời gian di chuyển cho đối tượng ảnh chiếc ô tô (bạn có thể
l
ấy bất cứ ảnh nào mình thích, miễn là dung lượng đủ nhỏ để chương trình chạy không quá
ch
ậm).
Tìm hiểu chương trình:
Chương tr
ình có hai nút
là “Lên trên” và “Xu
ống d
ưới” cùng một PictureBox. Khi người
dùng click vào m
ột trong hai nút th
ì ảnh chiếc ô tô sẽ tự động di chuyển theo chiều đó.
Thi
ết kế giao diện:
Hư
ớng dẫn lập tr
ình VB.NET
Chương 16: S
ử lý đồ họa v
à các hiệu ứng ảnh động
Biên so
ạn: Phạm Đức Lập
- 6 - Add: cnt-44-dh, VIMARU
B
ạn tạo mới một Solution và add vào một dự án cùng tên là MyMovingIcon rồi thiết kế
giao di
ện nh

Dim lentren As Boolean
Ti
ếp theo ta tạo thủ tục
Timer1_Tick đ
ể tạo hiệu ứng di chuyển ảnh. Bạn double
– click
vào đ
ối tượng Timer1 để tạo thủ tục này và nhập vào đoạn mã như sau:
If lentren = True Then
'Di chuy
ển ảnh l
ên trên
If PictureBox1.Top > 10 Then
PictureBox1.Location = New Point _
(PictureBox1.Location.X - Int(Rnd() * 5), _
PictureBox1.Location.Y - Int(Rnd() * 5))
End If
Else
'Di chuy
ển ảnh xuống dưới
If PictureBox1.Top < (Me.Size.Height - 75) Then
PictureBox1.Location = New Point _
(PictureBox1.Location.X + 10, _
PictureBox1.Location.Y + 10)
End If
End If
Khi Timer ho
ạt động (thuộc tính Enable = True) thì sau khoảng 75 / 1000 giây, thủ tục
Timer_Tick s
ẽ được gọi và nó tiến hành kiểm tra vị trí của PictureBox1 để thực thi hành

ống dưới” để xem ảnh di chuyển xuống dưới:
4. Phóng to, thu nh
ỏ đối t
ượng khi chương trình đang thực thi
B
ạn cũng có thể sử dụng thuộc tính Height v
à Wid
th đ
ể thay đổi chiều cao, chiều rộng của
đ
ối t
ượng để đối tượng có thể phóng to, thu nhỏ hay co giãn được.
Bây gi
ờ chúng ta sẽ
ch
ỉnh sửa b
ài tập MyMovingIcon để có thể minh họa cách phóng to, thu nhỏ của đối tượng
PictureBox1.
Làm theo các bư
ớc sau đây:
- M
ở
l
ại Solution MyMovingIcon nếu đã đóng nó.
- Tr
ở lại cửa sổ thiết kế giao diện và tạo thêm ba nút nhấn mới là
btnDungdichuyen – Nút nh
ấn tạm dừng di chuyển nếu Icon đang đi chuyển theo
l
ệnh; btnPhongto

btnDungdichuyen_Click:
Timer1.Enabled = False
Th
ủ tục n
ày sẽ thiết lập lại thuộc tính Enable của Timer1 là False để dừng việc di chuyển
ảnh.
T
ạo thủ tục
PictureBox1_Click phóng to
ảnh nếu người dùn click vào ảnh:
PictureBox1.Height = PictureBox1.Height + 15
PictureBox1.Width = PictureBox1.Width + 15
Thủ tục này tăng các giá trị chiều cao (Height) và chiều rộng (Width) của PictureBox1 lên
đ
ể ảnh trong nó co gi
ãn theo.
Th
ủ tục
btnPhongto_Click phóng to
ảnh:
PictureBox1.Height = PictureBox1.Height + 15
PictureBox1.Width = PictureBox1.Width + 15
Th
ủ tục
btnThunho_Click thu nh
ỏ ảnh:
PictureBox1.Height = PictureBox1.Height - 15
PictureBox1.Width = PictureBox1.Width - 15
Th
ủ tục n

ạo cửa sổ Form trong suốt
Sau đây chúng ta s
ẽ tạo hiệu ứng trong suốt (transparency) cho cửa sổ form.
B
ạn mở lại
Solution MyMovingIcon n
ếu đã đóng nó. Bạn tạo thêm hai nút nhấn là btnTrongsuot
– nút
nh
ấn tạo độ trong suốt cho Form và nút btnMacdinh
– nút nh
ấn đưa form trở về trạng thái
ban đ
ầu.
Hư
ớng dẫn lập tr
ình VB.NET
Chương 16: S
ử lý đồ họa v
à các hiệu ứng ảnh động
Biên so
ạn: Phạm Đức Lập
- 10 - Add: cnt-44-dh,
VIMARU
Vi
ết m
ã:
T
ạo thủ tục
btnTrongsuot_Click t

ọc.