Chương 2 – Một số khái niệm cơ bản

29
Chương 2 – Một số khái niệm cơ bản

description

Chương 2 – Một số khái niệm cơ bản. Không gian màu RGB. Màu có được bằng cách trộn ba màu cơ bản là Red, Green, Blue. Nhắc lại: phần cấu trúc và hoạt động của màn hình CRT Đặc tả màu: mỗi thành phần màu tương ứng với 1 số từ 0 đến giá trị lớn nhất (tùy theo số bit cho mỗi điểm ảnh) - PowerPoint PPT Presentation

Transcript of Chương 2 – Một số khái niệm cơ bản

Page 1: Chương 2 –  Một số khái niệm cơ bản

Chương 2 – Một số khái niệm cơ bản

Page 2: Chương 2 –  Một số khái niệm cơ bản

Đồ họa MT - Ch02 Khoa CNTT - ĐH BK TpHCM 2

Không gian màu RGB• Màu có được bằng cách trộn ba màu cơ bản là

Red, Green, Blue. Nhắc lại: phần cấu trúc và hoạt động của màn hình CRT

• Đặc tả màu: mỗi thành phần màu tương ứng với 1 số từ 0 đến giá trị lớn nhất (tùy theo số bit cho mỗi điểm ảnh)

• Các màu quen thuộc:black = (0, 0, 0) red = (255, 0, 0)

green = (0, 255, 0) blue = (0, 0, 255)

yellow = (255, 255, 0) white = (255, 255, 255)

Page 3: Chương 2 –  Một số khái niệm cơ bản

Đồ họa MT - Ch02 Khoa CNTT - ĐH BK TpHCM 3

Không gian màu RGB (tt.)

Page 4: Chương 2 –  Một số khái niệm cơ bản

Đồ họa MT - Ch02 Khoa CNTT - ĐH BK TpHCM 4

Điểm ảnh (Pixel)

• Giá trị lớn nhất cho mỗi thành phần màu là 255 dùng 8 bit để đặt tả mỗi thành phần dùng 24 bit để đặt tả màu cho mỗi pixel

• Hệ màu RGB được sử dụng rộng rãi trong các hệ thống đồ họa hiện nay

Page 5: Chương 2 –  Một số khái niệm cơ bản

Đồ họa MT - Ch02 Khoa CNTT - ĐH BK TpHCM 5

Kiểu dữ liệu cho điểm ảnh

type point = record x, y : real end;

• Xác định bởi 2 tọa độ (x, y)

Page 6: Chương 2 –  Một số khái niệm cơ bản

Đồ họa MT - Ch02 Khoa CNTT - ĐH BK TpHCM 6

Thiết lập 1 điểm ảnh

• VB: PSet (x, y), colorx, y: integercolor: QBColor(integer): màu lấy từ bảng màu

• Pascal: SetPixel(x, y, color)

Page 7: Chương 2 –  Một số khái niệm cơ bản

Đồ họa MT - Ch02 Khoa CNTT - ĐH BK TpHCM 7

Lấy thông tin về điểm ảnh

• VB: Point(x, y) RGB values

• Pascal: GetPixel(x, y) RGB values

Page 8: Chương 2 –  Một số khái niệm cơ bản

Đồ họa MT - Ch02 Khoa CNTT - ĐH BK TpHCM 8

Định dạng file ảnh

• Ảnh được lưu xuống tập tin ở các định dạng khác nhau:– BMP: dữ liệu được lưu trữ trực tiếp không biến

đổi, giống như trên bộ nhớ– JPG, TIF, …: các dữ liệu được nén có mất mát

• Useful link:

Page 9: Chương 2 –  Một số khái niệm cơ bản

Đồ họa MT - Ch02 Khoa CNTT - ĐH BK TpHCM 9

Device Independent Bitmap

• Định dạng ảnh không phụ thuộc vào thiết bị hiển thị và định dạng lưu trữ

