美文网首页
iOS图片拉伸技巧—— resizableImageWithCa

iOS图片拉伸技巧—— resizableImageWithCa

作者: levinYuXiao | 来源:发表于2016-07-06 10:59 被阅读341次

原先以为很简单的东西,到了实际做的时候,才发现这里出错那里不对。浪费很多时间,究根结底,还是没有弄清楚文档。

在iOS5, UIImage添加了可以拉伸图片的函数,即:

 [UIImage resizableImageWithCapInsets:(UIEdgeInset){#top#,#left#,#bottom#,#right#}]

UIEdgeInset 是一个结构体 定义如下:

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到边的部分不会被拉升,其余部分则会被拉升。尤其需要注意的时,拉升的时候,是从左到右,从上到下的方向。通俗点说,拉升不是全方向的拉升,而是垂直和水平拉升的叠加。

11

开始我设置参数{20,10,10,10},在图上的位置大致:


22

这样拉升的结果:

33

很奇怪是不是,为什么出现了两个箭头(红色部分是设置的背景色用语区分)?再回头看下文档,才恍然大悟:

1.拉升的时候,是按前文说的两个方向来拉升
2.拉升的部分,是以tiled方式,简单的说就是以镜像的方式

按照1的规则,拉升的时候,水平和垂直方向都需要拉升。这样在水平拉升的时候,箭头其实处于拉升的部分。而拉升的时候,先按照原有的尺寸添加进去,不足的地方再把中间不拉升的部分填充进去,周而复始,直到填充完毕。因此,就有上面的现象了。

要达到需要的效果,必须按照如下的设置:

![4] (http://o7b4rtbje.bkt.clouddn.com/imageRight.png)

于是得到了我们需要的效果:

55

说实话,这个函数在iOS5 beta的时候就知道了,可是一直是不正确的理解。直到今天需要用到的时候,才发现一直没理解对。于此同时,也发现自己 局限在工作相关的部分,工作以外的东西不是光知道就可以,还是需要去实践的。否则,就会遇到今天的情形,被个小问题,折磨了好久。

相关文章

  • iOS图片拉伸技巧—— resizableImageWithCa

    原先以为很简单的东西,到了实际做的时候,才发现这里出错那里不对。浪费很多时间,究根结底,还是没有弄清楚文档。 在i...

  • 图片拉伸处理

    Code Sketch GitHub StretchImageDemo Articles iOS 图片拉伸技巧 i...

  • iOS 图片拉伸技巧

    在项目中有的图片需要拉伸处理,常用的有两种方式: 1. 代码: iOS图片拉伸技巧 2. 在xcode中设置图片的...

  • iOS 图片拉伸技巧

    在项目中有的图片需要拉伸处理(比如QQ聊天信息的Message Button背景图片),常用的有两种方式: 一. ...

  • ios图片拉伸技巧

    要点:1在 assets 中点击show slicing 可以可视化点九拉伸图。2可以在 uiimageview ...

  • iOS图片拉伸技巧

    小马哥的博客 这里是连接 到iOS 6.0为止,iOS提供了3种图片拉伸的解决方案,接下来分别详细介绍这些方案。

  • iOS图片拉伸技巧

    iOS图片拉伸技巧 转载地址http://blog.csdn.net/q199109106q/article/de...

  • iOS 图片拉伸技巧

    第一种:拉伸一张图片的中心位置 第二种:拉伸图片的某个区域(可选拉伸模式) 注意:只拉伸左右,要保持图片宽度与图片...

  • iOS图片拉伸技巧

    纵观移动市场,一款移动app,要想长期在移动市场立足,最起码要包含以下几个要素:实用的功能、极强的用户体验、华丽简...

  • iOS图片拉伸技巧

    比如下面张图片,本来是设计来做按钮背景的: 现在我们把它用作为按钮背景,按钮尺寸是150x50: 运行效果图 可以...

网友评论

      本文标题:iOS图片拉伸技巧—— resizableImageWithCa

      本文链接:https://www.haomeiwen.com/subject/lxdkjttx.html