zoomๆ ซูมๆ XNA

posted on 09 Feb 2008 14:58 by xnanoob in Tutorials

สวัสดีค่ะ

วันนี้อยากทำแบบ ซูมๆ อะ ก้อไม่รู้ว่าทำไงดี มั่วไปเรื่อย

ในการ zoom ภาพ น่าจะมีขนาดที่เกี่ยวข้องอยู่ 3 แบบ

ขนาดของภาพ ให้ชื่อว่า Picture Size แล้วกันนะ ซึ่ง Picture Size เป็นขนาดของภาพจริงๆ
ขนาดของจอภาพที่จะแสดงผล ให้ชื่อว่า Display Size นะค่ะ
อีกส่วนนึงคือ Picture หลังจากที่ขยายขนาด เรียกว่า Virtual Size แล้วกัน

โดยการขยายภาพใน XNA นั้นในตัวอย่างนี้จะอาศัยการ Scale Texture นะค่ะ

ภาพที่ 1 แสดง ขนาดของภาพจริงๆ และกำหนดให้แสดงผลเท่ากับหน้าจอที่ต้องการแสดง

Display Size คือขนาด Form นั้นเองที่แสดง

SCALE.X = ((float)DISPLAYSIZE.X / PICTURE.Width);

SCALE.Y = ((float)DISPLAYSIZE.Y / PICTURE.Height);

ถ้าขนาดภาพจริงๆ ของคุณใหญ่กว่าจอที่จะแสดง เพราะฉะนั้น ค่า SCALE จะน้อยกว่าศูนย์ เป็นการย่อภาพนั้นเอง

หรือหากขนาดภาพจริงๆ เล็กกว่า ค่า SCALE จะมากกว่าหนึ่ง ดังนั้นจะเป็นการขยายภาพนั้นเอง

ค่า SCALE นี้คือค่าที่ทำการ SCALE ให้ image ขนาดเท่ากับ Display คือจอที่ของแต่ละเครื่องหรือกรอบที่ต้องการแสดง

ด้งนั้น จากโจทย์ที่เราต้องการซูม ZOOM ขยายภาพ

ให้เราใช้ SCALE x 2 คือขยายขนาดอีกสองเท่า

จะมี Virtual Size หรือขนาดของภาพที่ขยายไป

ภาพที่ 2 แสดงภาพหลังการขยายและตัดบางส่วนมาแสดง

อย่างไรก็ตามหลังจากที่ภาพขยายมาแล้วจะทำให้มันแสดงผลได้เพียงบางส่วนเท่านั้น

ส่วนที่เห็นนั้นก้อเป็นส่วนหนึ่งของภาพหลังจากที่ขยายไป ขอเรียกส่วนนี้ว่า Windows Slide แล้วกัน (มั่วเอานะ)

ซึ่งก้อหมายถึง ถ้าคุณเลื่อน Windows Silde ตัวนี้ ก้อจะมองเห็นส่วนอื่นๆ ของภาพได้ ในกรณีที่ซูมเข้ามาอะนะ

ตัวอย่าง Code

Texture2D PICTURE; // Original picture size
Vector2 DISPLAYSIZE; // DISPLAY OF Monitor Client

Vector2 VIRTUALSIZE; // Picture Image After Scale

Vector2 SCALE; // Scale of Picture scale X and Y

Vector2 WINDOWSSLIDE; // Crop Image Size : Crop from VIRTUALSIZE

การแสดงผล ในส่วนการใช้ WindowsSlide

spriteBatch.Draw(PICTURE, Vector2.Zero, new Rectangle((int)WINDOWSSLIDE.X, (int)WINDOWSSLIDE.Y, PICTURE.Width, PICTURE.Height), Color.White, 0.0f, Vector2.Zero, SCALE, SpriteEffects.None, 1.0f);