4.控件位置信息类

UI系统 > GUI > GUI实践项目 实践项目 UI系统 GUI
发布时间 :
字数:1.6k 阅读 : 评论:
  1. 4.控件位置信息类
    1. 4.1 知识点
      1. 创建控件信息类
        1. 控件位置信息类
      2. 定义对齐方式九宫格枚举
      3. 添加计算真实位置所需要得到变量
      4. 添加计算中心点偏移的方法和计算最终相对坐标位置的方法
        1. 计算中心点偏移方法
        2. 计算最终相对坐标位置方法
      5. 计算得到最终绘制的位置和宽高
    2. 4.2 知识点代码

4.控件位置信息类

4.1 知识点

创建控件信息类

控件位置信息类

控件位置信息类是用来表示位置、计算位置相关信息的类，不需要继承MonoBehaviour。

自定义控件要加[System.Serializable]特性才能在Inspector面板显示。

[System.Serializable]
public class CustomGUIPos
{
}

定义对齐方式九宫格枚举

对齐方式九宫格枚举定义如下：

public enum E_Alignment_Type
{
    Up,
    Down,
    Left,
    Right,
    Center,
    Left_Up,
    Left_Down,
    Right_Up,
    Right_Down,
}

添加计算真实位置所需要得到变量

在计算真实位置时，需要考虑以下变量：

  • 真实的位置（Rect类型）
  • 屏幕九宫格对齐方式（E_Alignment_Type类型）
  • UI控件中心对齐方式（E_Alignment_Type类型）
  • UI控件偏移位置（Vector2类型）
  • 宽度和高度（float类型）
//主要是处理 控件位置相关的内容
//要完成 分辨率自适应的相关计算

//真实的位置
//该位置信息 会用来返回给外部 用于绘制控件 需要对它进行 计算
private Rect rPos = new Rect(0, 0, 100, 100);

//屏幕九宫格对齐方式
public E_Alignment_Type screen_Alignment_Type = E_Alignment_Type.Center;

//UI控件中心对齐方式
public E_Alignment_Type control_Center_Alignment_Type = E_Alignment_Type.Center;

//UI控件偏移位置
public Vector2 pos;

//宽高
public float width = 100;
public float height = 50;

//用于计算的 中心点 成员变量
private Vector2 centerPos;

添加计算中心点偏移的方法和计算最终相对坐标位置的方法

计算中心点偏移方法

该方法用于计算控件中心点的偏移位置，根据不同的对齐方式进行计算。
主要是修改中心偏移位置centerPos的xy到正确的值。

//计算中心点偏移的方法
private void CalcCenterPos()
{
    switch (control_Center_Alignment_Type)
    {
        case E_Alignment_Type.Up:
            centerPos.x = -width / 2;
            centerPos.y = 0;
            break;
        case E_Alignment_Type.Down:
            centerPos.x = -width / 2;
            centerPos.y = -height;
            break;
        case E_Alignment_Type.Left:
            centerPos.x = 0;
            centerPos.y = -height/2;
            break;
        case E_Alignment_Type.Right:
            centerPos.x = -width;
            centerPos.y = -height/2;
            break;
        case E_Alignment_Type.Center:
            centerPos.x = -width / 2;
            centerPos.y = -height/2;
            break;
        case E_Alignment_Type.Left_Up:
            centerPos.x = 0;
            centerPos.y = 0;
            break;
        case E_Alignment_Type.Left_Down:
            centerPos.x = 0;
            centerPos.y = -height;
            break;
        case E_Alignment_Type.Right_Up:
            centerPos.x = -width;
            centerPos.y = 0;
            break;
        case E_Alignment_Type.Right_Down:
            centerPos.x = -width;
            centerPos.y = -height;
            break;
    }
}

计算最终相对坐标位置方法

该方法用于计算控件最终相对于屏幕的位置，考虑了屏幕九宫格对齐方式和控件中心对齐方式。
主要是修改真实位置rPos的xy到正确的值。
会用到公式：屏幕相对位置 + 中心偏移位置 + 控件偏移位置 = 真实位置

//计算最终相对坐标位置的方法
private void CalcPos()
{
    switch (screen_Alignment_Type)
    {
        case E_Alignment_Type.Up:
            rPos.x = Screen.width/2 + centerPos.x + pos.x;
            rPos.y = 0 + centerPos.y + pos.y;
            break;
        case E_Alignment_Type.Down:
            rPos.x = Screen.width/2 + centerPos.x + pos.x;
            rPos.y = Screen.height + centerPos.y - pos.y;
            break;
        case E_Alignment_Type.Left:
            rPos.x = centerPos.x + pos.x;
            rPos.y = Screen.height/2 + centerPos.y + pos.y;
            break;
        case E_Alignment_Type.Right:
            rPos.x = Screen.width + centerPos.x - pos.x;
            rPos.y = Screen.height / 2 + centerPos.y + pos.y;
            break;
        case E_Alignment_Type.Center:
            rPos.x = Screen.width / 2 + centerPos.x + pos.x;
            rPos.y = Screen.height / 2 + centerPos.y + pos.y;
            break;
        case E_Alignment_Type.Left_Up:
            rPos.x = centerPos.x + pos.x;
            rPos.y = centerPos.y + pos.y;
            break;
        case E_Alignment_Type.Left_Down:
            rPos.x = centerPos.x + pos.x;
            rPos.y = Screen.height + centerPos.y - pos.y;
            break;
        case E_Alignment_Type.Right_Up:
            rPos.x = Screen.width + centerPos.x - pos.x;
            rPos.y = centerPos.y + pos.y;
            break;
        case E_Alignment_Type.Right_Down:
            rPos.x = Screen.width + centerPos.x - pos.x;
            rPos.y = Screen.height + centerPos.y - pos.y;
            break;
    }
}

