ภาพรวม
----ในปัจจุบันซอฟต์แวร์การเรียนรู้และซีดีเกมจำนวนมากคุณมักจะเห็นสิ่งต่าง ๆ
เทคโนโลยีการแสดงผลกราฟิกอาศัยการเคลื่อนไหวของกราฟิก การอินเทอร์เลซ รูปทรงหยดน้ำ มู่ลี่ การซ้อนแบบ Building Block และวิธีการแสดงผลอื่นๆ เพื่อทำให้ภาพดูมีชีวิตชีวาและดึงดูดใจผู้ชมมากขึ้น บทความนี้จะสำรวจวิธีการใช้เทคนิคการแสดงผลกราฟิกต่างๆ ใน Delphi
หลักการพื้นฐาน
----ใน Delphi การแสดงรูปภาพนั้นง่ายมาก เพียงกำหนดส่วนประกอบ TImage ในแบบฟอร์ม ตั้งค่าแอตทริบิวต์รูปภาพ จากนั้นเลือกไฟล์ .ICO, .BMP, .EMF หรือ .WMF ที่ถูกต้อง โหลด และไฟล์ที่เลือกจะถูกแสดงในคอมโพเนนต์ TImage แต่นี่เป็นเพียงการแสดงกราฟิกในรูปแบบโดยตรงและไม่มีทักษะเลย เพื่อให้การแสดงผลกราฟิกมีลักษณะพิเศษเฉพาะ คุณสามารถทำตามขั้นตอนต่อไปนี้:
----กำหนดส่วนประกอบ TImage และโหลดกราฟิกที่จะแสดงลงในส่วนประกอบ TImage ก่อน กล่าวคือ โหลดเนื้อหากราฟิกจากดิสก์ลงในหน่วยความจำเป็นแคชกราฟิก
----สร้างวัตถุบิตแมปใหม่ที่มีขนาดเดียวกับกราฟิกในส่วนประกอบ TImage
---- ใช้ฟังก์ชัน CopyRect ของ Canvas (คัดลอกพื้นที่สี่เหลี่ยมของผืนผ้าใบหนึ่งไปยังพื้นที่สี่เหลี่ยมของผืนผ้าใบอื่น) ใช้เทคนิคและจัดรูปร่างแบบไดนามิก
ลงในเนื้อหาไฟล์บิตแมป จากนั้นจึงแสดงบิตแมปในรูปแบบ
----วิธีการดำเนินการ
มีการแนะนำเทคนิคการแสดงกราฟิกต่างๆ ดังต่อไปนี้:
1. เอฟเฟกต์แบบกดดึง
กราฟิกที่จะแสดงจะถูกดึงเข้าสู่หน้าจอจากทิศทางขึ้น ลง ซ้ายและขวา และกราฟิกเก่าดั้งเดิมบนหน้าจอจะถูกบดบังในเวลาเดียวกัน
มีสามประเภท: pull-up, pull-down, left-pull และ right-pull แต่หลักการก็คล้ายกัน ใช้เอฟเฟกต์ pull-up เป็นตัวอย่าง
หลักการ: ขั้นแรก ย้ายเส้นแนวนอนเส้นแรกที่อยู่ในกราฟิกชั่วคราวไปยังเส้นสุดท้ายในบิตแมปที่จะแสดง จากนั้นจึงย้ายเส้นแนวนอนสองเส้นแรกในกราฟิกชั่วคราวไปยังสองบิตแมปสุดท้ายที่จะแสดง และ แล้วย้ายสามตัวแรกกับสี่ตัวแรก??? จนกว่าข้อมูลกราฟิกจะถูกย้ายทั้งหมด ในระหว่างกระบวนการย้าย คุณจะเห็นว่าบิตแมปที่แสดงลอยจากล่างขึ้นบน ทำให้เกิดเอฟเฟกต์แบบดึงขึ้น
อัลกอริธึมของโปรแกรม:
ขั้นตอน TForm1.Button1Click (ผู้ส่ง: TObject);
var
newbmp: TBitmap;
ฉัน, bmheight, bmpwidth: จำนวนเต็ม;
เริ่ม
newbmp:= TBitmap สร้าง;
newbmp.Width:=image1.Width;
newbmp.Height:=image1.Height;
bmheight:=image1.Height;
bmpwidth:=image1.กว้าง;
สำหรับ i:=0 ถึง bmheight do
เริ่ม
newbmp.Canvas.CopyRect(Rect
(0,bmheight-i,bmpwidth,bmheight)
image1.ผ้าใบ,
แก้ไข(0,0,bmpwidth,i));
form1.Canvas.Draw(120,100,newbmp);
จบ;
newbmp.free;
จบ;
2. เอฟเฟกต์เซในแนวตั้ง
หลักการ: แบ่งกราฟิกที่จะแสดงออกเป็นสองส่วน เส้นสแกนที่เป็นเลขคี่จะถูกย้ายจากบนลงล่าง และเส้นสแกนที่เป็นเลขคู่จะถูกย้ายจากล่างขึ้นบน และทั้งสองเส้นจะดำเนินการพร้อมกัน จากหน้าจอ คุณจะเห็นว่ากราฟิกที่เบากว่าซึ่งปรากฏที่ปลายด้านบนและล่างเคลื่อนไปทางกึ่งกลางของหน้าจอจนกว่าจะชัดเจนทั้งหมด
อัลกอริธึมของโปรแกรม:
ขั้นตอน TForm1.Button4Click (ผู้ส่ง: TObject);
var
newbmp:TBitmap;
i,j,bmheight,bmpwidth:จำนวนเต็ม;
เริ่ม
newbmp:= TBitmap สร้าง;
newbmp.Width:=image1.Width;
newbmp.Height:=image1.Height;
bmheight:=image1.Height;
bmpwidth:=image1.กว้าง;
ฉัน:=0;
ในขณะที่ฉัน< =bmheight ทำ
เริ่ม
เจ:=ฉัน;
ในขณะที่ j>0 ทำ
เริ่ม
newbmp.Canvas.CopyRect(Rect(0,j-1,bmpwidth,j),
image1.ผ้าใบ,
Rect(0,bmheight-i+j-1,bmpwidth,bmheight-i+j));
newbmp.Canvas.CopyRect(Rect
(0,bmheight-j,bmpwidth,bmheight-j+1),
image1.ผ้าใบ,
แก้ไข(0,ij,bmpwidth,i-j+1));
เจ:=เจ-2;
จบ;
form1.Canvas.Draw(120,100,newbmp);
ฉัน:=ฉัน+2;
จบ;
newbmp.free;
จบ;
3. เอฟเฟกต์เซแนวนอน
หลักการ: หลักการเดียวกับเอฟเฟกต์การอินเทอร์เลซในแนวตั้ง ยกเว้นว่ากราฟิกที่แบ่งออกเป็นสองกลุ่มจะถูกย้ายไปยังหน้าจอจากปลายด้านซ้ายและขวาตามลำดับ
อัลกอริธึมของโปรแกรม:
ขั้นตอน TForm1.Button5Click (ผู้ส่ง: TObject);
var
newbmp:TBitmap;
i,j,bmheight,bmpwidth:จำนวนเต็ม;
เริ่ม
newbmp:= TBitmap สร้าง;
newbmp.Width:=image1.Width;
newbmp.Height:=image1.Height;
bmheight:=image1.Height;
bmpwidth:=image1.กว้าง;
ฉัน:=0;
ในขณะที่ i< =bmpwidth ทำ
เริ่ม
เจ:=ฉัน;
ในขณะที่ j>0 ทำ
เริ่ม
newbmp.Canvas.CopyRect(Rect(j-1,0,j,bmheight))
image1.ผ้าใบ,
แก้ไข(bmpwidth-i+j-1,0,bmpwidth-i+j,bmheight));
newbmp.Canvas.CopyRect(Rect
(bmpwidth-j,0,bmpwidth-j+1,bmpheight)
image1.ผ้าใบ,
แก้ไข(ij,0,i-j+1,bmheight));
เจ:=เจ-2;
จบ;
form1.Canvas.Draw(120,100,newbmp);
ฉัน:=ฉัน+2;
จบ;
newbmp.free;
จบ;
4. เอฟเฟกต์น้ำฝน
หลักการ: ย้ายบรรทัดสแกนสุดท้ายของกราฟิกชั่วคราวไปยังบรรทัดแรกไปยังบรรทัดสแกนสุดท้ายของบิตแมปที่มองเห็นได้ตามลำดับ เพื่อให้เส้นสแกนนี้ทิ้งร่องรอยไว้บนหน้าจอ จากนั้น เส้นสแกนสุดท้ายของกราฟิกชั่วคราวจะถูกย้ายไปยังบรรทัดแรกเพื่อสแกนเส้นสุดท้ายของบิตแมปที่มองเห็นได้ตามลำดับ และอื่นๆสำหรับเส้นสแกนที่เหลือ
อัลกอริธึมของโปรแกรม:
ขั้นตอน TForm1.Button3Click (ผู้ส่ง: TObject);
var
newbmp:TBitmap;
i,j,bmheight,bmpwidth:จำนวนเต็ม;
เริ่ม
newbmp:= TBitmap สร้าง;
newbmp.Width:=image1.Width;
newbmp.Height:=image1.Height;
bmheight:=image1.Height;
bmpwidth:=image1.กว้าง;
สำหรับ i:=bmheight ลงไป 1 ทำ
สำหรับ j:=1 ถึงฉันทำ
เริ่ม
newbmp.Canvas.CopyRect(Rect(0,j-1,bmpwidth,j),
image1.ผ้าใบ,
แก้ไข(0,i-1,bmpwidth,i));
form1.Canvas.Draw(120,100,newbmp);
จบ;
newbmp.free;
จบ;
5. เอฟเฟกต์บานเกล็ด
หลักการ: แบ่งข้อมูลที่อยู่ในกราฟิกชั่วคราวออกเป็นหลายกลุ่ม จากนั้นย้ายตามลำดับจากกลุ่มแรกไปยังกลุ่มสุดท้าย ครั้งแรกที่แต่ละกลุ่มย้ายบรรทัดสแกนแรกไปยังตำแหน่งที่สอดคล้องกันของบิตแมปที่มองเห็นได้ และครั้งที่สอง เวลา ย้ายเส้นสแกนที่สอง จากนั้นย้ายเส้นสแกนที่สามและสี่
อัลกอริธึมของโปรแกรม:
ขั้นตอน TForm1.Button6Click (ผู้ส่ง: TObject);
var
newbmp:TBitmap;
i,j,bmheight,bmpwidth:จำนวนเต็ม;
xgroup, xcount: จำนวนเต็ม;
เริ่ม
newbmp:= TBitmap สร้าง;
newbmp.Width:=image1.Width;
newbmp.Height:=image1.Height;
bmheight:=image1.Height;
bmpwidth:=image1.กว้าง;
xgroup:=16;
xcount:=bmheight div xgroup;
สำหรับ i:=0 ถึง xcount ทำ
สำหรับ j:=0 ถึง xgroup ทำ
เริ่ม
newbmp.Canvas.CopyRect(Rect
(0,xcount*j+i-1,bmpwidth,xcount*j+i)
image1.ผ้าใบ,
Rect(0,xcount*j+i-1,bmpwidth,xcount*j+i));
form1.Canvas.Draw(120,100,newbmp);
จบ;
newbmp.ฟรี;
จบ;
6. เอฟเฟกต์แบบ Building Block
หลักการ: มันเป็นรูปแบบของเอฟเฟกต์หยดน้ำ ความแตกต่างก็คือเอฟเฟกต์แบบเอกสารสำเร็จรูปจะย้ายชิ้นส่วนของกราฟิกในแต่ละครั้ง ไม่ใช่แค่เส้นสแกน
อัลกอริธึมของโปรแกรม:
ขั้นตอน TForm1.Button7Click (ผู้ส่ง: TObject);
var
newbmp:TBitmap;
i,j,bmheight,bmpwidth:จำนวนเต็ม;
เริ่ม
newbmp:= TBitmap สร้าง;
newbmp.Width:=image1.Width;
newbmp.Height:=image1.Height;
bmheight:=image1.Height;
bmpwidth:=image1.กว้าง;
i:=bmheight;
ในขณะที่ฉัน>0 ทำ
เริ่ม
สำหรับ j:=10 ถึงฉันทำ
เริ่ม
newbmp.Canvas.CopyRect(Rect(0,j-10,bmpwidth,j),
image1.ผ้าใบ,
แก้ไข(0,i-10,bmpwidth,i));
form1.Canvas.Draw(120,100,newbmp);
จบ;
ฉัน:=i-10;
จบ;
newbmp.free;
จบ;
บทสรุป
เอฟเฟกต์การแสดงผลกราฟิกข้างต้นถูกส่งต่อไปบนคอมพิวเตอร์ สภาพแวดล้อมซอฟต์แวร์คือ Delphi 3.0 และสภาพแวดล้อมฮาร์ดแวร์เป็นเครื่องที่รองรับ Pentium 100M มันใช้งานได้ดี