目录

1 图片 image

1.1 如果直接导入image

1.2 图片 image 和精灵 sprite

1.2.1 继续修改上面的格式 texture type 是default

1.2.2 再次关联到UI的 image 物体上就可以了

1.3 图片和遮罩 mask

1.3.1 创建1个父物体和1个子物体，分别都是image

1.3.2  如果父物体增加一个 mask的component

1.3.3 那什么是UI里所说的遮罩 mask ? 补集

2 text：新旧2种文本

2.1 区别

2.2 下面新建2种 text进行测试

3 旧版文本： legacy - text

3.1 文本的属性

3.2 文本的默认

3.3 支持富文本

3.4 支持溢出 和截断处理

3.5  best fit 时，文本框大小不变，自动修改字体的大小保证全部显示

3.6 color

3.7 raycast

4 新版文本:   text TMP/TextMesh Pro 

4.1 创建后，需要import这个TMP包

4.2 新版 tmp-text 的属性

4.3 设置文本的各种类型

4.4 字体 font 相关

4.5 color 且有渐变色

4.6  间隔设置等

4.7 对齐 alignment 和 overflow 溢出处理

5 内容适应器： content size fitter

（根据文字内容，动态调整文本框的大小，和前面不同）

---

1 图片 image

• UI的基础就是图片
• 可以把canvas ， panel 都看成图片
• 尤其是panel面板是自带 image这个componet的，本身就是一个用图片改的容器

1.1 如果直接导入image

• 我从网上直接down一个图下来，png的
• 可以直接拖到project里
• 可以看到 texture type 是default

• 会发现如果往UI里新建的image对象的 源图像里拖入
• 无法拖入
• 这是为什么？ 因为 这个源图像，格式不对

1.2 图片 image 和精灵 sprite

• 图片导入unity后，有很多种格式
• 一般来说, image 都是默认格式
• 但是如果需要在2D 或者 UI下使用，必须先把图片类型修改为 sprite才可以

1.2.1 继续修改上面的格式 texture type 是default

• 继续修改上面的格式 texture type 是 sprite

1.2.2 再次关联到UI的 image 物体上就可以了

1.3 图片和遮罩 mask

1.3.1 创建1个父物体和1个子物体，分别都是image

• 创建1个父物体和1个子物体，分别都是image
• 可以发现子物体，可以显示超过父物体，显示在外面

1.3.2  如果父物体增加一个 mask的component

如果父物体增加一个 mask的component

1.3.3 那什么是UI里所说的遮罩 mask ? 补集

• 我理解，就是除了这个 图片，外面所有的地方都是遮罩
• 也就是，灰色的区域
• 灰色区域：一个挖了一个洞的整个图都是mask
• 从数学的概念理解： 就是imageA的 补集 = 全集合 - imageA

2 text：新旧2种文本

2.1 区别

• 虽然是2套
• 每套里，包含4个： 文本，按钮，下拉框，输入框。每套里，实际是只有文本不同
• 比如，新版TMP的按钮，只是button上的文本用的新版的text-tmp 其他都一样

• 第1套： 文本，按钮，下拉框，输入框
• 第2套 TMP： TMP文本，TMP按钮，TMP下拉框，TMP输入框

2.2 下面新建2种 text进行测试

3 旧版文本： legacy - text

3.1 文本的属性

3.2 文本的默认

• legacy - text
• 默认是黑色，而且字体很小，要注意。。。。

3.3 支持富文本

• 富文本的语法，类html那种

3.4 支持溢出 和截断处理

对比下效果很明显

3.5  best fit 时，文本框大小不变，自动修改字体的大小保证全部显示

• best fit 时，文本框大小不变，自动修改字体的大小保证全部显示
• 但是字体的大小范围还是有限制

3.6 color

3.7 raycast

如果不勾选，则无法被点击操作等选中

4 新版文本:   text TMP/TextMesh Pro 

4.1 创建后，需要import这个TMP包

4.2 新版 tmp-text 的属性

4.3 设置文本的各种类型

4.4 字体 font 相关

很多内容

字体库，材质，模式。大小等等

4.5 color 且有渐变色

4.6  间隔设置等

各种间隔设置

• 字符之间的
• 词语之间的
• 行之间的
• 段落之间的

4.7 对齐 alignment 和 overflow 溢出处理

5 内容适应器： content size fitter

（根据文字内容，动态调整文本框的大小，和前面不同）

一个文本框显示效果

可以动态根据文字内容，实时动态的修改文本框的大小，去适应文字内容

这样就会自动根据文字内容，调整文本框大小了