ugui ui相对位置的计算，以及如何把ui限制在屏幕内

最新推荐文章于 2024-04-16 13:23:21 发布
置顶 最新推荐文章于 2024-04-16 13:23:21 发布
阅读量9.9k 收藏 17
点赞数 6
分类专栏： ugui 文章标签： ui ugui ui位置计算 ui限制在屏幕内 Unity3d
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/snoopyna2co3/article/details/50429604
版权

今天写关于ui位置的计算，举个例子：在我之前做的项目中背包的物品都可以点出一个属性面板，这个属性面板的左上角最齐图标的右下角，如图（红是物品图标，白是属性面板）
这里写图片描述

原理：计算出两个ui的包围盒就可以算出【白image】相对于【红image】的偏差多少坐标，然后用【红image】的position+偏差的坐标赋值给【白image】的世界坐标
如上图的方式，我这边举个例子（【红】的右下角对齐【白】的左上角）
【白】position.x =【红】position.x +【红】包围盒extents.x+【白】包围盒extents.x
【白】position.y =【红】position.x -【红】包围盒extents.y -【白】包围盒extents.y
这样就可以求出【白】的position，这里只给出一种情况，其他情况可以看下面代码

//枚举8个方向
public enum UGUISide
{
    Bottom,
    BottomLeft,
    BottomRight,
    Left,
    Right,
    Top,
    TopLeft,
    TopRight,
}
public class MathEx
{
    /// <summary>
    /// src用描点对齐tar的描点，tar确定src的位置
    /// </summary>
    /// <param name="src"></param>
    /// <param name="srcSide"></param>
    /// <param name="tar"></param>
    /// <param name="tarSide"></param>
    /// <param name="area"></param>
    public static void AnchorTo(RectTransform src, 
                                UGUISide srcSide, 
                                RectTransform tar, 
                                UGUISide tarSide,
                                Transform canvas)
    {
        if (null == tar || tar == src)
        {
            return;
        }
        //计算src的包围盒
        Bounds srcBounds = 
                RectTransformUtility.CalculateRelativeRectTransformBounds(canvas, src);
        //计算tar的包围盒
        Bounds tarBounds = 
                RectTransformUtility.CalculateRelativeRectTransformBounds(canvas, tar);

        Vector2 srcOffset = GetBoundsOffset(srcBounds, srcSide);//计算描点的偏移量
        Vector2 tarOffset = GetBoundsOffset(tarBounds, tarSide);//计算描点的偏移量
        Vector2 tarCenter = tarBounds.center;

        //计算src相对于tar的位置
        src.anchoredPosition = (tarCenter - tarOffset + srcOffset);
    }
    }

   //8个方向偏移值的计算
    public static Vector2 GetBoundsOffset(Bounds bounds, UGUISide side)
    {
        Vector2 offset = Vector2.zero;

        switch (side)
        {
            case UGUISide.Bottom:
                offset.y = bounds.extents.y;
                break;
            case UGUISide.BottomLeft:
                offset.x = bounds.extents.x;
                offset.y = bounds.extents.y;
                break;
            case UGUISide.BottomRight:
                offset.x = -bounds.extents.x;
                offset.y = bounds.extents.y;
                break;
            case UGUISide.Left:
                offset.x = bounds.extents.x;
                break;
            case UGUISide.Right:
                offset.x = -bounds.extents.x;
                break;
            case UGUISide.Top:
                offset.y = -bounds.extents.y;
                break;
            case UGUISide.TopLeft:
                offset.x = bounds.extents.x;
                offset.y = -bounds.extents.y;
                break;
            case UGUISide.TopRight:
                offset.x = -bounds.extents.x;
                offset.y = -bounds.extents.y;
                break;
        }

        return offset;
    }

