ฉันจะปัดไพ่ออกให้เท่า ๆ กันได้อย่างไร

ให้ชุดไพ่ (ภาพสี่เหลี่ยมผืนผ้าที่มีความกว้างและความสูง) ฉันจะหมุนและจัดตำแหน่งแต่ละภาพเพื่อให้ปรากฏในรูปแบบ 'แฟน' ได้เหมือนที่คุณจะถือไพ่ในชีวิตจริง ต้องใช้คณิตศาสตร์อะไรในการทำเช่นนี้?

UPDATE

นี่คือขั้นตอนสุดท้ายในการติดตั้งเบราว์เซอร์ใน JavaScript: https://cosmicrealms.com/blog/2013/03/16/hand-of-cards/ และ http://jsfiddle.net/tyyvk/108/

ทฤษฎี

เนื่องจากคุณไม่ได้ระบุในแพลตฟอร์มที่คุณใช้งานอยู่ฉันจะให้คำอธิบายเกี่ยวกับอัลกอริทึมในลักษณะที่ไม่เชื่อเรื่องภาษา:

1. สแต็กแรกไพ่ทุกใบวางซ้อนกันโดยให้ตำแหน่งเริ่มต้นเหมือนกัน
2. จากนั้นสำหรับแต่ละการ์ดใช้การหมุน (โดยปกติจะอยู่กึ่งกลางที่มุมหนึ่งด้านล่างแต่การย้ายต้นกำเนิดนี้ไปรอบ ๆ จะจำเป็นอย่างยิ่งที่จะช่วยให้คุณปรับแต่งรูปลักษณ์ของพัดลม)
3. เพิ่มมุมการหมุนระหว่างการโทรแต่ละครั้งขึ้นอยู่กับจำนวนการ์ดและจำนวนที่คุณต้องการกระจาย

การหมุนจะอยู่กึ่งกลางรอบมุมด้านล่างของการ์ด (หรือใกล้มุม) ที่เห็นได้ชัดจากการมอง:

การดำเนินงาน

สำหรับวิธีการนำไปใช้นั้นขึ้นอยู่กับแพลตฟอร์มของคุณ ใน XNA คุณสามารถใช้พารามิเตอร์ Origin ของSpriteBatch.Drawเพื่อเปลี่ยนจุดศูนย์กลางการหมุนของคุณ

นี่คือสิ่งที่ฉันได้รับด้วยรหัสต่อไปนี้ (โดยมีการปรับแต่งเล็กน้อยเพื่อที่จะทำให้มันดูดีขึ้น - โดยทั่วไปที่มาเริ่มต้นใกล้มุมด้านขวาและสิ้นสุดลงใกล้มุมซ้าย):

int cards = 20;
float range = MathHelper.ToRadians(90);
float initialAngle = MathHelper.ToRadians(-45);
float increment = range / cards;
Vector2 leftCorner = new Vector2(0, texture.Height * 0.9f);
Vector2 rightCorner = new Vector2(texture.Width, texture.Height * 0.9f);
Vector2 fanPosition = new Vector2(400, 300);
spriteBatch.Begin();
for (float angle = 0; angle < range; angle+=increment)
{
    float cardAngle = initialAngle + angle;
    Vector2 cardOrigin = Vector2.Lerp(rightCorner, leftCorner, angle / range);
    spriteBatch.Draw(texture, fanPosition, null, Color.White, cardAngle, cardOrigin, 1f, SpriteEffects.None, 0f);
}
spriteBatch.End();

และผลลัพธ์: