カードのハンドを均等に広げるにはどうすればよいですか？

トランプのセット（幅と高さのある長方形の画像）が与えられた場合、実際のカードを手に持っているように、それぞれを回転させて「ファン」パターンに見えるように配置できます。これを行うにはどのような数学が必要ですか？

更新

JavaScriptでのブラウザー実装の最後の例を次に示します。https : //cosmicrealms.com/blog/2013/03/16/hand-of-cards/ および http://jsfiddle.net/tyyvk/108/

理論

これを実装するプラットフォームを指定しなかったため、言語に依存しない方法でアルゴリズムの説明を行います。

1. 最初に同じ初期位置を与えて、すべてのカードを重ねます。
2. 次に、各カードに回転を適用します（通常、下隅の1つを中心に配置されますが、この原点を移動すると、ファンの外観を微調整できます）。
3. カードの数とカードをどれだけ広げたいかに応じて、各呼び出し間の回転角度を増やします。

の回転は、カードの下の隅の1を中心とする（または隅）それを見てから明らかです。

実装

これを実装する方法については、プラットフォームによって異なります。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();

そして結果：