包围盒计算：RectTransformUtility.CalculateRelativeRectTransformBounds(canvas, ui)两个参数都是Transform。【包围盒的中心点是从屏幕中心作为原点计算出来的】
位置计算比较简单我觉得看看代码就知道，不过如果物品图标右边对齐屏幕右边，这样计算就会超出屏幕，不过我想要的效果就如下图
这里写图片描述
这里就涉及到ugui的屏幕大小，知道ugui屏幕大小就知道它是否超出屏幕。如果超出屏幕，可以计算靠边位置。
ugui的屏幕大小与屏幕大小有点区别，不同的ui缩放模式就有ugui屏幕大小不同
现在讲解一下不同ui缩放模式，怎么计算ugui屏幕大小

二、在不同Ui Scale Mode下屏幕的rect的计算，以【屏幕中心为原点】（上面说了ui包围盒按照屏幕中心作为原点计算的）

1.Constant Pixel Size
这里写图片描述
这种模式下屏幕分辨率多大，ugui屏幕就多大

rect = new Rect(-Screen.width / 2, -Screen.height / 2, Screen.width , Screen.height);

2.Scale With Screen Size
这里写图片描述
match为1，就是高度适应，
Reference Resolution设置为960*640，因为美术出图都是按照这个分辨率
这样设置无论那种分辨率，ugui屏幕的高度都是640，所以根据屏幕Height和ugui屏幕的Height算出比例，来计算ugui屏幕的Width

rect = new Rect(-Screen.width / 2, 
                -Screen.height / 2, 
                Screen.width , 
                Screen.height);

 float scale = CanvasScaler.matchWidthOrHeight == 1 ? 
                 CanvaScaler.referenceResolution.y / (float)Screen.height : 
                 CanvaScaler.referenceResolution.x / (float)Screen.width;

rect = new Rect(rect.x * scale, 
                rect.y * scale, 
                rect.width * scale, 
                rect.height * scale);

第三种就不算，重点是第二种，用得最多还是第二种

三、区域比较
直接上代码，第一个参数就是【白】，第二个参数就是ugui屏幕的rect，第三个是画布
代码比较简单，我就不一一说明。

  public static bool SetUIArea(RectTransform target, Rect area, Transform canvas)
    {
        Bounds bounds = RectTransformUtility.CalculateRelativeRectTransformBounds(canvas, target);

        if (null == area)
        {
            return false;
        }

        Vector2 delta = default(Vector2);
        if (bounds.center.x - bounds.extents.x < area.x)//target超出area的左边框
        {
            delta.x += Mathf.Abs(bounds.center.x - bounds.extents.x - area.x);
        }
        else if (bounds.center.x + bounds.extents.x > area.width / 2)//target超出area的右边框
        {
            delta.x -= Mathf.Abs(bounds.center.x + bounds.extents.x - area.width / 2);
        }

        if (bounds.center.y - bounds.extents.y < area.y)//target超出area上边框
        {
            delta.y += Mathf.Abs(bounds.center.y - bounds.extents.y - area.y);
        }
        else if (bounds.center.y + bounds.extents.y > area.height / 2)//target超出area的下边框
        {
            delta.y -= Mathf.Abs(bounds.center.y + bounds.extents.y - area.height / 2);
        }

        //加上偏移位置算出在屏幕内的坐标
        target.anchoredPosition += delta;

        return delta != default(Vector2);
    }

最后我这边上完整代码

using UnityEngine;
using System.Collections;

public enum UGUISide
{
    Bottom,
    BottomLeft,
    BottomRight,
    Left,
    Right,
    Top,
    TopLeft,
    TopRight,
}

