【UGUI】 全屏背景图片等比例拉伸自适应

4 篇文章 2 订阅

效果如下:
在这里插入图片描述

首先感叹一下,UGUI的自适应做的还是非常不错的,RectTransform中提供了非常多种的自适应方式.对做界面来说还是很友好的.
在这里插入图片描述
如果界面上需要有个全屏的背景图(UI界面一般都是有的吧,弹框啥的除外),那么需要简单的这样设置就可以满足屏幕的自适应了(so easy):
在这里插入图片描述
不过这样的自适应方式是直接拉伸铺满整个屏幕的方式,并没有保障等比例拉伸,就是说背景图就会出现变形,以下面这张图为例(注意黄色的圆):
在这里插入图片描述
自带的自适应效果是这样的:
在这里插入图片描述
而等比例拉伸自适应的效果是这样的:
在这里插入图片描述

实现

第一步

既然是自己写代码来做自适应那么就得去掉UGUI给我们提供的自适应方式,修改为居中的方式
在这里插入图片描述

第二步: 获取当前需要展示的屏幕尺寸.

屏幕尺寸的获取直接通过Screen.width和Screen.height即可,但是如果Canvas中用了CanvasScaler中的ScreenMatchMode,那么画布的尺寸则不一定和屏幕分辨率一样(会出现我的RawImage的width和Height值设为屏幕分辨率,但还是没有刚好和屏幕吻合的情况)
在这里插入图片描述
不过可以简单的直接获取Canvas的尺寸:

//当前画布尺寸
Vector2 canvasSize = gameObject.GetComponentInParent<Canvas>().GetComponent<RectTransform>().sizeDelta;

第三步:拿到图片的原图大小

既然是等比例拉伸,总得知道图片本身的尺寸吧,有可能图片在导入时选择了ToNearest,则会对尺寸做修改,方便压缩.所以暂时就手动输入图片的原尺寸吧.
在这里插入图片描述

第四步: 准备充分,开始做自适应算法

既然是等比例拉伸,则X和Y只能保证一个刚好和屏幕匹配,而另一个则需要委屈一下,要么是超出屏幕,要么就是留空白而不能填满屏幕. 想想一下视频播放器的自适应,为了能显示视频所有内容所以一般是选择留白的方式,然后镂空部分用黑色补上,比如这样:
在这里插入图片描述
而前面演示的动图则是采用超出屏幕的方式,通过Scene面板动图看更直观,白色框是屏幕范围:
在这里插入图片描述
完整代码(挂在背景图上就能工作):

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

/// <summary>
/// Created by Vitens on 2020/12/11 20:48:35
/// 
/// Description : 
///      全屏背景图片等比例拉伸自适应
/// </summary>
[ExecuteInEditMode]
public class BGScaler : MonoBehaviour
{
    //图片原大小(压缩前的)
    public Vector2 textureOriginSize = new Vector2(2048, 1024);
    // Start is called before the first frame update
    void Start()
    {
        Scaler();
    }

    //适配
    void Scaler()
    {
        //当前画布尺寸
        Vector2 canvasSize = gameObject.GetComponentInParent<Canvas>().GetComponent<RectTransform>().sizeDelta;
        //当前画布尺寸长宽比
        float screenxyRate = canvasSize.x / canvasSize.y;

        //图片尺寸 这个得到的结果是 (0,0) ?
        //Vector2 bgSize = bg.mainTexture.texelSize;
        Vector2 bgSize = textureOriginSize;
        //视频尺寸长宽比
        float texturexyRate = bgSize.x / bgSize.y;

        RectTransform rt = (RectTransform)transform;
        //视频x偏长,需要适配y(下面的判断 '>' 改为 '<' 就是视频播放器的视频方式)
        if (texturexyRate > screenxyRate)
        {
            int newSizeY = Mathf.CeilToInt(canvasSize.y);
            int newSizeX = Mathf.CeilToInt((float)newSizeY / bgSize.y * bgSize.x);
            rt.sizeDelta = new Vector2(newSizeX, newSizeY);
        }
        else
        {
            int newVideoSizeX = Mathf.CeilToInt(canvasSize.x);
            int newVideoSizeY = Mathf.CeilToInt((float)newVideoSizeX / bgSize.x * bgSize.y);
            rt.sizeDelta = new Vector2(newVideoSizeX, newVideoSizeY);
        }
    }

    public void Update()
    {
#if UNITY_EDITOR
        //editor模式下测试用
        Scaler();
#endif
    }

}

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值