1. 程式人生 > >Unity UGUI圖文混排(七) -- 下劃線

Unity UGUI圖文混排(七) -- 下劃線

之前更新超連結的時候,忘了搭配實現一個下劃線的功能,這篇文章就是來補上這一個功能,時間有點長,一方面沒有很好的思路,一方面也沒多少時間。

先在網上收集了一下下劃線的實現操作,一種是在文字下再建立一個文字用來輸入下劃線,一種是在文字下再建立一個圖片用來繪製下劃線,這兩種方式都相當容易理解,最開始都在考慮是否整合這兩種方式,但是這裡確實不適合應用到圖文混排中,不斷的生成資源,會大大地消耗效能。

最後,在參考前面的下劃線的時候,想到只要自己將下劃線的頂點資料獲取到,更改為我們所需要的位置,新增到Text中,就可以完成了,以下就是相關的實現步驟:

1.首先寫了一個新增下劃線的函式,_VToFill為當前Text的VertexHelper,_VTUT為下劃線的頂點資料,總共四個點,_VStartPos和_VEndPos為下劃線所在的初始和結束位置,具體的實現內容,參照OnPopulateMesh函式裡面新增UIVertexQuad的功能

#region 新增下劃線
    void AddUnderlineQuad(VertexHelper _VToFill, IList<UIVertex> _VTUT, Vector3 _VStartPos, Vector3 _VEndPos)
    {
        Vector3[] _TUnderlinePos = new Vector3[4];
        _TUnderlinePos[0] = _VStartPos;
        _TUnderlinePos[1] = _VEndPos;
        _TUnderlinePos[2] = _VEndPos + new Vector3(0, fontSize * 0.2f, 0);
        _TUnderlinePos[3] = _VStartPos + new Vector3(0, fontSize * 0.2f, 0);

        for (int i = 0; i < 4; ++i)
        {
            int tempVertsIndex = i & 3;
            m_TempVerts[tempVertsIndex] = _VTUT[i % 4];
            m_TempVerts[tempVertsIndex].color = Color.blue;

            m_TempVerts[tempVertsIndex].position = _TUnderlinePos[i];

            if (tempVertsIndex == 3)
                _VToFill.AddUIVertexQuad(m_TempVerts);
        }
    }
#endregion
2.在OnPopulateMesh的函式中,實現超連結包圍盒下面,獲取下劃線的頂點資料,然後借用包圍盒的的相關資料,就不需要自己再去計算我們所需要相關的位置資訊,再呼叫開始的新增下劃線的函式。
#region 處理超連結的下劃線--拉伸實現
        TextGenerator _UnderlineText = new TextGenerator();
        _UnderlineText.Populate("_", settings);
        IList<UIVertex> _TUT = _UnderlineText.verts;

        foreach (var hrefInfo in m_HrefInfos)
        {
            if (hrefInfo.startIndex >= toFill.currentVertCount)
            {
                continue;
            }

            for (int i = 0; i < hrefInfo.boxes.Count; i++)
            {
                Vector3 _StartBoxPos = new Vector3(hrefInfo.boxes[i].x, hrefInfo.boxes[i].y, 0.0f);
                Vector3 _EndBoxPos = _StartBoxPos + new Vector3(hrefInfo.boxes[i].width, 0.0f, 0.0f);
                AddUnderlineQuad(toFill, _TUT, _StartBoxPos, _EndBoxPos);
            }

        }
#endregion
3.這裡的下劃線我是直接是實現在超連結下面,沒有單獨作為一個功能,會不會獨立後面再考慮吧,效果截圖:


4.相關問題,這裡為了不浪費效能,在一個超連結下面是不斷拉伸的一個下劃線,於是如果超連結文字過長會出現如圖片的情況,我不知道真正在使用中是否會預設這種情況,如果有更好的解決方案,也可以提交給我


後續,我會在github上持續更改一些功能或者操作上的一些問題,歡迎star和fork

相關推薦

Unity UGUI圖文() -- 劃線

之前更新超連結的時候,忘了搭配實現一個下劃線的功能,這篇文章就是來補上這一個功能,時間有點長,一方面沒有很好的思路,一方面也沒多少時間。先在網上收集了一下下劃線的實現操作,一種是在文字下再建立一個文字用來輸入下劃線,一種是在文字下再建立一個圖片用來繪製下劃線,這兩種方式都相當

Unity UGUI圖文原始碼(二)

圖文混排解決方案二:2.自定義一個渲染元件,用來渲染圖片,後面我會將他放在Text文字下,這裡會用一個引數,就是上面的SpriteAsset檔案,具體程式碼如下using UnityEngine; using UnityEngine.UI; using System.Coll

Unity UGUI圖文原始碼(三) -- 動態表情

這裡是根據圖文混排原始碼(二)進一步修改的,其他連結也不貼了,就貼一個連結就好了,第一次看這文章的同學可以先去看看其他幾篇文章1.首先來一個好訊息,在最新版本的圖文混排中,終於搞定了<quad&g

[UGUI]圖文(二):劃線

