720云部分功能在Unity中的制作（4）——点击图片使其放大至屏幕中间_unity 点击图片放大

首先制作出图片放大后的效果。点击上方的GameObject->UI->Canvas创建展示放大后的图片的Canvas，命名为BigPicCanvas，在BigPicCanvas下创建一个Image并重命名为BG，调整其大小至覆盖全屏，透明度至合适值实现图片放大后对背景的遮罩效果。
在BigPicCanvas下再创建一个Image用于展示放大后的图片。在Textures文件夹下将编号为1的图片的Texture Type设置为Sprite（2D and UI），并将该图片设置为Image的Source Image，调整大小和位置至画面中间。


在BigPicCanvas下创建一个Button用于关闭放大后的图片，删除Button自带的Text。导入一个X图片来当作关闭按钮，和上面的操作一样，把X图片修改为精灵图，并将X图片设置为Button下的Image的Source Image，调整大小和位置至画面右上角。

此时在全屏下运行程序进行预览，会发现BigPicCanvas仅占屏幕的一小部分，需要调整使其全屏显示。退出运行，选中BigPicCanvas，修改右侧Inspector面板下的UI Scale Mode为Scale With Screen Size，并适当修改Match的值，可以直接拉满到1的位置，也可以根据自己的电脑情况进行适当修改。

选中要进行点击放大的画，在Hierarchy面板中右键画的模型，选择UI->Image，将一起新建出来的Canvas重命名为ClickCanvas来表明这是需要用户点击的Canvas。

设定ClickCanvas的Render Mode为World Space，设定Event Camera为Main Camera，调整大小和位置至画的右下角。

导入一个点击图片来提示用户点击此处，可以去iconfont上下载一个，一样修改为为精灵图，并将该图片设置为ClickCanvas下的Image的Source Image，调整大小和位置至合适位置。
创建PicMagnify脚本用于控制放大后的Canvas出现，将该脚本挂载到ClickCanvas下的Image，picMagnifyCanvas用于存储放大后的图片，添加一个鼠标点击事件，若鼠标在正常模式下按下点击图片，就将放大后的Canvas展示出来，同时更改摄像机的mode值为2，和正常模式区分开来。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class PicMagnify : MonoBehaviour
{
    //放大后的图片
    public GameObject picMagnifyCanvas;

    private void OnMouseDown()
    {
        if (CameraMode.GetMode() == 0)
        {
            picMagnifyCanvas.SetActive(true);
            CameraMode.ModeChange(2);
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

创建QuitPic脚本用于关闭放大后的Canvas，将该脚本挂载到BigPicCanvas下，编写一个Quit函数，执行时关闭BigPicCanvas并更改摄像机的mode为0，使摄像机回归到正常模式。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class QuitPic : MonoBehaviour
{
    //鼠标点击右上角×号关闭放大的图片
    public void Quit()
    {
        gameObject.SetActive(false);
        CameraMode.ModeChange(0);
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13

因为我们在BigPicCanvas下添加了一个Button作为X号来关闭BigPicCanvas，只需要在Button被点击时调用Quit()函数即可。

实现效果如下：

若后续想添加对放大后的图片的操作，只需要仿照点击雕塑小节中，在CameraMode脚本中的Update()函数中添加一个else if(mode==2)，然后添加相应的代码即可，比如针对放大后的图片的继续放大和缩小等。若想要实现其他的功能，也可以用其他的mode代码来代表不同的功能区。