关于文本居中
基础要求
先尝试回答下面的问题:什么是文本域、文本光标?什么是窗口字符、底层字符?窗口字符分为哪些类型?窗口字符、底层字符有哪些固定格式? |
如果你对上述问题有疑问,那么说明你还不了解 窗口字符。
需要去看看:”23.窗口字符 > 关于窗口字符.docx
”。
相关插件
核心插件:
◆Drill_CoreOfWindowCharacter 窗口字符 - 窗口字符核心
插件本体:
◆Drill_DialogTextAlign 窗口字符 - 文本居中
该插件介绍文本的对齐方式,
包括横向左对齐、居中、右对齐;纵向顶部对齐、居中、底部对齐。
对齐方式
1)原理
居中、左对齐、右对齐,
本质上就是在绘制文本前,根据文本块高宽的情况,对光标位置进行偏移处理。
以文本域中的光标为例,如下图。
居中设置激活后,光标会识别 窗口宽度与字符宽度 ,然后自动偏移到合适位置。
你之所以能看见对齐的文字,
是因为所有文本块的高度宽度都在一开始就计算好了。
(下图是相同高宽的 贴图与窗口 ,因为窗口有内边距,所以比贴图小了一圈)
由图可知,横向的对齐方式 和 纵向的对齐方式,能够相互叠加。比如”右下角”。这是因为光标位置xy轴的偏移相互独立,不影响。 |
2)窗口字符
对齐方式相关的窗口字符如下。
窗口字符 | 类型 | 描述 |
\dta[横向左对齐] | 整体对齐 | 当前行和后面所有行都 横向左对齐。 |
\dta[横向居中] | 整体对齐 | 当前行和后面所有行都 横向居中。 |
\dta[横向右对齐] | 整体对齐 | 当前行和后面所有行都 横向右对齐。 |
\dta[横切居中] | 切断对齐 | 只当前行有效,该字符之后的文字 横向居中,可切断。 |
\dta[横切右对齐] | 切断对齐 | 只当前行有效,该字符之后的文字 横向右对齐,可切断。 |
\dta[纵向顶部对齐] | 整体对齐 | 当前行和后面所有行都 纵向顶部对齐。 |
\dta[纵向居中] | 整体对齐 | 当前行和后面所有行都 纵向居中。 |
\dta[纵向底部对齐] | 整体对齐 | 当前行和后面所有行都 纵向底部对齐。 |
(没有纵切,因为纵向原理上就是多行控制偏移,无法竖向操作文本)
3)整体对齐
窗口字符分为两种,整体对齐 和 切断对齐。
整体对齐: 是指设置对齐方式之后,后面的所有行也都会统一设置为该对齐方式。
设置效果如下图所示。
注意,如果你只想一行进行右对齐,
那么下一行添加 ”\dta[横向左对齐]” 即可。(必须在下一行添加,而不是文本后面)
4)切断对齐
窗口字符分为两种,整体对齐 和 切断对齐。
切断对齐: 是指对当前行的文本,进行切断处理。
切断后的文本分成两块,后面的一块可以设置 居中或右对齐。
设置效果如下图所示。
一行最多能被 居中、右对齐 各切一次,如下图。
(如果你写了重复的窗口字符,则只按最后一个生效)
5)Debug查看
插件提供了窗口字符DEBUG查看效果,展示了文本居中的测试功能。
详细可以去示例中 窗口字符管理层 去看看 DEBUG 的介绍。
从零开始设计(DIY)
设计一张简单卡片(指向)
主要用到了下列插件:
Drill_CoreOfWindowCharacter 窗口字符 - 窗口字符核心
Drill_DialogTextAlign 窗口字符 - 文本居中
Drill_PictureAdditionalTextArea 图片 - 图片附加的文本域
使用 窗口字符+图片,可以设计一张简单卡片如下图。(还能定时刷新卡片内的分数值)
你可以去看看文档 ”16.图片 > 关于图片附加的文本域.docx
” 。
设计一张完整卡牌(指向)
主要用到了下列插件:
Drill_CoreOfWindowCharacter 窗口字符 - 窗口字符核心
Drill_DialogTextAlign 窗口字符 - 文本居中
Drill_PictureAdditionalTextArea 图片 - 图片附加的文本域
使用 窗口字符+图片,可以设计一张完整的精致的卡牌。
(注意,只是设计卡面,不含点击与功能效果)
你可以去看看文档 ”16.图片 > 关于图片附加的文本域.docx
” 。