UGUI_03_补充之_Image的属性(image type这个属性simple、Sliced、tiled、filled样式详解)

image的属性主要是讲image type这个属性。Simple、Sliced、Tiled、Filled
1、simple样式
单个显示,sprite将直接显示在图片控件中,默认情况下,如果图片控件的大小与sprite不一致时候,后者将经过拉伸来符合前者的大小。

2、Sliced属性
关键字:九宫切图
2.1使用背景:如图所示,比如一个按钮经过拉伸以后,它的边框跟着放大缩小,就会失真了,这种情况下就需要使用九宫切图了,将中间这一块切出来,这样不管怎么放大缩小,它看起来都不会显的失真。
在这里插入图片描述

在simple的样式下放大图片会有失真的情况,这时候选择Slider模式,然后找到这图片的sprite然后点击Sprite Editor会弹出一个编辑界面,然后可以移动里面的border形成一个九宫格(如下图)。再点击编辑界面里的Apply就会看到scene面板里原来失真的图片会变的清晰了,而且无论怎么样移动或者缩放,四个角都不会失真。(和NGUI里的sprite的编辑是一样的)。这就是Sliced的属性。

在这里插入图片描述九宫格作用:当我们用它来做背景时候,4个角不会被拉伸,左右的边框只会上下拉伸,上下的边框只会左右拉伸,只有中间这一块才会进行拉伸填充。
效果如下,不管怎么拉伸,都不会失真,因为边框已经被切掉了
在这里插入图片描述

如何去掉九宫切图:将Border全部设置为0即可。

3、然后就是tiled属性
这个属性就是平铺,为了使此Sprite填满整个图片控件,就会在保持sprite尺寸不变的前提下不断重复,像铺地板一样,如下图。
在这里插入图片描述

4、最后一个filled
用来显示图片当中的某一部分的,可用来作技能冷却效果
FillMethod表示以什么方式进行切割,其中 有水平方式、垂直方式,90、180、360度圆方式进行切割。
FillOrigin表示从什么地方开始切割,其中有上、下、左、右几种方式。
FillAmount表示切割哪一部分,0表示不显示,1表示全部显示。
在这里插入图片描述

  • 11
    点赞
  • 16
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

unity学院

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值