作为一名合格的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的值）

如果图片导进去后图片失真，可以考虑把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），这个时候，我们需要将图片进行处理。如果没有警告，说明图片是已经处理好了，可以忽略

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

单击需要做切片的图片，在属性窗口单击SpriteEditor,会出现下图界面。
在弹出的窗口中，标出边框，单击Apply按钮。

切片后四周固定下来，然后对中间进行拉伸变换
再次进行Slice设置的时候，警告消失。

1.3 、Image Type ：Tiled 平铺

Tiled 平铺跟上面的切片一样，只不过平铺更细碎了

对Image进行拉伸时，四个角不变，左右分别用1,2纵向平铺，上下分别用3,4平铺，中间用5平铺
5区域会随正常拉伸，剩下的保持固定
图像保持其原始大小，重复多次填补空白。

1.3 、Image Type ：Filled 填充

填充类型可以制作常见的贴图特效，也可以制作技能冷却

未完待续。。。

unity UGUI系统梳理 - 常用可视化控件相关推荐

unity UGUI系统梳理 -交互组件
概述 unity 中的交互组件可用于处理交互,例如鼠标或触摸事件以及使用键盘或控制器进行的交互 1.按钮 (Button) Button详解 2.开关 (Toggle) Background:背景图片 ...
【storybook】你需要一款能在独立环境下开发组件并生成可视化控件文档的框架吗？（一）
storybook 介绍入门说说用法 prop-types .stories.jsx 下一篇: https://blog.csdn.net/tuzi007a/article/details/129 ...
动态顺序图可视化控件
目录介绍为什么要使用它? 分布式系统的端到端跟踪调试器背景使用代码示例如何使用控件怎么运行的 Tick()方法元素渲染 API引用顺序参加者消息激活方框 SequenceD ...
WPF实现可视化控件打印及打印预览
打印预览XAML代码: <controls:WindowEx x:Class="SunCreate.Vipf.Client.UI.MapPrintPreview"xmlns= ...
【storybook】你需要一款能在独立环境下开发组件并生成可视化控件文档的框架吗？（二）
storybook 回顾继续说说用法配置文件介绍回顾上篇博客地址: https://blog.csdn.net/tuzi007a/article/details/129192502 说了部分用 ...
autojs可视化控件位置
牙叔教程简单易学使用场景当我们找控件的时候, 代码查找的结果, 可能不符合我们的预期, 这个时候, 最好就把找到的控件的位置, 显示在屏幕上面, 方便我们排查问题显示位置的方式可以是一个点, ...
体验Dundas Dashboard数据可视化控件
概述:Dundas公司开发的Dundas Dashboard是集所有需求于一体的商业智能仪表盘,这款仪表盘控件提供大量完全可定制的交互式图表.仪表.地图和记分卡等等,开启即可使用,这意味着您总能快捷方 ...
【storybook】你需要一款能在独立环境下开发组件并生成可视化控件文档的框架吗？（三）
storybook 插件addons 核心插件插件API argTypes 写文档组件注释法 MDX 生成在线可视化UI文档上一篇: https://blog.csdn.net/tuzi007a ...
WPF数据可视化控件（一） LED风格数字控件
原帖地址:https://blog.csdn.net/zhuo_wp/article/details/81561190 资源源码:https://download.csdn.net/download/ ...

unity UGUI系统梳理 - 常用可视化控件