当前位置: 首页 > news >正文

完整教程:Unity TextMeshPro 文本对齐方式详解

完整教程:Unity TextMeshPro 文本对齐方式详解

Unity TextMeshPro 文本对齐方式详解

概述

你是否还在对TMP的对齐方式 傻傻分不清? 有人说那还不简单,就上下左右,居中对齐这些方式嘛。是的,没错,基础的对齐方式确实是这些。
TMP的Text对齐选项
那下面这些你是否都清楚明白了呢?
Justified、Flush、Geometry Center、Baseline、Midline、Capline。
话不多说,我们往下看!!!
Justified、Flush、Geometry Center。这三个选项都属于TextMeshPro的高级对齐设置,主要控制文本在水平方向上的分布和对齐方式。


1. Justified(两端对齐)

在这里插入图片描述

定义

视觉表现

|这 是  一 段  两端 对齐 的 文本|
|第二行文本 也 会 两端 对齐 显示|
|最 后 一 行 通 常 左 对 齐|

特点

  • 非最后一行:左右两边完全对齐
  • 最后一行:保持左对齐(标准排版规则)
  • 通过增加单词间距来填充整行宽度
  • 创建整洁的文本块

代码设置

textComponent.horizontalAlignment = HorizontalAlignmentOptions.Justified;

2. Flush(边缘对齐)

在这里插入图片描述

定义

视觉表现

|这 是  一 段  边缘 对齐 的 文本|
|第二 行 文本 也 会 边缘 对齐 显|
|示   最   后   一   行    也|

特点

  • 包括最后一行:也会被拉伸以填满整行宽度
  • 可能造成最后一行单词间距过大
  • 适用于需要严格对齐的场合

与Justified的区别

// Justified: 最后一行左对齐
// Flush: 最后一行也强制两端对齐

3. Geometry Center(几何中心对齐)

定义

与普通Center的区别

普通Center对齐
textComponent.horizontalAlignment = HorizontalAlignmentOptions.Center;
  • 基于文本的布局边界(layout bounds)进行居中
  • 考虑字符的advance(前进宽度)和字间距
  • 是传统的文本居中方式
Geometry Center对齐
textComponent.horizontalAlignment = HorizontalAlignmentOptions.GeometryCenter;
  • 基于文本的实际几何形状进行精确居中
  • 计算所有可见字符的精确边界框
  • 考虑字符的实际形状和轮廓

实际差异示例

假设有以下文本:

" A V "

普通Center对齐效果:

|   A V   |  ← 基于字符布局位置居中

Geometry Center对齐效果:

|  A V  |   ← 基于字符实际几何形状居中

为什么会有差异?

  1. 字符形状不对称

    • 字符"A"左边有较多空白,右边较窄
    • 字符"V"左右形状不对称
    • Geometry Center会补偿这种不对称性
  2. 边界框计算方式不同

    • 普通Center:使用字符的布局边界(包括两边的空白)
    • Geometry Center:使用字符的实际可见几何边界

代码演示

public class GeometryCenterExample : MonoBehaviour
{
public TextMeshProUGUI centerText;
public TextMeshProUGUI geometryCenterText;
void Start()
{
// 测试不对称字符
string testText = "A V A W A";
// 普通居中
centerText.horizontalAlignment = HorizontalAlignmentOptions.Center;
centerText.text = testText;
// 几何中心对齐
geometryCenterText.horizontalAlignment = HorizontalAlignmentOptions.GeometryCenter;
geometryCenterText.text = testText;
// 添加边框以便观察差异
centerText.text = $"<color=red>[{testText}]</color>";
geometryCenterText.text = $"<color=blue>[{testText}]</color>";
}
}

视觉对比

普通Center:
|       [A V A W A]       |  ← 基于布局边界
Geometry Center:
|     [A V A W A]         |  ← 基于几何形状

适用场景

使用Geometry Center的情况:

  • 需要精确视觉居中的文本
  • 艺术字体或特殊字符排版
  • 不对称字符的文本(如"A", “V”, "W"等)
  • UI元素需要像素级精确对齐时

使用普通Center的情况:

  • 常规文本排版
  • 性能考虑(Geometry Center计算量稍大)
  • 对称字符的简单文本

性能考虑

使用建议

  1. Center:标题、按钮文字、需要视觉平衡的短文本
  2. Justified:长段落文本、文章内容、需要专业排版的文字
  3. Flush:需要严格对齐的表格数据、特殊排版需求
  4. Geometry:高精度排版、多语言混合、艺术字体处理

接着我们来看 Baseline、Midline、Capline 的具体区别吧!

4. Baseline(基线)

在这里插入图片描述

定义

  • 基线是绝大多数字母"坐"在上面的虚拟参考线
  • 是文本排版中最基本的对齐基准

特征

  TextMeshPro↑|  (上升部分)
------基线------  ← 字母底部对齐线|
  • 小写字母如"a、c、e"的底部紧贴基线
  • 只有下伸部分(如g、j、p、q、y的尾部)会延伸到基线下方

应用场景

// 设置基线对齐
textComponent.verticalAlignment = VerticalAlignmentOptions.Baseline;
  • 多行文本的默认对齐方式
  • 确保不同字体大小的文本底部对齐