计算得到最终绘制的位置和宽高

通过该方法计算得到最终绘制的位置和宽高，用于在GUI中绘制控件。

/// <summary>
/// 计算得到最终绘制的位置和宽高
/// </summary>
public Rect Pos
{
    get
    {
        //计算中心点偏移的方法
        CalcCenterPos();

        //计算最终相对坐标位置的方法
        CalcPos();

        //宽高直接赋值 返回给外部 别人直接使用来绘制控件
        rPos.width = width;
        rPos.height = height;

        return rPos;
    }
}

4.2 知识点代码

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

/// <summary>
/// 对齐方式九宫格枚举
/// </summary>
public enum E_Alignment_Type
{
    Up,
    Down,
    Left,
    Right,
    Center,
    Left_Up,
    Left_Down,
    Right_Up,
    Right_Down,
}

/// <summary>
/// 控件位置信息类 是用来表示位置 计算位置相关信息的 不需要继承mono
/// </summary>
/// 

//自定义控件要加[System.Serializable]特性才能在Inspector面板显示
[System.Serializable]
public class CustomGUIPos
{
    //主要是处理 控件位置相关的内容
    //要完成 分辨率自适应的相关计算

    //真实的位置
    //该位置信息 会用来返回给外部 用于绘制控件 需要对它进行 计算
    private Rect rPos = new Rect(0, 0, 100, 100);

    //屏幕九宫格对齐方式
    public E_Alignment_Type screen_Alignment_Type = E_Alignment_Type.Center;

    //UI控件中心对齐方式
    public E_Alignment_Type control_Center_Alignment_Type = E_Alignment_Type.Center;

    //UI控件偏移位置
    public Vector2 pos;

    //宽高
    public float width = 100;
    public float height = 50;

    //用于计算的 中心点 成员变量
    private Vector2 centerPos;
    
    //计算中心点偏移的方法
    private void CalcCenterPos()
    {
        switch (control_Center_Alignment_Type)
        {
            case E_Alignment_Type.Up:
                centerPos.x = -width / 2;
                centerPos.y = 0;
                break;
            case E_Alignment_Type.Down:
                centerPos.x = -width / 2;
                centerPos.y = -height;
                break;
            case E_Alignment_Type.Left:
                centerPos.x = 0;
                centerPos.y = -height/2;
                break;
            case E_Alignment_Type.Right:
                centerPos.x = -width;
                centerPos.y = -height/2;
                break;
            case E_Alignment_Type.Center:
                centerPos.x = -width / 2;
                centerPos.y = -height/2;
                break;
            case E_Alignment_Type.Left_Up:
                centerPos.x = 0;
                centerPos.y = 0;
                break;
            case E_Alignment_Type.Left_Down:
                centerPos.x = 0;
                centerPos.y = -height;
                break;
            case E_Alignment_Type.Right_Up:
                centerPos.x = -width;
                centerPos.y = 0;
                break;
            case E_Alignment_Type.Right_Down:
                centerPos.x = -width;
                centerPos.y = -height;
                break;
        }
    }

    //计算最终相对坐标位置的方法
    private void CalcPos()
    {
        switch (screen_Alignment_Type)
        {
            case E_Alignment_Type.Up:
                rPos.x = Screen.width/2 + centerPos.x + pos.x;
                rPos.y = 0 + centerPos.y + pos.y;
                break;
            case E_Alignment_Type.Down:
                rPos.x = Screen.width/2 + centerPos.x + pos.x;
                rPos.y = Screen.height + centerPos.y - pos.y;
                break;
            case E_Alignment_Type.Left:
                rPos.x = centerPos.x + pos.x;
                rPos.y = Screen.height/2 + centerPos.y + pos.y;
                break;
            case E_Alignment_Type.Right:
                rPos.x = Screen.width + centerPos.x - pos.x;
                rPos.y = Screen.height / 2 + centerPos.y + pos.y;
                break;
            case E_Alignment_Type.Center:
                rPos.x = Screen.width / 2 + centerPos.x + pos.x;
                rPos.y = Screen.height / 2 + centerPos.y + pos.y;
                break;
            case E_Alignment_Type.Left_Up:
                rPos.x = centerPos.x + pos.x;
                rPos.y = centerPos.y + pos.y;
                break;
            case E_Alignment_Type.Left_Down:
                rPos.x = centerPos.x + pos.x;
                rPos.y = Screen.height + centerPos.y - pos.y;
                break;
            case E_Alignment_Type.Right_Up:
                rPos.x = Screen.width + centerPos.x - pos.x;
                rPos.y = centerPos.y + pos.y;
                break;
            case E_Alignment_Type.Right_Down:
                rPos.x = Screen.width + centerPos.x - pos.x;
                rPos.y = Screen.height + centerPos.y - pos.y;
                break;
        }
    }

    /// <summary>
    /// 计算得到最终绘制的位置和宽高
    /// </summary>
    public Rect Pos
    {
        get
        {
            //计算中心点偏移的方法
            CalcCenterPos();

            //计算最终相对坐标位置的方法
            CalcPos();

            //宽高直接赋值 返回给外部 别人直接使用来绘制控件
            rPos.width = width;
            rPos.height = height;

            return rPos;
        }
    }
}
转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论，也可以邮件至 785293209@qq.com

赏

©2016-2024 Tao

Built with Hexo and 3-hexo theme

×

喜欢就点赞,疼爱就打赏