otherwise ret align protected result pve amp HA fse UGUI源碼: https://bitbucket.org/Unity-Technologies/ui/downloads/?tab=tags 首先下載一份UGUI源

[UGUI]圖文(五):添加劃線

字符 方法 ugui fff info cal 去掉 分享圖片 src 0.下劃線標簽

Unity瑣碎(3) UGUI 圖文解決方案和優化

http://www.cnblogs.com/zsb517/p/6667050.html 感覺使用Unity之後總能看到各種各樣解決混排的方案,只能說明Unity不夠體恤下情啊。這篇文章主要講一下個人在使用過程中方案選擇和優化過程,已做記錄。順便提下,開源很多意味著坑,

[UGUI]圖文(三):插入圖片

img bsp static readonly 圖片標簽 pre esc 分享圖片 gist 參考鏈接: http://www.cnblogs.com/leoin2012/p/7162099.html 1.用空格替換圖片標簽 a.選擇空格符 換行空格:Space鍵輸出的

[UGUI]圖文(三):資源管理

圖片 dal cti sharp ons set creat ces turn 1.圖文混排中的資源,主要是圖片。 2.所謂的資源管理,可以分為資源對象池和資源加載這兩部分。這裏是為圖文混排單獨做一套資源管理,當然也可以改為調用項目中的資源管理。 RichTextRes

UGUI圖文外掛Text Mesh Pro

Text Mesh Pro外掛下載地址: https://github.com/UnityTechnologies/Test_ShaderGraphBlog 外掛線上文件: http://digitalnativestudios.com/textmeshpro/docs/ 使用效

unity NGUI圖文

遊戲中需要製作聊天功能,很可能會使用到圖文混排,這裡介紹一下基於NGUI的一種做法。 步驟1:工程中得先匯入一箇中文字型庫,ttf格式,如果是ttc格式的,強行改成ttf格式即可。如果你已經匯入過了,忽略此步: 步驟2:開啟NGUI的Font Maker,製作一個字型

android 你所不知道的類SpannableStringBuilder的總結--實現圖文,檢視更多,劃線等等

今天無意中看到的一個類SpannableStringBuilder,查了下感覺很牛叉; 1.看下實現的效果 第一種 第二種 實現的程式碼見   使用的模板 2.簡單的使用模板: publiccl

基於UGUI圖文——第一部分

UGUI的Text渲染 Text的繼承關係:Text -> MaskableGraphic -> Graphic 然後我們 F12 看看 Graphic 被公佈出來可重寫或者可呼叫有哪些

Unity3D 基於UGUI圖文元件

起因:在使用UGUI的時候,在網上找了好久也沒找到合適的圖文混排元件,但是有看到一篇文章給了我思路。甩個連結:點選開啟連結 思路:是通過繼承Text元件,然後在Mesh生成的函式裡做手腳。但是那篇文章好像有些bug,而且UGUI的程式碼也是開源的,所以就自己動手了。就是把

Unity外掛之NGUI學習(5)—— 建立Label圖文及文字點選

建立一個新的Scene,並按 Unity外掛之NGUI學習(2)建立UI Root。 準備工作,製作Font,現在Project視窗建立一個Font資料夾,然後從系統自帶字型資料夾中選擇自己需要的字型,我選擇了黑體,然後拖到Font資料夾中去。選擇剛匯入的字型。 Font

IOS開發UI篇--一個支持圖文的ActionSheet

log one 簡單介紹 button action 曾經 hot uitable ios 一、簡單介紹 UIActionSheet是IOS提供給我們開發人員的底部彈出菜單控件。一般用於菜單選擇、操作確認、刪除確認等功能。IOS官方提供的下面方式對UI

圖文-------專輯詳情

cnblogs 微信 集成 服務 字符 -c containe git view ---恢復內容開始--- 最近,需求要求做一個專輯詳情的圖文混排,整個界面大概分為4部分:   1.頂部banner和音頻控制區   2.中間圖文混排區,文字解析CSS代碼,圖片做多種跳轉  

Android圖文-實現EditText圖文混合插入上傳

origin uri keyword src llb fail ren -a amp 前段時間做了一個Android會議管理系統,項目需求涉及到EditText的圖文混排,如圖: 在上圖的”會議詳情”中。須要支持文本和圖片的混合插入,下圖演示輸入的

Button實現圖文

actor stat 實現圖 1.0 eve onf demo mat ont Button實現圖文混排 一、簡介 本文介紹兩種圖文混排方式 1、android:drawableTop="@drawable/star"實現文字上有圖片 當然有上下左右等等 2、Spannab

靜態頁面制作:8HTML浮動騰挪概念(鋪墊二:圖文)

net 們的 屬於 元素 含義 網頁 我們 紅色 背景 .paragraph { width: 80%; margin: 50px auto; color: #666; font-size: 20px; text-align: left; line-height: 200%

利用NSAttributedString實現圖文

nes -s union ref and 代理方法 tag erl efault UILabel 和 UITextView 都能添加 NSAttributedString 屬性字符串,通過這一點,可以實現帶有屬性的文字和文字內包含圖片的文本內容展示. 效果如下: 1-