美文网首页
UGUI Text 超出长度解决方案

UGUI Text 超出长度解决方案

作者: 雄关漫道从头越 | 来源:发表于2023-04-30 17:09 被阅读0次

项目中碰到文字超过显示区域的情况,Unity UGUI没有类似css的自动省略号,产品希望能展示全,考虑可以做个滚动文字的组件。
目前实现两种滚动方式:来回滚动和从左到右再回到最左边,都是循环滚动,逻辑不复杂,参考代码。

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

[RequireComponent(typeof(Mask))]
[RequireComponent(typeof(Image))]
public class AutoRollText : MonoBehaviour
{
    public enum RollType
    {
        Pingpong = 0,
        Left = 1
    }

    public RollType rollType = RollType.Pingpong;
    public Text m_text;
    [Header("延迟时间")] public float delay = 5f;
    [Header("移动速度")] public float speed = .1f;
    [Header("边界检测允许差值")] public float limitDiff = 5f;
    private float _textWidth;
    private RectTransform _rect;

    public string text
    {
        set
        {
            m_text.text = value;
            CalcTextPos();
        }
        get { return m_text.text; }
    }

    private void Awake()
    {
        _rect = this.transform as RectTransform;
        if (m_text == null)
        {
            m_text = this.GetComponentInChildren<Text>(true);
        }

        m_text.rectTransform.pivot = new Vector2(0, 0.5f);
        // m_text.rectTransform.anchoredPosition = new Vector2(-_rect.sizeDelta.x / 2, 0);
        CalcTextPos();
    }

    private void CalcTextPos()
    {
        // 根据字数 调整 view 宽度
        TextGenerator generator = new TextGenerator();
        TextGenerationSettings settings = m_text.GetGenerationSettings(Vector2.zero);
        _textWidth = generator.GetPreferredWidth(text, settings);
        Vector2 size = m_text.rectTransform.sizeDelta;
        size.x = _textWidth;
        m_text.rectTransform.sizeDelta = size;

        Vector2 pos = new Vector2(-size.x / 2, 0);
        pos.x += (_textWidth - _rect.sizeDelta.x) / 2f;
        Debug.Log($"textWidth:{_textWidth}-----width:{_rect.sizeDelta.x}-----pos:{pos}");
        m_text.rectTransform.anchoredPosition = pos;
        StopCoroutine(nameof(RollCoroutine));
        if (_textWidth > _rect.sizeDelta.x) //文字超出大小
        {
            StartCoroutine(nameof(RollCoroutine));
        }
    }

    private IEnumerator RollCoroutine()
    {
        Vector2 pos = m_text.rectTransform.anchoredPosition;
        Vector2 current = pos;
        float offset = _textWidth - _rect.sizeDelta.x;
        if (delay > 0)
        {
            yield return new WaitForSeconds(delay);
        }

        switch (rollType)
        {
            case RollType.Pingpong:
            {
                bool leftDir = true;
                while (true)
                {
                    if (leftDir)
                    {
                        current.x -= speed;
                    }
                    else
                    {
                        current.x += speed;
                    }

                    m_text.rectTransform.anchoredPosition = current;
                    if (current.x < (pos.x - offset - limitDiff))
                    {
                        leftDir = false;
                    }
                    else if (current.x >= pos.x + limitDiff)
                    {
                        leftDir = true;
                    }

                    yield return null;
                }
            }
                break;
            case RollType.Left:
            {
                while (true)
                {
                    current.x -= speed;
                    m_text.rectTransform.anchoredPosition = current;
                    yield return null;
                    if (current.x < (pos.x - offset - limitDiff))
                    {
                        yield return new WaitForSeconds(delay);
                        current.x = pos.x;
                        m_text.rectTransform.anchoredPosition = current;
                        if (delay > 0)
                        {
                            yield return new WaitForSeconds(delay);
                        }
                    }
                }
            }
                break;
        }
    }
}

组件分为两层结构,父层是一个mask,移动出去的文字超出显示区域不显示,子层是文字,如下:


文字显示的区域为父层RectTransform的Size。
参考工程:https://github.com/eangulee/CustomUGUI.git

相关文章

  • UGUI 字体背景长度自适应

    本文实现以下需求: 在UGUI中 Text为动态添加 要使Text字体背景随着Text的长度而变化 之前还在赞叹U...

  • Unity3D UGUI 渐变效果

    今天我们利用BaseMeshEffect来实现 UGUI的Text和Image 渐变。先上效果 UGUI的Imag...

  • 2020-06-17(UGUI Text)

    Unity UGUI Text属性的使用 聊天功能中对于Text的特殊使用: 1、text 加组件content ...

  • unity ContentSizeFitter立即生效

    ugui Text上添加了ContentSizeFitter组件后,如果在代码里对Text.text重新赋值,文本...

  • UGUI图文混排

    无意间看见了这篇博文UGUI表情系统解决方案,作者的实现思路是重写Text的网格生成逻辑,把代表表情的文字网格替换...

  • UGUI之Text

    2.4创建一个文本(Text)工具 新建一个文本工具的方法和新建Canvas是一样的。Hirearchy--Cre...

  • UGUI计算Text文字的宽度

    UGUI计算Text组件里文字的宽度 1. 为什么要计算宽度 我碰到这个问题,是需要在Unity中利用UGUI来实...

  • Unity UGUI基础控件

    UGUI基础控件 Text控件 Text是用来显示文本的,在游戏界面当中显示文本大多数是用Text控件来实现的,T...

  • uGUI Text富文本的顶点数优化

    uGUI的Text组件勾选Rich Text复选框后支持富文本,支持的富文本标签可以参见https://docs....

  • 【狂云歌之unity_vr】unity里获取text中文字宽度并

    【狂云歌之unity_vr】unity里获取text中文字宽度并截断省略 前言  在unity的ugui中Text...

网友评论

      本文标题:UGUI Text 超出长度解决方案

      本文链接:https://www.haomeiwen.com/subject/fapeddtx.html