伸缩图片
来源:互联网 发布:网络剧怎么只有几分钟 编辑:程序博客网 时间:2024/05/17 01:57
今天做了一个温度计的应用,需要一个图,能够根据输入的数据将温度计里面的红色图片拉伸。为了达到这个效果,使用了iOS5的函数:resizableImageCapInsets:(UIEdgeInsets)Insets。
其中Insets这个参数的格式是(top,left,bottom,right),从上、左、下、右分别在图片上画了一道线,这样就给一个图片加了一个框。只有在框里面的部分才会被拉伸,而框外面的部分则不会改变。比如(20,5,10,5),意思是下图矩形里面的部分可以被拉伸,而其余部分不变。
据说stretchableImageWithLeftCapWidth:topCapHeight这个函数也能够实现,但是在iOS5里面建议不要使用这个函数。效果如下图:
当修改了数据之后,变成这样:
下面来看如何实现。
温度计共由三张图组成:
背景图ThermometerBackground.png:
刻度图ThermometerCalibration:
里面的溶液Calibration:
首先将背景图加入superview中,再将刻度图和溶液图加入背景图中:(为简化起见,一些不必要的代码已经省略)
[plain] view plaincopy在CODE上查看代码片派生到我的代码片
//将背景图加入superview UIImageView *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)];
[plain] view plaincopy在CODE上查看代码片派生到我的代码片
[self.thermometerBackground addSubview:thermometerCalibration];
然后,根据度数生成对应高度的image;
[plain] view plaincopy在CODE上查看代码片派生到我的代码片
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)];
[plain] view plaincopy在CODE上查看代码片派生到我的代码片
[self.thermometer setImage:image];
在这里,top这个变量就代表了根据度数计算出的溶液的高度。
这样,当改变温度temperature的大小时,只要在viewWillAppear里调用这段代码,就能够动态生成温度计图片了。
链接:http://blog.csdn.net/lixing333/article/details/7589281
- 伸缩图片
- 图片伸缩处理方法
- javascript图片伸缩
- 图片的局部伸缩
- CoordinatorLayout-带图片伸缩工具栏
- 图片的旋转和伸缩
- 图片在固定区域内自动伸缩(自适应)
- android的图片加载和伸缩处理
- 头部图片可伸缩的TableView
- NSOperation下载图片,图片可平移伸缩,然后裁剪图片
- 缩放图片工具类,创建缩略图、伸缩图片比例
- 缩放图片工具类,创建缩略图、伸缩图片比例
- 缩放图片工具类,创建缩略图、伸缩图片比例
- Java 缩放图片工具类,创建缩略图、伸缩图片比例
- javascript 实现图片的拖拽和伸缩效果
- JQuery学习笔记(图片的展开和伸缩)
- jQuery使用一个按钮控制图片的伸缩
- 使用jQuery同时控制四张图片的伸缩
- 处理Emoji表情(unicode)
- 关于android webview 图片使用同一个src导致只加载第一张的问题
- 截屏代码整理
- stanford 机器学习笔记
- spring aop的实现方式(二)
- 伸缩图片
- VS快捷键
- 识别诈骗邮件
- Android画一条横线
- QT5入门之7 - Qt禁止最大化最小化
- 跳跃的设计
- runtime
- Linux Ubuntu配置Tomcat
- Linux打包到测试报MojoFailureException 解决方法