[UIImage resizableImageWithCapInsets:]
[UIImage resizableImageWithCapInsets:]使用注意
转自:http://www.cnblogs.com/scorpiozj/p/3302270.html
最近在sae上搭建了个wp,因为深感自己前端的东西缺乏,所以想依次为契机,学习一下。本文是从个人的sae版wp转载过来。
原文见此。
本篇也是在实现微博过程中遇到的问题。原先以为很简单的东西,到了实际做的时候,才发现这里出错那里不对。浪费很多时间,究根结底,还是没有弄清楚文档。
在iOS5, UIImage添加了可以拉伸图片的函数,即:
[UIImage resizableImageWithCapInsets:]
它带参数: UIEdgeInsets,这是一结构体,包含 上/左/下/右四个参数。函数的作用我们看下文档:
Creates and returns a new image object with the specified cap insets.
Discussion
You use this method to add cap insets to an image or to change the existing cap insets of an image. In both cases, you get back a new image and the original image remains untouched.
During scaling or resizing of the image, areas covered by a cap are not scaled or resized. Instead, the pixel area not covered by the cap in each direction is tiled, left-to-right and top-to-bottom, to resize the image. This technique is often used to create variable-width buttons, which retain the same rounded corners but whose center region grows or shrinks as needed. For best performance, use a tiled area that is a 1×1 pixel area in size.
上左下右4参数定义了cap inset,就是离四条边的距离。拉升时,cap到边的部分不会被拉升,其余部分则会被拉升。尤其需要注意的时,拉升的时候,是从左到右,从上到下的方向。通俗点说,拉升不是全方向的拉升,而是垂直和水平拉升的叠加。
以我遇到的问题为例,我的图片是170×50, 需要填充到240×140,但是四周的圆角以及小箭头保持原样,如图:
开始我设置参数{20,10,10,10},在图上的位置大致:
这样拉升的结果:
很奇怪是不是,为什么出现了两个箭头(红色部分是设置的背景色用语区分)?再回头看下文档,才恍然大悟:
- 拉升的时候,是按前文说的两个方向来拉升
- 拉升的部分,是以tiled方式,简单的说就是以镜像的方式
按照1的规则,拉升的时候,水平和垂直方向都需要拉升。这样在水平拉升的时候,箭头其实处于拉升的部分。而拉升的时候,先按照原有的尺寸添加进去,不足的地方再把中间不拉升的部分填充进去,周而复始,直到填充完毕。因此,就有上面的现象了。
要达到需要的效果,必须按照如下的设置:
于是得到了我们需要的效果:
Binggo~ 一切完毕。
说实话,这个函数在iOS5 beta的时候就知道了,可是一直是不正确的理解。直到今天需要用到的时候,才发现一直没理解对。于此同时,也发现自己 局限在工作相关的部分,工作以外的东西不是光知道就可以,还是需要去实践的。否则,就会遇到今天的情形,被个小问题,折磨了好久。
[UIImage resizableImageWithCapInsets:]的更多相关文章
- [UIImage resizableImageWithCapInsets:]使用注意
转自:http://www.cnblogs.com/scorpiozj/p/3302270.html 最近在sae上搭建了个wp,因为深感自己前端的东西缺乏,所以想依次为契机,学习一下.本文是从个人的 ...
- ios UIImage图片拉伸 resizableImageWithCapInsets:
常见的按钮添加和背景设置如下: UIButton *button = [[UIButton alloc] initWithFrame:CGRectMake(80, 130, 160, 44)];[bu ...
- UIkit框架之UIimage
1.继承链:NSObject 2.以下有三种方法来创建图片对象 (1) imageNamed:inBundle:compatibleWithTraitCollection:从image asset或者 ...
- IOS - UIImage
IOS中对图片的处理 UIImage UIImage 继承于NSObject 以下介绍一下UIImage中的方法 首先是我们最经常使用的 通过图片的文件名称来获取这个图片 + (UIImage *)i ...
- UIImage拉伸显示
下面张图片,是设计来做按钮背景的: button.png,尺寸为:24x60 现在我们把它用作为按钮背景,按钮尺寸是150x50,以下是没有经过技术性拉伸处理的情况: // 得到view的尺寸 ...
- 图片拉伸:resizableImageWithCapInsets
iOS 5.0 在iOS 5.0中,UIImage有一个新方法可以处理图片的拉伸问题 - (UIImage *)resizableImageWithCapInsets:(UIEdgeInsets)ca ...
- UIImage图片拉伸方法
纵观移动市场,一款移动app,要想长期在移动市场立足,最起码要包含以下几个要素:实用的功能.极强的用户体验.华丽简洁的外观.华丽外观的背后,少不了美工的辛苦设计,但如果开发人员不懂得怎么合理展示这些设 ...
- UIImage类方法总结及UIImage生成方法对比
http://mp.weixin.qq.com/s/A900w0Y5pGjuaB4j9Os9ww1.UIImage 生成方法的对比 Apple官方的文档为生成一个UIImage对象提供了两种方法: 1 ...
- UIImage 类说明
+ (UIImage *)imageNamed:(NSString *)name inBundle:(NSBundle *)bundle compatibleWithTraitCollection:( ...
随机推荐
- 【转】appStore上传苹果应用程序软件发布流程
转载地址:http://blog.sina.com.cn/s/blog_68661bd801019uzd.html 首先确定帐号是否能发布, https://developer.apple.com/a ...
- EntityFramework Core 学习笔记 —— 包含与排除类型
原文地址:https://docs.efproject.net/en/latest/modeling/included-types.html 在模型类中包含一种类型意味着 EF 拥有了这种类型的元数据 ...
- HTML 事件属性(下)
HTML 事件属性(下) 一:键盘事件 (Keyboard Events)二:鼠标事件 (Mouse Events) 一:键盘事件 (Keyboard Events)在下列元素中无效:base.bdo ...
- bootstrap-validator验证问题总结
bootstrap-validator是一个优秀的验证器,使用中遇到如下问题,总结如下: 1.<button type="submit" name="submit2 ...
- R----lubridata包介绍学习
lubridate包,非常强大,能够识别各种类型的日期.字符型和时间型数据,都是格式比较特别的你数据,在处理时,比较麻烦,但是有了lubridate这个包之后,时间处理变得非常简单,这个包函数命名简单 ...
- VS2013: upgrading a Windows Phone 7/8 and Windows 8 apps(转)
VS2013: upgrading a Windows Phone 7/8 and Windows 8 apps September 17, 2013Windows 8, Windows PhoneJ ...
- Hibernate不能自动建数据表解决办法
首先自己要注意自己的MYSQL版本,然后设置对应的方言 兼容性模式 <property name="hibernate.dialect">org.hibernate.d ...
- Oracle的不完全恢复
一.不完全恢复特性 1.不完全恢复 不完全恢复仅仅是将数据恢复到某一个特定的时间点或特定的SCN,而不是当前时间点.不完全恢复会影响整个数据库,需要在MOUNT状 态下进行.在不完全恢复成功之后,通 ...
- myeclipse maven pom.xml 配置错误
http://www.oschina.net/question/2265006_219341#tags_nav maven pom.xml 配置文件错误 腾讯云消息队列CMQ架构解析> ...
- 【ros】rplidar Hector Slam
想用rplidar跑一下hector slam,在网上发现了几个教程写的都不错,但是亲测发现都有点不足,综合了一下,进行补充. 1. 安装ros 和 创建工作空间 http://blog.csdn.n ...