THUẬT TOÁN TÔ MÀU

◼ NỘI DUNG CHÍNH.

- Thuật toán tô màu loang (Flood Fill)
- Thuật toán tô màu đường biên (Boundary Fill)
- Thuật toán tô màu đa giác (Scan Line)
 THUẬT TOÁN TÔ MÀU

1. Thuật toán tô màu loang.

a) Khái niệm điểm lân cận (liên thông).

- Lân cận 4:kề nhau theo phương đứng hoặc ngang
- Lân cận 8:kề nhau theo phương đứng, ngang hoặc chéo
b) Khái niệm miền tô:
- Miền tô phải là vùng khép kín theo lân cận 4 hoặc 8.
- Miền trong: Vùng tô có 1 màu đồng nhất, tất cả các điểm
khác màu được coi là biên vùng tô.
- Miền bao đóng: Vùng tô có biên là 1 màu xác định.
 THUẬT TOÁN TÔ MÀU

1. Thuật toán tô màu loang - FloodFill.

a) Xét vùng tô theo miền bao đóng:
Màu tô là FillColor và màu viền là BorderColor.
Sử dụng kỹ thuật đệ quy để xét tất cả các điểm trong vùng tô:
- Xét điểm P thuộc vùng tô:
- Nếu Color(P)≠FillColor và Color(P)≠BorderColor thì:
*Tô màu cho điểm P.
*Xét 4 điểm lân cận (trên, dưới, trái, phải) của P
theo phương pháp tương tự.
- Quá trình kết thúc khi tất cả các điểm được tô.
 THUẬT TOÁN TÔ MÀU

1. Thuật toán tô màu loang - FloodFill.

b) Ví dụ: Tô màu cho vùng bao đóng, điểm xuất phát: 1
- Màu tô: Đỏ; Màu biên: Đen.
 THUẬT TOÁN TÔ MÀU