public class MathEx
{
    /// <summary>
    /// src用描点对齐tar的描点，tar确定src的位置
    /// </summary>
    /// <param name="src"></param>
    /// <param name="srcSide"></param>
    /// <param name="tar"></param>
    /// <param name="tarSide"></param>
    /// <param name="area"></param>
    public static void AnchorTo(RectTransform src, UGUISide srcSide, RectTransform tar, UGUISide tarSide,Transform canvas)
    {
        if (null == tar || tar == src)
        {
            return;
        }
        Bounds srcBounds = RectTransformUtility.CalculateRelativeRectTransformBounds(canvas, src);//计算src的包围盒
        Bounds tarBounds = RectTransformUtility.CalculateRelativeRectTransformBounds(canvas, tar);//计算tar的包围盒

        Vector2 srcOffset = GetBoundsOffset(srcBounds, srcSide);//计算描点的偏移量
        Vector2 tarOffset = GetBoundsOffset(tarBounds, tarSide);//计算描点的偏移量
        Vector2 tarCenter = tarBounds.center;

        //计算src相对于tar的位置
        src.anchoredPosition = (tarCenter - tarOffset + srcOffset);
    }

    /// <summary>
    /// 注意rect中心点在中间
    /// </summary>
    /// <param name="target"></param>
    /// <param name="area"></param>
    /// <returns></returns>
    public static bool SetUIArea(RectTransform target, Rect area, Transform canvas)
    {
        Bounds bounds = RectTransformUtility.CalculateRelativeRectTransformBounds(canvas, target);

        if (null == area)
        {
            return false;
        }

        Vector2 delta = default(Vector2);
        if (bounds.center.x - bounds.extents.x < area.x)//target超出area的左边框
        {
            delta.x += Mathf.Abs(bounds.center.x - bounds.extents.x - area.x);
        }
        else if (bounds.center.x + bounds.extents.x > area.width / 2)//target超出area的右边框
        {
            delta.x -= Mathf.Abs(bounds.center.x + bounds.extents.x - area.width / 2);
        }

        if (bounds.center.y - bounds.extents.y < area.y)//target超出area上边框
        {
            delta.y += Mathf.Abs(bounds.center.y - bounds.extents.y - area.y);
        }
        else if (bounds.center.y + bounds.extents.y > area.height / 2)//target超出area的下边框
        {
            delta.y -= Mathf.Abs(bounds.center.y + bounds.extents.y - area.height / 2);
        }

        //加上偏移位置算出在屏幕内的坐标
        target.anchoredPosition += delta;

        return delta != default(Vector2);
    }

    public static Vector2 GetBoundsOffset(Bounds bounds, UGUISide side)
    {
        Vector2 offset = Vector2.zero;

        switch (side)
        {
            case UGUISide.Bottom:
                offset.y = bounds.extents.y;
                break;
            case UGUISide.BottomLeft:
                offset.x = bounds.extents.x;
                offset.y = bounds.extents.y;
                break;
            case UGUISide.BottomRight:
                offset.x = -bounds.extents.x;
                offset.y = bounds.extents.y;
                break;
            case UGUISide.Left:
                offset.x = bounds.extents.x;
                break;
            case UGUISide.Right:
                offset.x = -bounds.extents.x;
                break;
            case UGUISide.Top:
                offset.y = -bounds.extents.y;
                break;
            case UGUISide.TopLeft:
                offset.x = bounds.extents.x;
                offset.y = -bounds.extents.y;
                break;
            case UGUISide.TopRight:
                offset.x = -bounds.extents.x;
                offset.y = -bounds.extents.y;
                break;
        }

        return offset;
    }

测试脚本

using UnityEngine;
using System.Collections;
using System.Data;
using Mono.Data.Sqlite;
using UnityEngine.UI;
using DG.Tweening;

public class Test : MonoBehaviour
{
    public RectTransform rt1;
    public RectTransform rt2;

    private Rect rect;
    CanvasScaler canvaScaler;

    void Awake()
    {
        canvaScaler = GetComponent<CanvasScaler>();
        rect = new Rect(-Screen.width / 2, -Screen.height / 2, Screen.width , Screen.height);
        float scale = canvaScaler.matchWidthOrHeight == 1 ? canvaScaler.referenceResolution.y / (float)Screen.height : canvaScaler.referenceResolution.x / (float)Screen.width;
        rect = new Rect(rect.x * scale, rect.y * scale, rect.width * scale, rect.height * scale);
    }


