「Unity3D」UGUI Text <quad/> 使用详解:一种实现图文混排的策略

2024-04-16 17:58

本文主要是介绍「Unity3D」UGUI Text <quad/> 使用详解:一种实现图文混排的策略,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

首先,我们看一下官方说明。

This is only useful for text meshes and renders an image inline with
the text.

关键词在于:text meshesimage inline ——这说明,<quad/>设计是用在TextMesh而不是Text,并且它是一个文本内嵌图片,即可以自动图文混排

其次,看一下官方例子。

<quad material=1 size=20 x=0.1 y=0.1 width=0.5 height=0.5>

This selects the material at position in the renderer’s material array
and sets the height of the image to 20 pixels.

  • material——是TextMesh对应MeshRenderMaterials数组的索引。
  • size——是图片的像素高度
    在这里插入图片描述

The rectangular area of image starts at given by the x, y, width and height values, which are all given as a fraction of the unscaled width and height of the texture.

  • x,y——是图片在texture上的百分比偏移,如果texture是一个纹理集合,上面有很多表情,就可以用xy偏移到其中任意一个表情。
  • width——是图片显示宽度的百分比缩放,即:显示宽度 = size * width。也就是说,width越大,图片显示宽度越大,反之越小。
<quad material=1 size=0300 width=2    height=1 />
<quad material=1 size=0300 width=1    height=1 />
<quad material=1 size=0300 width=0.5  height=1 />

在这里插入图片描述

  • height——是图片显示高度的缩放百分比,即:图片显示高度 = 实际高度 / height。也就是说,height越大,图片显示高度越小,反之越大。
<quad material=1 size=0300 width=1  height=2/>
<quad material=1 size=0300 width=1  height=1/>
<quad material=1 size=0300 width=1  height=0.5/>

在这里插入图片描述
因此,我们可以看出:像素宽度 = size * (width / height)。也就是说,只要width和height保持1:1,像素宽度就不变,同时width越大显示宽度越大,height越大显示高度越小,反之width越小显示宽度越小,height越小显示高度越大。

<quad material=1 size=0300 width=2   height=2/>
<quad material=1 size=0300 width=1   height=1 />
<quad material=1 size=0300 width=0.5 height=0.5 />

在这里插入图片描述

接着,在Text中使用<quad/>的情况。

  • 第一,显然就是无法与MeshRender配合,正确检索到material的索引。
  • 第二,不仅无法正确使用material,还会显示前文所示的乱码。

但好的一面就是:<quad/>的属性可以正确设置图片大小,而<quad/>的大小会自动排版,那么我们就可以用<quad/>来做占位,进行图文混排的实现。

然后,使用<quad/>在Text中图文混排,需要解决的问题。

  • 第一,消除乱码。
  • 第二,用正确的图片替换占位符。
  • 第三,控制占位符大小。

第一个问题,可以使用重写Textprotected override void OnPopulateMesh(VertexHelper toFill)方法来解决,即找到<quad/>占位的四个顶点,然后将四个顶点的坐标设置成同一个即可。

第二个问题,可以利用<quad/>顶点的position直接,将正确的图片替换到正确的未知。

如何确定<quad/>的顶点,在toFill中索引?

这里有一个技巧,就是如果<quad material=1,2,3,4,5,6,7 />即material!=0,那么所有<quad/>顶点的就会集中在toFill的尾部——这样我们就可以,把Text中的<quad/>的数组按照顺序,从toFill的尾部替换即可。

核心的实现代码如下:

protected override void OnPopulateMesh(VertexHelper toFill)
{base.OnPopulateMesh(toFill);var count = this.spriteInfoList.Count;if (count > 0){var vertexLastIndex = toFill.currentVertCount - 1;var spriteLastIndex = count                   - 1;var leftBottom      = new UIVertex();// if <quad material!=0/> then the <quad/> data at the end of toFillfor (var i = spriteLastIndex; i > -1; --i){// remove <quad/> display from lastvar index = vertexLastIndex - (spriteLastIndex - i) * 4;toFill.PopulateUIVertex(ref leftBottom, index);     // LBtoFill.SetUIVertex     (    leftBottom, index - 1); // RBtoFill.SetUIVertex     (    leftBottom, index - 2); // RTtoFill.SetUIVertex     (    leftBottom, index - 3); // LT// get image from lastvar imageRT = this.transform.GetChild(i).GetComponent<Image>().rectTransform;var pos     = (Vector2) leftBottom.position + imageRT.sizeDelta / 2;// set sprite pos by <quad/> vertex posimageRT.SetLocalPositionXY(pos);}                  }
}

第三个问题, 由前文可知,我们可以使用<quad/>属性来控制占位符的大小,即:像素 height = size像素width = size * (width / height)

那么,令height = 1,则:size = 像素heightwidth = 像素width / size

例如:一个图片的大小是——width = 300px,height = 500px——对应的就是:<quad size=500, width=0.6 />

最后,使用<quad/>实现Text图文混排的限制。

这些限制,其实是Text实现的bug。

  • 第一,如果Text VerticalWrapModeTruncate且text内容已经truncated,那么<quad/>将显示乱码,并且toFill vertexes将会出现大量重复冗余顶点。
  • 第二,如果<quad/>的size超过500,那么<quad/>的height和position将会在cachedTextGeneratorForLayout.GetPreferredHeight的计算中出现错误的数值。

这篇关于「Unity3D」UGUI Text <quad/> 使用详解:一种实现图文混排的策略的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/909497

相关文章

使用Python和OpenCV库实现实时颜色识别系统

《使用Python和OpenCV库实现实时颜色识别系统》:本文主要介绍使用Python和OpenCV库实现的实时颜色识别系统,这个系统能够通过摄像头捕捉视频流,并在视频中指定区域内识别主要颜色(红... 目录一、引言二、系统概述三、代码解析1. 导入库2. 颜色识别函数3. 主程序循环四、HSV色彩空间详解

Windows下C++使用SQLitede的操作过程

《Windows下C++使用SQLitede的操作过程》本文介绍了Windows下C++使用SQLite的安装配置、CppSQLite库封装优势、核心功能(如数据库连接、事务管理)、跨平台支持及性能优... 目录Windows下C++使用SQLite1、安装2、代码示例CppSQLite:C++轻松操作SQ

一文深入详解Python的secrets模块

《一文深入详解Python的secrets模块》在构建涉及用户身份认证、权限管理、加密通信等系统时,开发者最不能忽视的一个问题就是“安全性”,Python在3.6版本中引入了专门面向安全用途的secr... 目录引言一、背景与动机:为什么需要 secrets 模块?二、secrets 模块的核心功能1. 基

PostgreSQL中MVCC 机制的实现

《PostgreSQL中MVCC机制的实现》本文主要介绍了PostgreSQL中MVCC机制的实现,通过多版本数据存储、快照隔离和事务ID管理实现高并发读写,具有一定的参考价值,感兴趣的可以了解一下... 目录一 MVCC 基本原理python1.1 MVCC 核心概念1.2 与传统锁机制对比二 Postg

一文详解MySQL如何设置自动备份任务

《一文详解MySQL如何设置自动备份任务》设置自动备份任务可以确保你的数据库定期备份,防止数据丢失,下面我们就来详细介绍一下如何使用Bash脚本和Cron任务在Linux系统上设置MySQL数据库的自... 目录1. 编写备份脚本1.1 创建并编辑备份脚本1.2 给予脚本执行权限2. 设置 Cron 任务2

SpringBoot整合Flowable实现工作流的详细流程

《SpringBoot整合Flowable实现工作流的详细流程》Flowable是一个使用Java编写的轻量级业务流程引擎,Flowable流程引擎可用于部署BPMN2.0流程定义,创建这些流程定义的... 目录1、流程引擎介绍2、创建项目3、画流程图4、开发接口4.1 Java 类梳理4.2 查看流程图4

一文详解如何在idea中快速搭建一个Spring Boot项目

《一文详解如何在idea中快速搭建一个SpringBoot项目》IntelliJIDEA作为Java开发者的‌首选IDE‌,深度集成SpringBoot支持,可一键生成项目骨架、智能配置依赖,这篇文... 目录前言1、创建项目名称2、勾选需要的依赖3、在setting中检查maven4、编写数据源5、开启热

C++中零拷贝的多种实现方式

《C++中零拷贝的多种实现方式》本文主要介绍了C++中零拷贝的实现示例,旨在在减少数据在内存中的不必要复制,从而提高程序性能、降低内存使用并减少CPU消耗,零拷贝技术通过多种方式实现,下面就来了解一下... 目录一、C++中零拷贝技术的核心概念二、std::string_view 简介三、std::stri

Python常用命令提示符使用方法详解

《Python常用命令提示符使用方法详解》在学习python的过程中,我们需要用到命令提示符(CMD)进行环境的配置,:本文主要介绍Python常用命令提示符使用方法的相关资料,文中通过代码介绍的... 目录一、python环境基础命令【Windows】1、检查Python是否安装2、 查看Python的安

C++高效内存池实现减少动态分配开销的解决方案

《C++高效内存池实现减少动态分配开销的解决方案》C++动态内存分配存在系统调用开销、碎片化和锁竞争等性能问题,内存池通过预分配、分块管理和缓存复用解决这些问题,下面就来了解一下... 目录一、C++内存分配的性能挑战二、内存池技术的核心原理三、主流内存池实现:TCMalloc与Jemalloc1. TCM