Unity中点击Image类型GameObject实现原尺寸弹窗展开的方法咨询

嘿，这个需求在Unity UGUI里实现起来挺直观的，我给你分享两种实用的方案，你可以根据自己的场景选：

这种方式适合需要多次复用展开窗口的场景，提前做好预制体，点击时直接激活即可：

1. 给缩略图加交互能力
   给你的缩略图GameObject添加Button组件，这样它就能接收点击事件了。

2. 制作展开窗口预制体

   • 创建一个新的Panel（作为背景遮罩），设置锚点为全屏（anchorMin设为(0,0)，anchorMax设为(1,1)），背景色可以设成半透明黑色（比如Color(0,0,0,0.7f)），用来遮挡背景并防止点击穿透。
   • 在这个Panel里添加一个Image组件，用来显示原始尺寸的图片。把这个Image的锚点设为居中（anchorMin和anchorMax都设为(0.5,0.5)），勾选Preserve Aspect选项，避免图片拉伸变形。
   • 可以给Panel加一个关闭按钮，或者直接给Panel本身添加Button组件，点击时关闭窗口。
   • 把这个Panel做成预制体，默认设置为禁用状态，放在场景中或者Resources文件夹里。

3. 编写绑定脚本
   写个C#脚本绑定到缩略图的Button上，用来处理点击展开逻辑：

   using UnityEngine;
   using UnityEngine.UI;
   
   public class ImageExpander : MonoBehaviour
   {
       // 在Inspector里拖拽你的展开窗口预制体
       [SerializeField] private GameObject expandWindow;
       // 在Inspector里拖拽展开窗口里的Image组件
       [SerializeField] private Image expandImage;
   
       private Button thumbnailBtn;
   
       void Awake()
       {
           thumbnailBtn = GetComponent<Button>();
           thumbnailBtn.onClick.AddListener(OnThumbnailClicked);
   
           // 默认隐藏展开窗口
           if (expandWindow != null)
               expandWindow.SetActive(false);
       }
   
       void OnThumbnailClicked()
       {
           Sprite targetSprite = GetComponent<Image>().sprite;
           if (targetSprite == null) return;
   
           // 激活展开窗口
           expandWindow.SetActive(true);
   
           // 赋值Sprite并设置原始尺寸
           expandImage.sprite = targetSprite;
           expandImage.rectTransform.sizeDelta = new Vector2(
               targetSprite.texture.width, 
               targetSprite.texture.height
           );
       }
   
       // 关闭窗口的方法，绑定到关闭按钮上
       public void CloseExpandWindow()
       {
           expandWindow.SetActive(false);
       }
   }
   

如果不需要复用窗口，点击时动态创建也可以，步骤更简洁：

1. 同样给缩略图加Button组件
2. 编写动态创建脚本

   using UnityEngine;
   using UnityEngine.UI;
   
   public class DynamicImageExpander : MonoBehaviour
   {
       private Button thumbnailBtn;
   
       void Awake()
       {
           thumbnailBtn = GetComponent<Button>();
           thumbnailBtn.onClick.AddListener(OnThumbnailClicked);
       }
   
       void OnThumbnailClicked()
       {
           Sprite targetSprite = GetComponent<Image>().sprite;
           if (targetSprite == null) return;
   
           // 创建背景遮罩Panel
           GameObject bgPanel = new GameObject("ExpandBackground");
           bgPanel.transform.SetParent(transform.root); // 挂到Canvas根节点下
           bgPanel.transform.localPosition = Vector3.zero;
           bgPanel.transform.localScale = Vector3.one;
   
           RectTransform bgRect = bgPanel.AddComponent<RectTransform>();
           bgRect.anchorMin = Vector2.zero;
           bgRect.anchorMax = Vector2.one;
           bgRect.sizeDelta = Vector2.zero;
   
           Image bgImage = bgPanel.AddComponent<Image>();
           bgImage.color = new Color(0, 0, 0, 0.7f);
   
           // 创建展开图片
           GameObject expandImgObj = new GameObject("ExpandedImage");
           expandImgObj.transform.SetParent(bgPanel.transform);
           expandImgObj.transform.localPosition = Vector3.zero;
   
           RectTransform imgRect = expandImgObj.AddComponent<RectTransform>();
           imgRect.anchorMin = new Vector2(0.5f, 0.5f);
           imgRect.anchorMax = new Vector2(0.5f, 0.5f);
           imgRect.pivot = new Vector2(0.5f, 0.5f);
           imgRect.sizeDelta = new Vector2(
               targetSprite.texture.width, 
               targetSprite.texture.height
           );
   
           Image expandImg = expandImgObj.AddComponent<Image>();
           expandImg.sprite = targetSprite;
           expandImg.preserveAspect = true;
   
           // 点击背景关闭窗口
           Button closeBtn = bgPanel.AddComponent<Button>();
           closeBtn.onClick.AddListener(() => Destroy(bgPanel));
       }
   }
   

• 确保所有UI元素都在Canvas节点下，Canvas的Render Mode选Screen Space - Overlay最省心。
• 如果原始图片分辨率过大，超出屏幕范围，可以在设置尺寸时做限制，比如：

  float maxWidth = Screen.width * 0.9f; // 限制为屏幕宽度的90%
  float maxHeight = Screen.height * 0.9f;
  float scale = Mathf.Min(maxWidth / targetSprite.texture.width, maxHeight / targetSprite.texture.height);
  expandImage.rectTransform.sizeDelta = new Vector2(
      targetSprite.texture.width * scale, 
      targetSprite.texture.height * scale
  );
  

• 想要加动画效果的话，可以给展开窗口添加Animator组件，在激活/禁用时播放缩放、淡入淡出动画，提升体验。

内容的提问来源于stack exchange，提问作者Arthur Belkin