    void Update()
    {
        if (null == rt1 || null == rt2) { return; }
        MathEx.AnchorTo(rt1, UGUISide.TopLeft, rt2, UGUISide.BottomRight, transform);
        MathEx.SetUIArea(rt1, rect, transform);
    }
}

测试结构
这里写图片描述
这里写图片描述
这里写图片描述
这样子就可以把ui限制在某个区域内。
下一期分享，世界坐标转屏幕坐标，不用设置描点为左下角，也可以做。以及拖拽坐标的计算

SnoopyNa2Co3
关注
专栏目录
【UGUI】计算UGUI层级较深的物体在屏幕上的坐标
Zok93
01-16 621
计算屏幕坐标通常情况是比较容易的事情，但是一但UI层级比较深，父物体的锚点自定义较多，一会左上角，一会右下角…这个时候计算层级最深的UI物体的屏幕坐标是一件相当困难的事情… Unity官方的API里面提供了一个这样的方法，我下面的注释和我当前需求有关，大家可以忽略参数2的描述，参数2就是你想转换的层级比较深的UI的位置 这一段代码，计算得到的坐标，就是UI中心点的坐标，意思就是无论UI使
UGUI 限制UI在屏幕内移动
simple_love123的博客
07-07 1066
实现功能：ui物体跟随鼠标移动，当ui超出屏幕的时候，自动适配到屏幕内。 在这里插入代码片 //ui显示的方位 public enum Orientation { LeftDown = 0, LeftUp, LeftCenter, RightUp, RigthDown, RightCenter, CenterUp, CenterDown, Center
UGUI之锚框（点）大小计算
yy605353183的博客
02-19 231
UGUI之锚框（点）大小计算 公式：锚框(W,H) = AnchorMax - AnchorMin * 父物体(W,H)
UGUI/拖拽UI对象限制在画布(Canvas)内部
05-21
UGUI，拖拽UI对象，让其跟随鼠标指针移动，限制于画布(Canvas)，不能移出画布即相机视野之外。
UnityUGUIText根据内容自适应（滑动框、图标跟随）
weixin_44250118的博客
07-22 2300
一.icon图标跟随在文字前面随文本长短而移动位置 1.Text组件GameObject添加Content Size Fitter组件控制文本框大小随内容而变化 2.把图标放到子物体位置，Rect Transform 中的Pivot设置为1,0.5 调整好位置即可 3.上、下或者右边同理。文本扩展方向以及位置通过改变 和Rect Transform 中的Pivot设置 二.Scroll View滑动框大小随文字改变 比如竖直排列 1.文本框上添加Content Size Fitter..
UGUI 计算RectTransform的Bounds
木骰
08-18 3952
NGUIMathf里有个calculateRelativeWidgeBounds(Transform content) 的函数 用来计算 content下(包括content)的bounds  UGUI没有找到类似的功能 于是自己仿照这写了个UGUIMathf using UnityEngine; using System.Collections; using System.
UIFramework-xLua:一个基于UGUI的UI管理框架
03-26
《UIFramework-xLua：基于UGUI的高效UI管理框架》 UIFramework-xLua是一个专为Unity3D开发的游戏UI系统，它充分利用了UGUI（Unity Graphical User Interface）的优势，并结合了C#与xlua的特性，为开发者提供了一套...
Unity UGUI插件，动效UI插件，简约风UI，UI框架，Q弹动画UI，欢迎下载使用。
04-28
总之，这个资源包提供了完整的Unity UGUI解决方案，包括UI框架、动效设计和简约风格的界面元素，以及Q弹动画效果，对于希望提升游戏或应用UI质量的开发者来说，是一份非常有价值的学习和开发材料。通过学习和应用...
Unity UGUI 利用锚点生成相对位置的UI
mafanwei的博客
01-09 6017
UGUI是什么 UGUI 是Unity 官方推出的最新UI系统。它从 Unity 4.6 开始，被集成到 Unity 的编辑器中。相较于旧的 UI 系统，它绝对属于一个巨大的飞跃！因为只要有过旧 UI 系统使用体验的开发者，大部分都对它没有任何好感，以至于在过去的很长一段时间里，大家都在使用资源商店（Asset Store）里，由第三方开发者开发的付费插件 NGUI，实现游戏中与 UI 相关的功能...
unity ugui拖拽限定范围
05-21
限制了ugui拖拽时的指定范围，确保拖拽物体时，不会超出屏幕范围。
UGUI:窗口限制以及窗口缩放
weixin_30580341的博客
09-20 202
版权申明： 本文原创首发于以下网站： 博客园『优梦创客』的空间：https://www.cnblogs.com/raymondking123 优梦创客的官方博客：https://91make.top 优梦创客的游戏讲堂：https://91make.ke.qq.com 『优梦创客』的微信公众号：umaketop 您可以自由转载，但必须加入完整的版权声明 窗口拖动限制在一个特定...
【UGUI】通过调整UI元素的布局和位置实现立体感UI界面效果
樱花不再在海棠湾涮羊肉
04-30 714
通过调整UI元素的布局和位置实现立体感UI界面效果。
【Unity笔记】 UI 如何相对某个位置而不总是相对于屏幕中心点
winni_a的博客
12-25 1997
作用：在屏幕变化时，能保证文字始终在屏幕某个位置 在canvas里添加一个文本，起名为Name 在UI的inspector面板中找到如下图标： 点击这个图标，你就可以设置居中，居左，居上等设置了 举例，Top 代表居上，第二个组合为：Top Left,也就是左上，其他以此类推 我们想让我们的名字，在屏幕左上角，距离左边50px,上边50px如何设置？ 第一步，选择 Top Left 第二步，设置Ract Transform 这里需要注意的一点，这里的X ,Y.
【Unity】获取UI物体在屏幕上的位置
Dragon Peng 的博客
03-04 2726
ui的屏幕坐标就是自身相对于canvas位置加上canvas大小的1/2；获取ui在自身Canvas的相对位置且canvas全屏。
控制ui元素跟随布局组下物体的位置变化（跨父物体访问）
最新发布
XueZhiXia_的博客
04-16 389
旁边的橙色小方块（暂叫它arrow）是用来标记当前选择的选项，他的父物体不是这些选项的父物体，也就是说arrow 和 选项的局部坐标系不同。由于子物体是挂载在一个布局组下（这里我用的垂直布局组），所以子物体Rect Transform中的某些属性会交由父物体布局组去控制，这时候在编辑窗口下就无法去手动来拖动了。访问其它父物体下子物体的位置信息，并做出对应变化的 类似 功能，都可以这样来做，本文举出的 对话选项 只是举例。这里主要的代码其实就是关于坐标系转换的两个api，其它的可以忽略是关于一些设置的。
unity道具tips边缘处靠边脚本
piaoyun29的专栏
08-26 983
unity道具tips自动靠边，含unity演示工程，应用场景游戏tips，当呼出的tips位置在屏幕边缘处，自动校准让整体内容显示完整靠边处理的脚本，适用于各种分辨率的情况，挂于作用目标即可。
UGUI 判断点击在UI上还是屏幕中
cuijiahao的专栏
09-27 201
private void Update() { if (Input.GetMouseButtonDown(0)) { #if !UNITY_EDITOR//手机模式 if (!EventSystem.current.IsPointerOverGameObject(Input.GetTouch(0).fingerId)) #else//编辑器模式 if (!EventSystem.current.IsPointerOv.
unity 判断ui是否在屏幕范围内，并移动至屏幕范围内
Guido Kuo's Blog
09-27 4651
如题 判断该ui是否在屏幕范围，如果不在计算出移动到屏幕范围内的目标位置，再写函数进行移动 bool JudgmentUiInScreen(RectTransform rect, ref Vector3 targetPos) { bool isInView = false; float moveDistance = 0; Vector3 worldPos = rect.transform.position; float left
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值