目录
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
（根据文字内容，动态调整文本框的大小，和前面不同）
一个文本框显示效果
可以动态根据文字内容，实时动态的修改文本框的大小，去适应文字内容
这样就会自动根据文字内容，调整文本框大小了
