Unity Canvas UI下实现卡牌扇形居中自动对齐排列的方案问询

你原来的固定点位方案无法适配不同卡牌数量的居中需求，改用动态计算扇形坐标的方式即可实现要求的效果，全部逻辑都在UGUI体系下实现，不需要修改渲染层级。

1. 核心参数定义 #

先在脚本中定义可配置参数，直接在Inspector面板调整效果：

public RectTransform drawButton; // 抽卡按钮的RectTransform，作为扇形中心点基准
public RectTransform handContainer; // 手牌父容器，和抽卡按钮在同一个UI父节点下即可
public float fanRadius = 220f; // 扇形半径：卡牌中心到抽卡按钮中心的UI像素距离
public float maxTotalAngle = 120f; // 8张牌满手牌时的总展开角度，数值越大扇形越平
public GameObject cardPrefab; // 卡牌预制体

private List<GameObject> currentHandCards = new List<GameObject>(); // 存储当前持有的所有卡牌

2. 抽卡逻辑修改 #

每次抽卡后统一刷新所有手牌布局，不要单独设置新卡牌的位置：

// 抽卡按钮绑定的点击事件
public void OnDrawCard()
{
    // 超过最大手牌数8直接返回
    if (currentHandCards.Count >= 8) return;
    
    // 生成新卡牌
    GameObject newCard = Instantiate(cardPrefab, handContainer);
    currentHandCards.Add(newCard);
    
    // 刷新全局手牌布局
    RefreshFanLayout();
}

3. 扇形布局刷新核心逻辑 #

private void RefreshFanLayout()
{
    int cardCount = currentHandCards.Count;
    if (cardCount == 0) return;

    // 计算当前手牌数对应的总展开角度，不满8张时自动缩小角度保证居中
    float currentTotalAngle = maxTotalAngle * cardCount / 8;
    // 计算起始角度：让整个扇形左右对称居中
    float startAngle = -currentTotalAngle / 2f;
    // 每张卡牌之间的角度间隔
    float angleStep = currentTotalAngle / (cardCount > 1 ? cardCount - 1 : 1);

    for (int i = 0; i < cardCount; i++)
    {
        float currentAngle = startAngle + angleStep * i;
        // 角度转弧度用于三角函数计算
        float rad = currentAngle * Mathf.Deg2Rad;
        // 计算卡牌锚点坐标：以抽卡按钮位置为基准，正上方为0度方向
        Vector2 cardPos = new Vector2(
            drawButton.anchoredPosition.x + Mathf.Sin(rad) * fanRadius,
            drawButton.anchoredPosition.y + Mathf.Cos(rad) * fanRadius
        );
        
        RectTransform cardRt = currentHandCards[i].GetComponent<RectTransform>();
        cardRt.anchoredPosition = cardPos;
        // 卡牌旋转：朝向扇形中心点（抽卡按钮），还原折扇展开效果
        cardRt.localEulerAngles = new Vector3(0, 0, -currentAngle);
    }
}

注意事项 #

• 所有卡牌的父级容器需要和抽卡按钮处于同一层级的UI父节点下，锚点设置保持一致，避免坐标计算出现偏移
• 如果需要卡牌叠加层次感，可以在遍历的时候同步调用currentHandCards[i].transform.SetSiblingIndex(i)，让后抽的卡牌叠在上方
• 需要动画效果的话，可以把直接赋值坐标旋转的逻辑替换为补间动画库（如DOTween）的过渡逻辑，实现流畅的折扇展开效果
• 手牌数量减少时，只需从currentHandCards列表移除对应卡牌、销毁对象后重新调用RefreshFanLayout()，即可自动完成重新居中对齐

内容的提问来源于stack exchange，提问作者Balaji jp