当前位置:   article > 正文

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

unity 点击图片放大

首先制作出图片放大后的效果。点击上方的GameObject->UI->Canvas创建展示放大后的图片的Canvas,命名为BigPicCanvas,在BigPicCanvas下创建一个Image并重命名为BG,调整其大小至覆盖全屏,透明度至合适值实现图片放大后对背景的遮罩效果。背景的rgba值
在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
设定ClickCanvas的Render Mode为World Space,设定Event Camera为Main Camera,调整大小和位置至画的右下角。
修改ClickCanvas的位置
导入一个点击图片来提示用户点击此处,可以去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()函数即可。
调用Quit()函数
实现效果如下:
图片放大

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

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/Monodyee/article/detail/107920
推荐阅读
相关标签
  

闽ICP备14008679号