Page 10: Chương 2 –  Một số khái niệm cơ bản

Đồ họa MT - Ch02 Khoa CNTT - ĐH BK TpHCM 10

Offscreen bitmap

• Các dữ liệu chuẩn bị hiển thị có thể thao tác trên các “bộ đệm giả” rồi xuất kết quả ra màn hình. Các bộ đệm giả có thể nằm trên:– Bộ nhớ chính, xuất ra bằng lệnh chép một khối

bộ nhớ đã thao tác ra bộ đệm hiển thị.– Bộ đệm khung không tích cực (non-active

frame buffer), hiển thị bằng lệnh lật (flip) trang (chuyển địa chỉ bắt đầu của bộ đệm khung tích cực)

Page 11: Chương 2 –  Một số khái niệm cơ bản

Đồ họa MT - Ch02 Khoa CNTT - ĐH BK TpHCM 11

Các đối tượng hình học cơ bản

• Điểm

• Đoạn thẳng

• Chuỗi đoạn thẳng (polyline)

• Đa giác (polygon)

• Kí tự (text)

Page 12: Chương 2 –  Một số khái niệm cơ bản

Đồ họa MT - Ch02 Khoa CNTT - ĐH BK TpHCM 12

Đoạn thẳng

• Xác định bởi 2 điểm đầu là 2 điểm ảnh (xa , ya) và (xb , yb), với các toạ độ là đều là số nguyên.

• Biểu diễn tường minh của đường thẳng:

y = m(x – xa) + ya

• Hệ số góc: m = y / x với

y = yb – ya

x = xb – xa

Page 13: Chương 2 –  Một số khái niệm cơ bản

Đồ họa MT - Ch02 Khoa CNTT - ĐH BK TpHCM 13

Biểu diễn đoạn thẳng trên màn hình• Xác định tập các điểm ảnh biểu diễn “tốt nhất” cho đoạn

thẳng.

• Xét trường hợp: xa < xb và 0 < m < 1

• Sinh các điểm ảnh theo phương pháp tăng dần x từ xa đến xb

xi 1 xi

yi 1

Si

Ti

Ñoaïn thaúng lyù töôûngï

y*

Page 14: Chương 2 –  Một số khái niệm cơ bản

Đồ họa MT - Ch02 Khoa CNTT - ĐH BK TpHCM 14

Quy tắc chọn điểm ảnh xấp xỉ• Định nghĩa sai số: e(Ti) = y* - yi - 1

e(Si) = (yi - 1 + 1) - y*• Nếu x = xa thì y = ya

• Nếu xa < x < xb: tính y*, e(Ti), e(Si), rồi xét:

Nếu e(Ti) < e(Si) thì chọn Ti, ngược lại chọn Si

• Nếu x = xb thì y = yb

• Vẽ đoạn thẳng bằng lệnh: • Giải thuật chỉ tính toán dựa trên số nguyên: giải thuật

Bresenham (xem chương 9)

Page 15: Chương 2 –  Một số khái niệm cơ bản

Đồ họa MT - Ch02 Khoa CNTT - ĐH BK TpHCM 15

Chuỗi đoạn thẳng (polyline)

• Chuỗi các đoạn thẳng nối tiếp nhau.

• Lưu trữ chuỗi đoạn thẳng: lưu tập các điểm ảnh (đỉnh - vertex), bằng dãy hay danh sách liên kết.

• Vẽ chuỗi đoạn thẳng: vẽ tuần tự các đoạn thẳng nối các đỉnh

x

y

1.

1.

Page 16: Chương 2 –  Một số khái niệm cơ bản

Đồ họa MT - Ch02 Khoa CNTT - ĐH BK TpHCM 16

Đa giác (polygon)• Bao gồm tập đỉnh (vertex) và tập cạnh (edge)• Là chuỗi đoạn thẳng kín (trùng các đỉnh đầu và

đuôi).• Phân loại:

