作为一名合格的UI仔>.<，我发现很多UI很久没有使用了，所以我决定做一个UGUI系列博客重新梳理一下

1、Image

在没有放入图片下，image控件长这样
在这里插入图片描述

注意我一般没交互需求的情况下都会把RaycastTarget给点掉，这个不单单是从提高性能角度上考虑，而是因为不勾掉的话测试测试的时候会产生一些不必要的bug
放图后多了两个选项

Image Type 字段可定义应用的精灵的显示方式，提供的选项包括：
Simple - 均匀缩放整个精灵。
Sliced - 使用 3x3 精灵分区，确保大小调整不会扭曲角点，而是仅拉伸中心部分。
Tiled - 类似于 Sliced，但平铺（重复）中心部分而不是对其进行拉伸。对于完全没有边框的精灵，整个精灵都是平铺的。
Filled - 按照与 Simple 相同的方式显示精灵，但不同之处是使用定义的方向、方法和数量从原点开始填充精灵。

当指定了Source Image时，根据Image Type的不同，属性也会有所不同。
在这里插入图片描述
在默认情况下是Simple

1.1 、Image Type : Simple 简单

在这里插入图片描述

Use Sprite Mesh
这个虽然一般我们用不到，默认也不勾选，深入参考可以
Unity学习笔记-Mesh和Sprite
点击wireframe就可以看到我们导入物品的网格了
Preserve Aspect：图像的高度和宽度保持比例还是重新调整（如果想缩放但不想拉伸，请点选此项）；
SetNative Size：设置原始大小（如果想显示原始大小，请点选此项，也可以更改RectTransform的Width和Height的值）

扫描二维码关注公众号，回复： 15896768 查看本文章

如果图片导进去后图片失真，可以考虑把imageType改成Simple 或 Filled ，但是需要注意的是当Simple 或 Filled 时显示的 Set Native Size 选项会将图像重置为原始精灵大小。
下面这个就是Set Native Size ，要点一下才会生效

1.2 、Image Type ：Sliced 切片

在这里插入图片描述

这个主要用于UI适配上,UI拉伸的时候不走形
Sliced 切片具有良好的UI显示性能，因为当图像缩放后其边界保持不变，这种特性允许你显示图像的轮廓。不用担心放大与缩小的同时轮廓变化。如果你只想要没有中心区域的边框，则可以禁用FillCenter选项。
当我们选择这个选项的时候，可能会有一个警告（This Image doesn’t have a border），这个时候，我们需要将图片进行处理。如果没有警告，说明图片是已经处理好了，可以忽略

制作切片精灵需要以下步骤：