iPhone图片拉伸:resizableImageWithCapInsets

今天做了一个温度计的应用,需要一个图,,能够根据输入的数据将温度计里面的红色图片拉伸。为了达到这个效果,使用了iOS5的函数:resizableImageCapInsets:(UIEdgeInsets)Insets。

其中Insets这个参数的格式是(top,left,bottom,right),从上、左、下、右分别在图片上画了一道线,这样就给一个图片加了一个框。只有在框里面的部分才会被拉伸,而框外面的部分则不会改变。比如(20,5,10,5),意思是下图矩形里面的部分可以被拉伸,而其余部分不变。

据说stretchableImageWithLeftCapWidth:topCapHeight这个函数也能够实现,但是在iOS5里面建议不要使用这个函数。效果如下图:

当修改了数据之后,变成这样:

下面来看如何实现。

温度计共由三张图组成:

背景图ThermometerBackground.png:

刻度图ThermometerCalibration:

里面的溶液Calibration:

首先将背景图加入superview中,再将刻度图和溶液图加入背景图中:(为简化起见,一些不必要的代码已经省略)

//将背景图加入superviewUIImageView *thermometerBackground = [[UIImageView alloc] initWithFrame:THERMOMETER_FRAME];[thermometerBackground setImage:[UIImage imageNamed:@"ThermometerBackground.png"]];[self.view addSubview:self.thermometerBackground];//将溶液图加入背景图UIImageView *thermometer = [[UIImageView alloc]init];[self.thermometerBackground addSubview:self.thermometer];//将刻度图加入背景图UIImageView *thermometerCalibration = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"ThermometerCalibration.png"]];[self.thermometerCalibration setFrame:CGRectMake(0, 10, thermometerBackground.frame.size.width, thermometerCalibration.image.size.height*thermometerBackground.frame.size.width/thermometerCalibration.frame.size.width)];[self.thermometerBackground addSubview:thermometerCalibration];

然后,根据度数生成对应高度的image;

UIImage* image = [UIImage imageNamed:@"Thermometer.png"];UIEdgeInsets insets = UIEdgeInsetsMake(20, 0, 25, 0);image = [image resizableImageWithCapInsets:insets];int top = 10.00+(38.00-temperature)*20.00;[self.thermometer setFrame:CGRectMake(0, top, self.thermometerBackground.frame.size.width, self.thermometerBackground.frame.size.height-top)]; [self.thermometer setImage:image];在这里,top这个变量就代表了根据度数计算出的溶液的高度。

这样,当改变温度temperature的大小时,只要在viewWillAppear里调用这段代码,就能够动态生成温度计图片了。

不畏不惧,不言不弃,冲破风雨的阻隔,黎明就在前方!

iPhone图片拉伸:resizableImageWithCapInsets

相关文章:

你感兴趣的文章:

标签云: