UI Image旋转后调整位置、Pivot及宽高的技术实现咨询

我来帮你搞定这个UI旋转后的布局调整问题！你的核心需求是点击后让竖版的UI Image变成横版，同时保持pivot在左下角、旋转归零，这确实不能只靠简单的Rotate来实现——因为Unity的RectTransform旋转会改变局部坐标系，导致pivot位置和宽高不符合2D像素的直观需求。

正确的实现思路 #

我们可以跳过“先旋转再修正”的绕路方式，直接通过修改RectTransform参数和调整图片显示方向来达到目标状态，这样更符合2D UI的最佳实践，也避免坐标系混乱的问题：

1. 交换RectTransform的宽高（sizeDelta），把原来的128×640改成640×128。
2. 重置旋转为0，确保坐标系回归正常。
3. 保持pivot在(0,0)（左下角），锚点维持(0,0,0,0)不变。
4. 调整图片的显示内容，让它从竖版的A→B→C→D变成横版的D→C→B→A（视觉上旋转90度的效果）。

修改后的代码 #

using UnityEngine;
using UnityEngine.UI;
using UnityEngine.EventSystems;

public class YourClickHandler : MonoBehaviour, IPointerClickHandler
{
    public void OnPointerClick(PointerEventData eventData)
    {
        if (MenuMain.ModeRotateIsActivated)
        {
            RectTransform rt = eventData.pointerPress.GetComponent<RectTransform>();
            Image img = rt.GetComponent<Image>();

            // 1. 记录当前UI的世界位置，确保调整后位置不偏移
            Vector3 originalWorldPos = rt.position;

            // 2. 交换宽高：将原尺寸的宽高互换
            Vector2 originalSize = rt.sizeDelta;
            rt.sizeDelta = new Vector2(originalSize.y, originalSize.x);

            // 3. 重置旋转、pivot和锚点，回到目标状态
            rt.rotation = Quaternion.identity;
            rt.pivot = new Vector2(0, 0);
            rt.anchorMin = new Vector2(0, 0);
            rt.anchorMax = new Vector2(0, 0);

            // 4. 将UI移回原世界位置，避免位置偏移
            rt.position = originalWorldPos;

            // 5. 调整图片内容方向，实现DCBA的横向显示
            if (img != null)
            {
                // 通过修改UV Rect旋转图片内容，无需修改Sprite资源
                Rect uvRect = img.uvRect;
                // 交换UV的宽高
                float tempWidth = uvRect.width;
                uvRect.width = uvRect.height;
                uvRect.height = tempWidth;
                // 调整X偏移，让内容翻转成DCBA的顺序
                uvRect.x = 1f - uvRect.x - uvRect.width;
                img.uvRect = uvRect;
            }
        }
    }
}

代码细节解释 #

• 记录世界位置：确保UI在调整前后保持用户点击时的位置，不会出现意外偏移。
• 交换sizeDelta：直接修改宽高参数，满足640×128的尺寸需求，比旋转后再修正更直观可控。
• 重置旋转与锚点：让RectTransform回归基础2D坐标系，确保pivot稳定在左下角。
• 调整UV Rect：这是实现内容方向转换的关键，无需修改Sprite资源就能让图片显示为横向的DCBA顺序，完全符合2D像素需求。

带旋转过渡的替代方案 #

如果需要保留旋转动画的过渡效果，可以用协程先执行旋转动画，再在动画结束后调整到目标状态：

// 带旋转过渡的版本
public IEnumerator RotateAndAdjustUI(RectTransform rt)
{
    // 执行旋转动画（0.3秒完成-90度Z轴旋转）
    float rotateDuration = 0.3f;
    float elapsedTime = 0f;
    Quaternion startRotation = rt.rotation;
    Quaternion targetRotation = Quaternion.Euler(0, 0, -90);
    
    while (elapsedTime < rotateDuration)
    {
        elapsedTime += Time.deltaTime;
        rt.rotation = Quaternion.Lerp(startRotation, targetRotation, elapsedTime / rotateDuration);
        yield return null;
    }

    // 旋转完成后调整到目标状态
    Vector3 pivotWorldPos = rt.TransformPoint(rt.pivot);
    rt.rotation = Quaternion.identity;
    
    Vector2 originalSize = rt.sizeDelta;
    rt.sizeDelta = new Vector2(originalSize.y, originalSize.x);
    
    rt.pivot = new Vector2(0, 0);
    rt.position = pivotWorldPos - rt.TransformVector(rt.pivot);

    Image img = rt.GetComponent<Image>();
    if (img != null)
    {
        Rect uvRect = img.uvRect;
        float tempWidth = uvRect.width;
        uvRect.width = uvRect.height;
        uvRect.height = tempWidth;
        uvRect.x = 1f - uvRect.x - uvRect.width;
        img.uvRect = uvRect;
    }
}

// 在点击事件中调用协程
public void OnPointerClick(PointerEventData eventData)
{
    if (MenuMain.ModeRotateIsActivated)
    {
        RectTransform rt = eventData.pointerPress.GetComponent<RectTransform>();
        StartCoroutine(RotateAndAdjustUI(rt));
    }
}

这样既保留了流畅的旋转动画，又能最终调整到你需要的UI状态。

内容的提问来源于stack exchange，提问作者Olivier Pons