– Lồi: – Lõm:– Chéo: có ít nhất 1 cặp cạnh cắt nhau

• Các bài toán:– Xác định loại (lồi, lõm, chéo)– Vẽ– Tô màu

Page 17: Chương 2 –  Một số khái niệm cơ bản

Đồ họa MT - Ch02 Khoa CNTT - ĐH BK TpHCM 17

Các hình 2D thông dụng

• Hình chữ nhật (rectangle)

• Ellipse

Page 18: Chương 2 –  Một số khái niệm cơ bản

Đồ họa MT - Ch02 Khoa CNTT - ĐH BK TpHCM 18

Hình chữ nhật

• 4 đỉnh, các góc trong là góc vuông, cạnh song song với trục

• Lưu trữ: 4 giá trị hay 2 đỉnh chéo (thường là top-left, right-bottom)

• Trường hợp đặc biệt: hình vuông (square)• Cấu trúc có sẵn: Rect, trong các ngôn ngữ thông

dụng• Vẽ hình chữ nhật:

VB: Line (x1, y1) – (x2, y2), [color], [B][F]Pascal: Rectangle(left, top, right, bottom)

Page 19: Chương 2 –  Một số khái niệm cơ bản

Đồ họa MT - Ch02 Khoa CNTT - ĐH BK TpHCM 19

Ellipse• Lưu trữ: tâm và 2 bán kính theo 2 chiều x và y, hoặc

hình chữ nhật bao, trục đối xứng của ellipse song song với trục tọa độ

• Trường hợp đặc biệt: hình tròn (circle) có 2 bán kính bằng nhau.

• Vẽ ellipse:VB: Circle (x, y), radius, [color], [start], [end], [aspect]

aspect: vertical dim./horizontal dim.Pascal: Ellipse(left, top, right, bottom)

• Vẽ ellipse nhanh dựa trên phép tính nguyên: giải thuật Michener (xem chương 9)

Page 20: Chương 2 –  Một số khái niệm cơ bản

Đồ họa MT - Ch02 Khoa CNTT - ĐH BK TpHCM 20

Kí tự (text)• Xác định bởi mã kí tự trên bảng mã và font• Bảng mã:

– ASCII: 7 bit – 128 kí tự, 0-40 cho các kí tự điều khiển

– ASCII mở rộng: 8 bit – 256 kí tự

– Unicode: 2 byte – 256 bit

• Hai dạng font:– Dạng bitmap: mỗi bitmap cho từng kí tự, mỗi bộ

bitmap cho từng kích cở (size)

– Dạng truetype: lưu trữ bởi tập lệnh postcript

Page 21: Chương 2 –  Một số khái niệm cơ bản

Đồ họa MT - Ch02 Khoa CNTT - ĐH BK TpHCM 21

Kí tự (tt.)

• Tính chất các dạng font:– Dạng bitmap: dùng cho các ứng dụng đơn giản

– Dạng truetype:• Font được điều chỉnh nhỏ thêm cho từng kích thước

• Cần được chuyển sang dạng bitmap (một cách tự động) khi dùng

• Xuất 1 chuỗi kí tự ra màn hình:VB: Print Msg

tại tọa độ CurrentX, CurrentYPascal: Text(x, y, string)

Page 22: Chương 2 –  Một số khái niệm cơ bản

Đồ họa MT - Ch02 Khoa CNTT - ĐH BK TpHCM 22

Hệ thống thực và tọa độ thực

• Hệ thống thực: bao gồm các đối tượng hình học trong toạ độ thực.

• Đối tượng hình học: – Biểu diễn bằng các mô hình hình học (geometric

model)

– Có các hành vi riêng

• Toạ độ thực (world coordinate system):– Điểm trong mặt phẳng có tọa độ (x, y)

– Đơn vị đo thực tế: mm, m, …

Page 23: Chương 2 –  Một số khái niệm cơ bản

Đồ họa MT - Ch02 Khoa CNTT - ĐH BK TpHCM 23

