天天看点

IOS中图片(UIImage)拉伸技巧

简单暴力,却是最最常用的方法,直接将图片设置为imageview的image属性,图片便会随uiimageview对象的大小做自动拉伸。这种拉伸的方法有一个致命的缺陷,它会使图像发生失真与形变。

- (uiimage *)stretchableimagewithleftcapwidth:(nsinteger)leftcapwidth topcapheight:(nsinteger)topcapheight;

这个函数我们可以用来拉伸类似qq,微信的聊天气泡背景图,它的两个参数分别leftcapwidth和topcapheight,这两个参数给定一个坐标,比如:

<a href="http://my.oschina.net/u/2340880/blog/403996#">?</a>

1

2

<code>    </code><code>uiimage * img= [uiimage imagenamed:@</code><code>"11.png"</code><code>];</code>

<code>    </code><code>img = [img stretchableimagewithleftcapwidth:1 topcapheight:1];</code>

这段代码的意思是将图片从左起第2列,上起第2行,坐标为(2,2)的像素点进行复制。将图片进行拉伸。这个方法和上面的方法比起来似乎灵活性更多了,但其也有它的一些局限,如果被拉伸的图片中间也有需要拉伸的像素,这个方法就无能为力了,例如,如下的一张图片,我们需要将其拉伸放大:

IOS中图片(UIImage)拉伸技巧

便会出现这样的效果:

IOS中图片(UIImage)拉伸技巧

这明显和我们的意图是不符的,那么,我们可以使用下面的方法。

- (uiimage *)resizableimagewithcapinsets:(uiedgeinsets)capinsets;

这个函数需要设置一个uiedgeinsets参数,uiedgeinsets结构体如下:

3

<code>typedef</code> <code>struct</code> <code>uiedgeinsets {</code>

<code>    </code><code>cgfloat top, left, bottom, right; </code>

<code>} uiedgeinsets;</code>

它分别对用了图片进行拉伸的区域距离顶部、左部、下部、右部的像素。比如,一个10*10像素的图片,将uiedgeinsets参数全部设置为1,则实际拉伸的部分就是中间的8*8的区域的像素。有一点需要注意,这个方法默认使用的拉伸模式是区域复制,比如还是上面的图案,如下代码拉伸:

<code>    </code><code>img = [img resizableimagewithcapinsets:uiedgeinsetsmake(1, 1, 1, 1)];</code>

结果如下:

IOS中图片(UIImage)拉伸技巧

可以明显的看到中间的虚线,这便是区域复制的杰作。

那么问题又来了,如果某些图片中间有渐变,我们该怎么处理了,来看下一个函数。

- (uiimage *)resizableimagewithcapinsets:(uiedgeinsets)capinsets resizingmode:(uiimageresizingmode)resizingmode;

这个函数和上一个函数相比,唯一的差别是多了一个参数。这个参数是个枚举,如下:

4

<code>typedef</code> <code>ns_enum(nsinteger, uiimageresizingmode) {</code>

<code>    </code><code>uiimageresizingmodetile,</code><code>//进行区域复制模式拉伸</code>

<code>    </code><code>uiimageresizingmodestretch,</code><code>//进行渐变复制模式拉伸</code>

<code>};</code>

现在就明了了,我们只需要设置一下模式,就可以实现渐变拉伸了:

<code>    </code><code>img = [img resizableimagewithcapinsets:uiedgeinsetsmake(1, 1, 1, 1) resizingmode:uiimageresizingmodestretch];</code>

来看一下效果:

IOS中图片(UIImage)拉伸技巧

圆角按钮,空心按钮,渐变的背景,内容可变的标签,聊天气泡等等这样的素材在app中很可能会多次出现,并且每次出现的尺寸可能还会略微有些差异,如果仅仅依靠美工的素材,恐怕不仅很难达到要求,也会额外增加软件的内存开销,这时,我们使用恰当的拉伸技巧,能使我们的代码更加健壮,app更加高效。

你是否注意观察过最细的线?

看到上面的问句,你可能有些差异。最细的线不就是一像素么?确实,能绘图画出来的最细的实心线确实是一像素,但在一个项目中,我们优秀的美工察觉到无论她把线做的多么细,无论我怎样控制拉伸方法,绘制出的登录框总是没有qq的细,qq的框线看起来更加干脆利索。后来索性用绘图画出登录框,结果很不幸,我依然无法将线做到像qq登录框那样细致。后来偶然试了一种方法,不知原理是否正确,效果总算达到了,当然这也要归功于我们的美工,她将一个图片做的很大,适配最大的分辨率,然后让我手动缩,如此一来,那线就变得非常细。