5. Midline(中线)

在这里插入图片描述

定义

特征

      Capline↑
------中线------  ← 小写字母高度中心|
------基线------
  • 不是精确的数学中点,而是基于字体度量
  • 反映小写字母的主体高度中心

应用场景

// 设置中线对齐
textComponent.verticalAlignment = VerticalAlignmentOptions.Middle;
  • 实现文本的垂直居中显示
  • 让文本在容器中视觉上居中

6. Capline(大写线)

在这里插入图片描述

定义

特征

------Capline------  ← 大写字母顶部↑(小写字母上升部分)
------中线------
------基线------
  • 确定大写字母如"A、B、C"的顶部位置
  • 小写字母的上升部分(如b、d、f、h、k、l)可能接近或达到Capline

实际对比示例

public class TextAlignmentExample : MonoBehaviour
{
public TextMeshProUGUI text1; // Baseline对齐
public TextMeshProUGUI text2; // Midline对齐  
public TextMeshProUGUI text3; // Capline对齐
void Start()
{
string sampleText = "Hello\ngjpqy";
// 基线对齐 - 底部对齐
text1.verticalAlignment = VerticalAlignmentOptions.Baseline;
text1.text = $"Baseline:\n{sampleText}";
// 中线对齐 - 垂直居中
text2.verticalAlignment = VerticalAlignmentOptions.Middle;
text2.text = $"Midline:\n{sampleText}";
// 大写线对齐 - 顶部对齐
text3.verticalAlignment = VerticalAlignmentOptions.Top;
text3.text = $"Capline:\n{sampleText}";
}
}

视觉对齐效果

Capline对齐:   HELLO    [大写字母顶部对齐]hellogjpqy
Midline对齐:   HELLO    [小写字母中心对齐]hellogjpqy
Baseline对齐:  HELLO    [字母底部对齐]hellogjpqy

实用建议

  1. Baseline对齐:最常用的多行文本对齐方式
  2. Midline对齐:用于按钮文本、标题等需要居中的情况
  3. Capline对齐:需要大写字母顶部对齐的特殊设计

我们对于理解这三个基准线对于精确控制文本排版非常重要,特别是在需要精细调整UI布局时。
相信看完上面的内容,应该对文本的对齐各种方式都有所了解了吧!高手请绕道哦~

http://www.jsqmd.com/news/62702/

相关文章:

  • rust语言常用属性
  • 两分钟看懂:BL118 为什么特别适合储能行业?
  • 2025年中国电解式臭氧发生器生产厂家推荐:BDD金刚石涂层
  • AI一周资讯 251129-251205
  • 高性价比家政服务公司推荐,广州喜相缘家政实力上榜
  • 深入解析:redis怎么处理并发——redis高并发处理的5个最佳实践
  • 2025企业家必读:从“信息孤岛”到“知识银行”,私有化AI知识库如何重塑企业竞争力?
  • 2025年AI知识库本地化部署厂商全景扫描:如何把大模型装进企业“保险箱”
  • 2025年苏州地区知名的西点培训学校推荐:有实力的西点培训机
  • 从结构化到多模态,AI 时代如何利用多模态数据智能中台激活业务价值?
  • 2025年苏州地区信誉好的西餐培训学院推荐TOP5,专业西餐
  • Open webUI ollama图形界面的更新与实现
  • 2025.12 做题记录
  • 2025 年陶瓷喷涂源头厂家最新推荐榜,聚焦技术实力与市场口碑深度解析涡轮叶片陶瓷喷涂/半导体腔体陶瓷喷涂/锅炉管道耐高温陶瓷喷涂/阀门陶瓷喷涂公司推荐
  • Java 在 Windows 系统配置 Path 环境变量(适配 JDK 8/11/17+,含 Win10/11 通用步骤)
  • 关于幼儿园STEM课程设计的思考
  • 2025年泥浆土压变送器工厂权威推荐榜单:泥浆油脂压力变送器‌/盾构机土压变送器‌/盾构油压变送器‌‌源头工厂精选
  • 2025年知识库本地化部署厂商:企业智能安全升级的核心路径
  • 阵列信号处理中的自适应波束形成技术
  • 微信小程序开发公司怎么选?稳定运维服务商考察指南:硬件小程序/名片小程序/商城小程序/物联网小程序多领域全涵盖小程序开发公司推荐
  • Flutter部件出场即动画,不显示时不占用空间不占内存
  • 2025 瑞士 EOR 名义雇主服务商推荐:Safeguard Global 人力资源服务商,助力出海企业全球布局
  • 香港主机能用百度云加速吗
  • C# 深浅拷贝、值类型、引用类型浅析
  • 2025年度杭州有实力的移民企业排行榜,比较好的移民品牌企业
  • 2025 墨西哥人力资源公司推荐:Safeguard Global EOR 名义雇主优势盘点
  • 2025 越南人力资源公司选哪家?Safeguard Global 专业的EOR 名义雇主
  • 2025年值得推荐的安全继电器企业排行榜,安全继电器机构与品
  • node接收 RabbitMQ消息
  • 2025年中国管式炉制造商排行榜:管式炉优质供应商厂推荐