Thể hiện thế giới thực trên máy tính

• Chuyển tọa độ thực sang tọa độ tương đối trên máy tính

• Các đối tượng hình học thực được biểu diễn bằng các đối tượng hình học được cung cấp bởi máy tính

• Không gian hiển thị tại 1 thời điểm của máy tính có hạn chỉ 1 phần của thế giới thực được hiển thị tại 1 thời điểm

Page 24: Chương 2 –  Một số khái niệm cơ bản

Đồ họa MT - Ch02 Khoa CNTT - ĐH BK TpHCM 24

Phép nhìn (viewing)• Quá trình vẽ lại trên máy tính một phần thế giới thực được

nhìn thấy, được xác định bởi:– Cửa sổ (window): phần của thế giới thực cần được vẽ trên máy

tính– Vùng nhìn (viewport): phần trên màn hình mà cửa sổ được ánh xạ

lên. Vùng nhìn có thể chiếm toàn bộ màn hình.

Width

High

Vuøng nhìn

Màn hìnhHeä toïa ñoä thöïc

Cöûa soå

Page 25: Chương 2 –  Một số khái niệm cơ bản

Đồ họa MT - Ch02 Khoa CNTT - ĐH BK TpHCM 25

Đặc tính của cửa sổ và vùng nhìn• Cửa sổ và vùng nhìn đều là hình chữ nhật.• Kích thước và vị trí của cửa sổ là tùy ý.• Vùng nhìn phải nằm trong giới hạn của màn hình.• Hệ số tỷ lệ chiều ngang trên chiều dọc của cửa sổ

và vùng nhìn không cần phải bằng nhau. Heä toïa ñoä thöïc

Cöûa soå

Width

Màn hình

High

Vuøng nhìn

Page 26: Chương 2 –  Một số khái niệm cơ bản

Đồ họa MT - Ch02 Khoa CNTT - ĐH BK TpHCM 26

Hiện thực phép nhìn• Ánh xạ các đối tượng từ cửa sổ lên vùng nhìn.• Chỉ có một phần của đối tượng trong thế giới thực

trong cửa sổ mới nhìn thấy cần xén (clipping) đi các phần nằm ngoài cửa sổ

Xem các giải thuật chi tiết ở chương 4Window

Page 27: Chương 2 –  Một số khái niệm cơ bản

Đồ họa MT - Ch02 Khoa CNTT - ĐH BK TpHCM 27

Khái niệm cửa sổ trong hệ điều hành Windows

• Mỗi quá trình quản lý duy nhất 1 cửa sổ đang được tích cực (active) tại 1 thời điểm cửa sổ tích cực này được xem là “màn hình” luận lý dùng để hiển thị cho quá trình

• Thay đổi kích thước cửa sổ tích cực kích thước màn hình luận lý thay đổi theo

Page 28: Chương 2 –  Một số khái niệm cơ bản

Đồ họa MT - Ch02 Khoa CNTT - ĐH BK TpHCM 28

Tọa độ qui chuẩn• Cần hiển thị trên nhiều màn hình có kích thước khác nhau:

Heä toïa ñoä thöïc

Cöûa soå

Màn hình1

Vuøng nhìn

Màn hìnhHigh

Vuøng nhìn

Width10

• Giảm phụ thuộc vào thiết bị hiển thị

• Linh động hơn cho môi trường nhiều người sử dụng

Page 29: Chương 2 –  Một số khái niệm cơ bản

Đồ họa MT - Ch02 Khoa CNTT - ĐH BK TpHCM 29

Tóm tắt• Không gian màu RGB• Các đối tượng cơ bản và cách hiển thị:

– Điểm ảnh– Ảnh– Đoạn thẳng, chuỗi đoạn thẳng, đa giác– Các hình 2D cơ bản: hình chữ nhật, hình vuông,

hình tròn, ellipse

• Các hệ thống tọa độ: thực, màn hình, qui chuẩn