1. Thuật toán tô màu loang - FloodFill.
• Input:
– Cho trước đa giác P có n đỉnh v0 đến vn-1 (vn trùng `với v0)
– Màu tô đa giác: C
– Tọa độ điểm xuất phát tô: p = (x, y)  P (là điểm bên trong đa giác P)
• Thuật toán
FloodFill (Polygon P, int x, int y, Color C)
if not (OnBoundary (x, y, P) and Colored (x, y, C))
Begin
PutPixel (x, y, C);
FloodFill (P, x+1, y, C);
FloodFill (P, x, y+1, C);
FloodFill (P, x-1, y, C);
FloodFill (P, x, y-1, C);
End;
5
 THUẬT TOÁN TÔ MÀU

2. Thuật toán tô màu tìm biên-BoundaryFill.

a) Xét vùng tô theo miền bao đóng:
Màu tô là FillColor và màu viền là BorderColor.
Sử dụng kỹ thuật đệ quy để tô từng hàng trong vùng tô:
- Xét điểm P thuộc vùng tô:
- Nếu Color(P)≠FillColor và Color(P)≠BorderColor thì:
*Tìm điểm bên trái nhất và điểm bên phải nhất của hàng
chứa điểm P, tô màu hàng vừa tìm.
*Xét tương tự đối với các điểm bên trên hàng vừa tìm.
*Xét tương tự đối với các điểm bên dưới hàng vừa tìm.
- Quá trình kết thúc khi tất cả các điểm được tô.
 THUẬT TOÁN TÔ MÀU

2. Thuật toán tô màu tìm biên-BoundaryFill.

b) Ví dụ: Tô màu cho vùng bao đóng, điểm xuất phát: 1
- Màu tô: Đỏ; Màu biên: Đen.
 THUẬT TOÁN TÔ MÀU

3. Thuật toán tô màu đa giác-Giải thuật dòng quét-Scanline.

- Cho dòng quét ngang chạy từ Ymin đến Y max của đa giác.
- Với mỗi dòng quét tìm các giao điểm với cạnh đa giác.
- Với các giao điểm tìm các đoạn nằm trong đa giác để tô màu.

1 2 3 4
 3. Thuật toán tô màu đa giác-Giải thuật dòng quét-Scanline.

• Ý tưởng: Sử dụng giao điểm giữa các biên đa giác và đường quét
để nhận ra pixel có trong đa giác?

1 4 scan line
1
2,3 scan line
1 2,3 4 5 2

• Thuật toán:
– Cho trước đa giác P với n đỉnh v0 đến vn-1 (vn trùng với v0)
– Cho trước C là màu tô đa giác
– Giao của mỗi đường quét với các cạnh đa giác thì sẽ là điểm vào hay
điểm ra đa giác
– Tìm ra các đoạn thẳng nằm trong đa giác để vẽ theo màu C

9
3. Thuật toán tô màu đa giác-Giải thuật dòng quét-Scanline.

ScanConvert( Polygon P, Color C)

Begin
For y:=yMin To yMax Do
Begin
I <= Các giao điểm của cạnh đa giác P
với đường Y = y;
Sắp xếp I: X tăng dần và
Vẽ đoạn thẳng cách quãng theo màu C;
End;
End;

10
 3. Thuật toán tô màu đa giác-Giải thuật dòng quét-Scanline.

• Tối ưu chuyển đổi dòng quét

– Sử dụng đồng thời thuật toán Bresenham hay thuật toán
trung điểm vẽ đoạn thẳng
• Các trường hợp đặc biệt

11
 So sánh các thuật toán tô màu

Loang (Flood Fill) Dòng quét (Scanline)

Đơn giản Phức tạp hơn

Thuật toán rời rạc hóa trong không Thuật toán rời rạc hóa trong đối
gian màn hình tượng hoặc/và không gian màn hình
Yêu cầu gọi hệ thống GetPixel/Val Độc lập với thiết bị

Đòi hỏi điểm seed Không đòi hỏi điểm seed

Yêu cầu stack rất lớn Yêu cầu stack nhỏ

12
 THUẬT TOÁN TÔ MÀU
4. Nhận xét.

- Thuật toán tô màu loang và tô màu biên có thể tô cho

vùng có hình dạng bất kỳ, phụ thuộc vào màu hiện
trạng của vùng cần tô.

- Thuật toán tô màu loang đơn giản nhưng tốn bộ nhớ,

dễ tràn bộ nhớ.

- Thuật toán tô màu tìm biên phức tạp hơn nhưng tiết
kiệm bộ nhớ.

- Thuật toán tô màu cho các hình hình học cơ bản và đa

giác không phụ thuộc vào màu hiện trạng của vùng tô.
Xây dựng phức tạp hơn.
Các phép biến đổi 2D
2D Transformations

14
15
 Giới thiệu
• Bản chất của phép biến đổi hình học là thay đổi vị trí của đối
tượng, làm thay đổi đối tượng về hướng, kích thước, hình
dạng.
• Hai phương pháp để biến đổi hình học:
– Biến đổi đối tượng: thay đổi tọa độ của đối tượng.

– Biến đổi hệ tọa độ: tạo hệ tọa độ mới và tất cả đối tượng sẽ được
chuyển về hệ tọa độ mới.

• Các phép biến đổi hình học cơ bản: tịnh tiến, quay, biến đổi tỉ
lệ, biến dạng.
16
 Phép biến đổi hình học
• Một phép biến đổi là một ánh xạ T:

T : R2 → R2
 x ' = f (x , y )
P (x , y )  Q (x ' , y ' ) 
y ' = g (x , y )

P(x,y)

Q(x’,y’)

17
 Phép biến đổi hình học (cont.)
• Phép biến đổi Affine là phép biến đổi với f(x,y) và g(x,y) là 2 hàm
tuyến tính:
x ' = ax + by + c

y ' = dx + ey + f

• Biểu diễn phép biến đổi Affine dưới dạng ma trận:

 x '   a b c  x 
    
 y '  =  d e f  y   Q = T .P
 1   0 0 1  1 
    
• Thông thường, chúng ta chỉ khảo sát phép biến Affine nên ta
thường dùng thuật ngữ phép biến đổi để ngụ ý là phép biến đổi
Affine.

18
 Phép tịnh tiến - Translation
• Phép tịnh tiến dùng để dịch chuyển đối tượng từ vị trí này sang vị
trí khác.

try

P trx

19
 Phép tịnh tiến (cont.)

• Gọi tr = (trx , try) là vector tịnh tiến từ điểm P đến

điểm Q thì:

 x' = x + trx

 y ' = y + try

• Ma trận biến đổi của phép tịnh tiến:

 1 0 tr x 
 
T (tr x ,tr y ) =  0 1 tr y 
0 0 1 
 
20
 Phép quay - Rotation

• Đổi hướng đối tượng. Q

• Phép quay gồm có tâm quay C, góc quay α.
• Biến đổi điểm P thành Q sao cho:
– P và Q nằm trên đường tròn tâm C, α P
– Góc PCQ bằng α C
• Do vị trí của tâm quay nên ta có 2 loại phép quay:
– Phép quay quanh gốc tọa độ
– Phép quay quanh một tâm bất kì
+
• Góc quay theo qui ước chiều dương
là ngược chiều kim đồng hồ.
21
Phép quay một góc α quanh gốc tọa độ

 P 

O O

 cos − sin 0 
 x ' = cos  x − sin y  
  T ( ) =  sin cos  0 
 y ' = sin x + cos  y  
 0 0 1
22
 Phép quay một góc α quanh gốc tọa độ
Phép đối xứng tâm (gốc tọa độ)
• P và Q đối xứng qua gốc tọa độ. Do đó, phép đối xứng tâm là phép
quay quanh gốc tọa độ một góc 1800.

=1800 P

O O

 − 1 0 0
x ' = − x  
 (
 T 180 0 ) =  0 − 1 0
 y ' = −y  0 0 1 
 23
 Phép quay đối tượng quanh điểm cố định
• Vấn đề
– Cho trước tam giác ABC, tọa độ chốt (xF, yF) và góc xoay (a)
– Thực hiện biến đổi để có kết quả (d)
• Các bước thực hiện
– Dịch đối tượng sao cho điểm chốt trùng gốc tọa độ
– Thực hiện xoay theo góc cho trước
– Dịch ngược đối tượng sao cho điểm chốt về vị trí ban đầu

xF, yF xF, yF

d)
a) b) c)
24
 Phép quay đối tượng quanh điểm cố định
• Ma trận chuyển đổi được tính:

 1 0 0  cos sin  0  1 0 0
 0 1 0 .− sin  cos 0. 0 1 0 
   
− xR − y R 1  0 0 1  xR y R 1
 cos sin  0
=  − sin  cos 0
(1 − cos )xR + y R . sin  (1 − cos ) y R − xR . sin  1

xF, yF xF, yF

d)
a) b) c)
25
 Phép quay một góc α quanh tâm bất kì

Q
Q’

P’ P
 

C(xc,yc)
O

T(-xc,-yc) T(α) T(xc,yc)

P P’ Q’ Q
26
 Phép quay một góc α quanh tâm bất kì (cont.)
• Ta có thể chứng minh phép quay tâm C(xc, yc) một góc α là kết hợp
của các phép biến đổi sau đây:
– Tịnh tiến theo vector (-xc,-yc) để dịch chuyển tâm quay về gốc tọa độ:
P’ = T(-xc, -yc) . P
– Quay quanh gốc tọa độ một góc : Q’ = T() . P’
– Tịnh tiến theo vector (xc,yc) để đưa tâm quay về vị trí ban đầu:
Q = T(xc,yc) . Q’
• Kết hợp 3 phép biến đổi trên ta được:
Q = T(xc,yc) . T() . T(-xc,-yc) . P
• Như vậy, ma trận biến đổi của phép quay tâm bất kì là:

 cos − sin (1 − cos )x c + sin y c 

 
T (x c , y c ,  ) = T (x c , y c )T ( )T (− x c ,−y c ) =  sin cos − sin x c + (1 − cos )y c 
 0 0 1 
 

27
 Bài tập
Bài 1: Hãy tìm ma trận biến đổi để có đối tượng phản chiếu qua y=x và y=-x.
Bài 2: Cho tam giác A(3, 1), B(1, 3), C(3,3):
▪ Hãy xác định tọa độ mới của các đỉnh tam giác sau khi xoay một góc 900
ngược chiều kim đồng hồ xung quanh điểm P(2, 2).

▪ Phóng to tam giác lên hai lần, giữ nguyên vị trí của điểm C. Tính tọa độ các
đỉnh tam giác sau khi biến hình.
Bài 3: Lấy đối xứng hình thoi ABCD với toạ độ các đỉnh A(-1, 0), B(0,-2), C
(1, 0), D(0,2) qua:
a/ đường nằm ngang y=2.
b/ đường thẳng đứng x=2.
c/ đường thẳng y=x+2.
Bài 4. Cho ΔABC có các toạ độ đỉnh là A(2,2), B(3,1) và C(4,3).
Xác định ma trận biến đổi để biến đổi tam giác này thành A’B’C’ biết ảnh
A’(4,3), B’(4,5) và C’(7,3).
28
 Phép biến đổi tỉ lệ - Scaling
• Co giản đối tượng x ' = s x x s x 0 0
 
 T (s x , s y ) =  0 sy 0
y ' = s y y  0 0 1 

• sx và sy được gọi là hệ số co giản theo trục x và trục y

29
 Phép biến đổi tỉ lệ (cont.)
• Khi sy = 1 thì đối tượng co giản theo trục x

• Khi sx = 1 thì đối tượng co giản theo trục y

30
 Phép biến đổi tỉ lệ (cont.)
• Khi sy = sy thì ta gọi đây là phép biến đổi đồng dạng – uniform scaling, bảo
toàn tính cân xứng của đối tượng.
• Nếu sx = sy < 1 thì đây là phép thu nhỏ, ngược lại thì đây là phép phóng to

Thu nhỏ

Phóng to

31
 Phép biến đổi tỉ lệ (cont.)
Phép đối xứng trục
• Đối xứng qua trục hoành: • Đối xứng qua trục tung:


 x '= x  sx = 1 
x ' = − x s x = −1
    

y ' = − y s y = −1 
 y ' = y  sy = 1

1 0 0
0 − 1 0
 
0 0 1

 − 1 0 0
 0 1 0
 
 0 0 1

32
 Phép đối xứng

• Phép đối xứng

 − 1 0 0  − 1 0 0
1 0 0  0 − 1 0
0 − 1 0  0 1 0  
     0 0 1
0 0 1  0 0 1

Phản chiếu Phản chiếu

Phản chiếu qua gốc tọa
qua trục x qua trục y
độ
1
1
1’ 1
3
2 3 2
3’ 2 3
2’ 2’
2’ 3’ 1’
3’
1’
33
 Phép biến dạng - Shearing
• Thay đổi hình dạng của đối tượng

• Phép biến dạng theo trục x làm thay đổi hoành độ còn tung độ giữ nguyên.

 1 sh x 0
x ' = x + sh x y  
  T (sh x , 0 ) = 0 1 0
 y ' = y 
0 0 1 
• Phép biến dạng theo trục y làm thay đổi tung độ còn hoành độ giữ nguyên.

 1 0 0
 x '= x  

y ' = sh x + y
 T (0 , sh y ) =  shy 1 0 34
 y  0 0 1 

 Phép biến dạng - Shearing
• Phép biến dạng tổng quát

 1 sh x 0
x ' = x + sh x y  

y ' = sh x + y
 T (sh x , sh y ) =  shy 1 0
 y  0 0 1 


35
 Bài tập
Biến đổi đối tượng 2D
• Mô tả tính chất hình học của đối tượng
points

color

center
Hệ tọa độ đối tượng

Hệ tọa độ thực

– Tâm, có tọa độ so với hệ tọa độ thực : center

– Dạng hình học, có dạng đa giác đối xứng qua tâm : points
– Màu sắc : color

36
 Bài tập
Biến đổi đối tượng 2D (cont.)
• Áp dụng các phép biến đổi trên đối tượng

tr

Hệ tọa độ thực

– Tịnh tiến đối tượng bằng vectơ tr, thực chất là tịnh tiến tâm của đối tượng
– Quay đối tượng theo góc angle, thực chất là quay các đỉnh của đa giác
– …

37