Phần này chỉ nhằm giới thiệu một số các khái niệm cơ bản về chế độ đồ họa, các thủ tục và hàm để: khởi động chế độ đồ họa, vẽ các hình cơ bản như đường thẳng, đường tròn, cung elip, hình
Trang 1PHỤ CHƯƠNG ÐỒ HỌA TRONG TURBO PASCAL
1 Màu và mẩu(kiểu)
2 Đ iểm, kiểu đường thẳng, đường thẳng
3 Các hình không tô
4 Các hình có tô
5 Xử lý chuỗi ký tự trên màn hình đồ họa
6 Cửa sổ trong chế độ đồ họa
7 Đ óng chế độ đồ họa
Phần này chỉ nhằm giới thiệu một số các khái niệm cơ bản về chế độ đồ họa, các thủ tục và hàm để: khởi động chế độ đồ họa, vẽ các hình cơ bản như đường thẳng, đường tròn, cung elip, hình quạt, đa giác, chuỗi ký tự, cửa sổ ViewPort, đã được khai báo sẵn trong Unit Graph của Turbo Pascal
I KHÁI NIỆM VỀ ÐỒ HỌA
Trong Turbo Pascal có hai chế độ thường được sử dụng đó là: chế độ văn bản (text mode) và chế độ đồ họa (graphics mode) Chế độ văn bản thì màn hình được thiết lập hiển thị 25 dòng và 80 cột như đã giới thiệu ở phần trước Còn ở chế độ đồ họa, thì màn hình lại được thiết lập dựa trên từng điểm ảnh (pixel), mỗi màn hình gồm nhiều điểm ảnh được sắp xếp trên các đường thẳng nằm ngang và đường thẳng đứng, sự bài trí
số pixel trên mỗi loại màn hình được gọi là độ phân giải (Resolution), độ phân giải càng cao thì số pixel càng nhiều và hình ảnh càng mịn
Hệ tọa độ cho mỗi loại màn hình có khác nhau (xem bảng 1), chẳng hạn ở loại màn hình VGA là 640x480 như hình sau:
Trang 2Một chương trình đồ họa thường gồm các phần sau:
· Khởi tạo chế độ đồ họa
· Xác định màu nền, màu và kiểu chữ, màu đường vẽ, màu tô và kiểu tô
· Vẽ và tô các hình ta cần thực hiện
· Các thao tác khác như cho hiện dòng chữ, chú thích
· Ðóng chế độ đồ họa để trở về chế độ văn bản
II KHỞI ÐỘNG CHẾ ÐỘ ÐỒ HỌA
Ðể có thể thực hiện chương trình trên chế độ đồ họa, trước tiên ta phải khởi động chế độ đồ họa Việc này được thông qua thủ tục sau:
Procedure InitGraph(var GraphDriver:Integer; var GraphMode: Integer; PathToDriver: string);
Với: GraphDriver, GraphMode là loại màn hình và mốt màn hình (xem bảng 1)
PathToDriver là đường dẫn của thư mục chứa các tập tin điều khiển đồ họa
Ví dụ: Giả sử ta có loại màn hình VGA, mốt là VGAHi, các tập tin điều khiển đồ họa ở trong thư mục F:\WINAPPS\BP\BGI, ta có thể viết phần chương trình khởi động đồ họa như sau:
Uses Graph;
Var mh,mode: integer; {mh: loại màn hình}
Begin
mh:=VGA; mode:=VGAHi; {có thể dùng hằng DETECT cho mh } (1)
Trang 3Initgraph(mh,mode,’ F:\WINAPPS\BP\BGI’);
End
Việc nhớ các loại màn hình và mốt màn hình là điều gây dễ nhầm lẫn, do vậy ta
có thể để cho máy tự động dò tìm loại và mốt màn hình Như vậy ở chương trình trên ta
bỏ dòng (1) thì khi thực hiện máy sẽ tự động dò tìm (DECTECT), đây là điểm rất hay vì
nó sẽ cho khởi động loại màn hình đang sử dụng và mốt đồ họa có độ phân giải cao nhất
Bảng 1: Các giá trị của Grapdriver, GraphMode và Resolution của một số loại màn hình thông dụng.
GraphDriver GraphMode Resolution
DETECT (0) Ðộ phân giải cao nhất và loại màn hình sử dụng CGA (1) CGAC0 (0)
CGAC1 (1) CGAC2 (2) CGAC3 (3) CGACHi (4)
320 x 200
320 x 200
320 x 200
320 x 200
640 x 200 EGA (3) EGALo (0)
EGAHi (1) 640 x 200 640 x3 50 VGA (9) VGALo (0)
VGAMed (1) VGAHi (2)
640 x 200
640 x 350
640 x 480
Chú ý: Ở bảng này các hằng DETECT có giá trị 0, hằng VGA có giá trị 9, hằng VGAHi
có giá trị 2,
Ta có thể xác định Grapdriver, GraphMode và Resolution trên một máy đang hoạt động bằng chương trình sau:
Uses Graph;
Var mh,mode:integer;
Begin
mh:=Detect; {Có thể bỏ dòng này}
Trang 4initgraph(mh,mode,'f:\winapps\bp\bgi');
writeln('GraphDriver = ',mh,' Graphmode = ',mode,' Resolution =',GetmaxX, 'x',GetMaxY);
readln;
closegraph;
End
Với: GetmaxX, và GetMaxY là các hàm trả về giá trị lớn nhất tương ứng cho hàng, cột của màn hình và mốt hiện hành
III LỖI ÐỒ HỌA
Khi khởi động đồ họa, nếu máy không tìm thấy các chương trình điều khiển đồ họa thì sẽ phát sinh ra lỗi đồ họa và như vậy chương trình không thể thực hiện được hoặc
có thể treo máy
Trong cả 2 trường hợp có hoặc không có lỗi, ta nên sử dụng hàm GraphResult để biết có lỗi hay không? Có thể kết hợp với hàm GraphErrorMsg để nhận được thông báo đúng nhất Bảng 2 liệt kê một số thông báo lỗi thường gặp:
Bảng 2: Các lỗi đồ họa
Hằng Trị mã
lỗi
Thông tin lỗi phát hiện
GrOk
GrNoInitgraph
GrNotDetected
GrFileNotFound
GrInvalidDriver
GrNoloadMem
GrNoScanMem
GRNoFloodMem
0 -1 -2 -3 -4 -5 -6 -7
Không có lỗi khởi động đồ họa
Chưa khởi động dồ họa
Không có phần cứng đồ họa
Không tìm thấy trình điều khiển đồ họa Trình điều khiển không hợp lệ
Không đủ bộ nhớ RAM cho đồ họa
Tràn vùng nhớ trong Scan Fill
Tràn vùng nhớ trong Flood Fill
Trang 5GrFontNoFound
GrNoFontMem
GrInvalidMode
GrError
GrIOError
GrInvalidFont
GrInvalidFontNum
-8 -9 -10 -11 -12 -13 -14
Không tìm thấy tập tin Font
Không đủ bộ nhớ RAM để nạp Font
Kiểu đồ họa không hợp lệ cho trình điều khiển Lỗi đồ họa tổng quát
Lỗi đồ họa vào ra
Tập tin Font không hợp lệ
Số hiệu đại diện cho Font không hợp lệ
Ví dụ: Chương trình kiểm tra quá trình khởi động đồ họa và nếu có lỗi sẽ thông báo lỗi ra màn hình:
Uses Graph;
Var
maloi: Integer;
GrDriver, GrMode: Integer;
Begin
GrDriver := Detect;
InitGraph(GrDriver, GrMode, 'f:\winapps\bp\bgi');
maloi := GraphResult; { Check for errors }
if maloi <> grOk then begin
Writeln('Lỗi đồ họa là : ', GraphErrorMsg(maloi));
Writeln('Lỗi!, Thoát khỏi chương trình ');
Halt(1); {Lệnh ngắt ngang và kết thúc chương trình }
Trang 6end else { Phần chương trình cần thực hiện khi không có lỗi đồ họa }
End
IV MỘT SỐ HÀM VÀ THỦ TỤC CHUẨN TRONG UNIT GRAPH
1 Mầu và mẫu (kiểu)
Ðối với màn hình trắng đen (Hercules Monochrome) ta có 2 giá trị màu 0 và 1, còn đối với các màn hình màu (VGA, EGA, ) thì có 16 giá trị màu từ 0 15 được liệt kê trong bảng 3, và kiểu tô màu thì có 11 kiểu đã được định sẵn là từ 0 11 và một kiểu do người lập trình định nghĩa (User - defined fill) và các kiểu tô được liệt kê trong bảng 4
a Thủ tục chọn màu đường vẽ
SetColor(ColorNum:word);
b Thủ tục đặt màu nền của màn hình
SetBkColor(ColorNum :word);
c Thủ tục chọn kiểu tô và màu tô
SetFillStyle(Pattern:word; ColorNum:word);
d Hàm nhận màu trả về do thủ tục SetColor đã đặt màu trước đó
GetColor: word;
e Hàm nhận màu nền trả về do thủ tục SetBkColor đã đặt trước đó
GetBkColor: word;
f Hàm trả về giá trị màu lớn nhất
GetMaxColor: word;
Bảng 3: Các giá trị có thể nhận của biến màu ColorNum
Tên hằng Giá trị màu Màu hiển thị
Black Blue
0
1
Ðen Xanh da trời
Trang 7Green
Cyan
Red
Magenta
Brown
LightGray
DarkGray
LightBlue
LightGreen
LightCyan
LightRed
LightMagenta
Yellow
White
2
3
4
5
6
7
8
9
10
11
12
13
14
15
Xanh lá cây Xanh lơ
Ðỏ Tím Nâu Xám nhạt Xám sẫm Xanh da trời nhạt Xanh lá cây nhạt Xanh lơ nhạt
Ðỏ nhạt Tím nhạt Vàng Trắng
Bảng 4: Các giá trị có thể nhận của biến kiểu tô Pattern
Tên hằng Giá trị kiểu tô Diễn giải kiểu tô
EmptyFill
SolidFill
LineFill
LtSlashFill
SlashFill
0
1
2
3
4
Tô bằng màu nền
Tô đặc
Tô bằng gạch ngang
Tô bằng ///
Tô bằng /// in đậm
Trang 8BkSlashFill
LtBkSlashFill
HatchFill
XHatchFill
InterleaveFill
WideDotFill
CloseDotFill
UserFill
5
6
7
8
9
10
11
12
Tô bằng \\\ in đậm
Tô bằng \\\
Tô bằng đường gạch bóng nhạt
Tô bằng đường gạch bóng chữ thập
Tô bằng đường đứt quãng
Tô bằng những dấu chấm thưa
Tô bằng dấu chấm dày Mẫu tô tự tạo
2 Ðiểm, kiểu đường thẳng, đường thẳng
a Thủ tục vẽ một điểm tại một tọa độ (x,y)
PutPixel(x,y:integer;ColorNum:word);
b Thủ tục chọn kiểu đường thẳng
SetLineStype(linestyle:word;pattern:word;thickness:word);
Với tham số LineStyle có các giá trị như bảng 5 sau:
Bảng 5: Tham số LineStyle
Hằng Giá trị Diễn giải
SolidLn DottedLn CenterLn DashedLn UserBitLn
0
1
2
3
4
Nét đậm Nét chấm Nét chấm gạch Nét gạch Mẫu tự tạo
Trang 9Với tham số thickness có các giá trị như bảng 6 sau:
Bảng 6: Tham số Thickness
Hằng Giá trị Diễn giải
NormWidth ThickWidth
1
3
Bề dày bình thường
Bề dày đậm
c Thủ tục vẽ đường thẳng từ tọa độ (x1 ,y1) đến tọa độ (x2 ,y2)
Line(x1 ,y1 ,x2 ,y2: integer);
3 Các hình không tô
a Thủ tục vẽ hình chữ nhật
Rectangle(x 1 ,y 1 ,x 2 ,y 2 :integer);
b Thủ tục vẽ hình tròn
Circle(x,y:integer;r:word);
Với x,y là tọa độ tâm, r là bán kính
c Thủ tục vẽ một cung tròn
Arc(x,y:integer; StAngle,EndAngle:word; r :word);
Với StAngle là góc bắt đầu, EndAngle là góc kết thúc
d Thủ tục vẽ cung Ellipse hoặc một Ellipse
Ellipse(x,y:integer;StAngle,EndAngle:word;Xradius,Yradius:word);
Nếu StAngle = 0 và EndAngle =360 thì là một hình Ellipse, nếu EndAngle < 360 thì là một cung Ellipse
4 Các hình có tô
a Ðường gấp khúc (đa giác)
Trang 10Muốn vẽ một đường gấp khúc đi qua n điểm tọa độ : (x1 ,y1), (x2 ,y2), , (xn ,yn ) thì ta phải đưa tạo độ n điểm này vào một mảng poly nào đó mà mỗi phần tử của mảng có kiểu PointType đã được định nghĩa sẵn như sau:
Type
PointType = Record
x,y : integer;
end;
Khi điểm cuối (xn ,yn ) có tọa độ trùng với điểm đầu (x1 ,y1 ) thì n điểm này sẽ tạo thành một đường gấp khúc khép kín
Dùng thủ tục DrawPoly(n, poly); để vẽ đường gấp khúc đi qua n tọa độ đã định sẵn trong mảng poly
Dùng thủ tục FillPoly(n,poly); để vẽ và tô đường gấp khúc đi qua n tọa độ đã định sẵn trong mảng poly
Ví dụ:
Uses Graph;
Const
gk: Array[1 3] of pointtype=((x:5;y:200),(x:190;y:5),(x:100;y:300)); {gấp khúc}
gkkk: Array[1 4] of Pointtype = ((x:405;y:200),(x:590;y:5),(x:500;y:300),(x:405;y:200));
Var Gd, Gm: Integer;
Begin
Gd := Detect;
InitGraph(Gd, Gm, 'F:\WINAPPS\BP\BGI');
if GraphResult <> grOk then Halt(1);
SetBkcolor(CYAN);
SetColor(YELLOW);
SetFillStyle(SolidFill,MAGENTA);
Trang 11DrawPoly(3,gk);
FillPoly(3,gk); {đường gấp khúc không khép kín}
FillPoly(4,gkkk); {đường gấp khúc khép kín}
Readln;
CloseGraph;
End
b Thủ tục vẽ hình chữ nhật
Bar(x 1 ,y 1 ,x 2 ,y 2 : integer);
c Thủ tục vẽ hình hộp chữ nhật
Bar3D(x 1 ,y 1 ,x 2 ,y 2 :integer; depth:word;top:boolean);
Tham số depth: là số điểm trên bề sâu của khối 3 chiều
Tham số top có 2 giá trị được định nghã sẵn là: TopOn (True) tương ứng khối 3 chiều sẽ có nắp và TopOff (False) sẽ ứng với khối 3 chiều không có nắp (xem hình vẽ)
d Thủ tục vẽ hình Ellipse
FillEllipse(x,y:integer;xradius,yradius:word);
e Thủ tục vẽ hình quạt
PieSlice(x,y:integer; StAngle,EndAngle,radius:word);
5 Xử lý chuỗi ký tự trên màn hình đồ họa
a Thủ tục nạp Font chữ
Trang 12Các font chữ nằm trong các tập tin có phần mở rộng là CHR Ðể nạp các font chữ này ta dùng thủ tục:
SetTextStyle(font,direction,charsize:word);
Với: Tham số font có thể nhận một trong các giá trị sau:
Hằng DefauFont hay giá trị 0 Hằng TriplexFont hay giá trị 1 Hằng SmallFont hay giá trị 2 Hằng SansSerifFont hay giá trị 3
Hằng GothicFont hay giá trị 4 Tham số direction có thể nhận một trong các giá trị sau:
Hằng HorizDir hay giá trị 0 Hằng VertDir hay giá trị 1 Tham số charsize là cỡ ký tự và nó có thể nhận một trong các giá trị từ 1 đến 10
b Thủ tục đặt chế độ căn chỉnh chuỗi văn bản
SetTextJustify(horiz, vert :word);
Trong đó:
Tham số horiz có thể là một trong các hằng: LeftText, CenterText, RightText Tham số vert có thể là một trong các hằng: BottomText, CenterText, TopText
c Thủ tục hiển thị chuỗi văn bản tại vị trí con nháy
OutText (text:string);
d Thủ tục hiển thị chuỗi văn bản tại tọa độ (x,y)
OutTextXY (x,y:integer;text:string);
6 Cửa sổ trong chế độ đồ họa (ViewPort)
Trang 13Ðể thiết lập một cửa sổ trên màn hình đồ họa, ta sử dụng đến chức năng của ViewPort Cửa sổ ViewPort được xem như một vùng chữ nhật trên màn hình độ họa, nó giống như thủ tục Window trong chế độ văn bản (Text mode), nghĩa là ta có thể hiện một dòng văn bản, vẽ hình hoặc xóa chỉ nằm gọn trong ViewPort đã định, ta có thể minh họa một cửa sổ ViewPort như hình sau:
Ðể hiểu rõ cách thiết lập một ViewPort, ta hãy xét đến cách khai báo kiểu của ViewPort như sau:
ViewPortType = Record
x1, y1, x2, y2 : Integer;
Clip : Boolean;
End;
Trong đó: (x1, y1) , (x2, y2) lần lượt là góc tọa độ trên bên trái và tọa độ góc dưới bên phải, mà chúng phải thỏa tính chất sau:
Clip là một biến trường có kiểu Boolean mà nó có ý nghĩa như sau:
· Nếu có giá trị bằng True (hay bằng hằng ClipOn) thì không cho phép vẽ bên ngoài ViewPort
· Nếu có giá trị bằng False (hay bằng hằng ClipOff) thì cho phép vẽ bên ngoài ViewPort
a Thủ tục thiết lập một ViewPort
SetViewPort(x1,y1,x2,y2:integer; Clip:Boolean);
Trang 14Sau khi thiết lập ViewPort ta sẽ có một hệ tọa độ mới mà góc trên bên trái của ViewPort sẽ có tọa độ (0,0)
Ví dụ: Như hình vẽ ở trên (giả sử ta chọn Clip bằng hằng ClipOn) thì ta phải thiết lập ViewPort như sau: SetViewPort(300,250,500,350,ClipOn);
* Tọa độ âm dương
Với một số đồ thị của toán học phải có tọa độ âm dương, để vẽ nó ta phải chia màn hình ra làm 4 phần tương ứng với 4 vùng (I, II, III, IV) âm dương của một hệ trục tọa độ xy Ðể thực hiện việc này, ta phải dùng đến cửa sổ ViewPort, với cách thiết lập sao cho tọa độ (0,0) của trục tọa độ xy là tâm tuyệt đối của màn hình góc trên bên trái của ViewPort như sau:
- Ðặt: x1= GetmaxX; y1= GetmaxX;
x2= GetmaxX; y2= GetmaxX;
- Dùng thủ tục SetViewPort(x1,y1,x2,y2,ClipOff) , với Clip = ClipOff để
có thể vẽ ra ngoài giới hạn của ViewPort
Ví dụ:
Vẽ đồ thị hàm sin(x) trong hệ trục tọa độ âm dương, với hoành độ
Program Dothi;
Uses Crt,Graph;
Const
Trang 15ScaleX=20;
ScaleY=80;
Var mh,mode,x,y,i:integer;
Begin
InitGraph(mh,mode,'F:\WINAPPS\BP\BGI');
SetViewPort(GetmaxX DIV 2,GetmaxY DIV 2,GetmaxX,GetmaxY,ClipOff);
SetColor(blue);
Line(-(GetmaxX DIV 2),0,GetmaxX DIV 2,0);
Line(0,-(GetmaxY DIV 2),0,GetmaxY DIV 2);
SetTextJustify(CenterText,CenterText);
SetColor(White);
OutTextXY(-GetmaxX DIV 4,-GetmaxX DIV 4,'DO THI HINH SIN '); SetColor(Red);
OutTextXY(GetmaxX DIV 2- 32,2,'Truc x >');
OutTextXY(27,-(GetmaxY DIV 2-5),'^ Truc y');
OutTextXY(0,0,'0,0');
for i:= -400 to 400 do
begin
x:=Round(2*Pi*i* ScaleX /200);
y:=Round(Sin(2*Pi*i/200)* ScaleY);
PutPixel(x,y,Yellow);
end;
Repeat Until KeyPressed;
Trang 16CloseGraph;
End
b Thủ tục nhận ViewPort hiện hành
GetViewSettings(Var ViewPort: ViewPortType);
c Thủ tục xóa bên trong màn hình ViewPort hiện hành
ClearViewPort;
Thủ tục xóa sạch tất cả các phần (hình vẽ, chuỗi ký tự, ) bên trong ViewPort và đưa con trỏ về tọa độ (0,0) của cửa sổ ViewPort hiện hành
d Thủ tục xóa sạch màn hình đồ họa
ClearDevice;
7 Ðóng chế độ đồ họa
Ðể trở về chế độ văn bản, ta dùng thủ tục:
CloseGraph;
V MỘT VÀI VÍ DỤ MINH HỌA
Ví dụ 1: Vẽ Bầu trời đầy sao
PROGRAM Vebautroi;
Uses Graph,Crt;
Var gd,gm,x,y:integer; maxcolor:word;
Begin
Gd:=Detect;
Initgraph(gd,gm,'C:\TP70\BGI');
If Graphresult<> Grok Then Halt(1);
x:=GetmaxX; y:=GetmaxY;
Maxcolor:=Getmaxcolor;