resizableImageWithCapInsets:方法的探析

2019独角兽企业重金招聘Python工程师标准>>>

3. 设计实验方法

实验对象

Image对象尺寸为60128(为行文方便,之后简称为原始图像,图3.1)
ImageView对象尺寸为180384(为行文方便,之后简称为相框)

4.实验分析

4.1 拉伸模式

resizingMode参数为UIImageResizingModeStretch

4.1.1.capInsets参数为UIEdgeInsetsMake(0, 0, 0, 0)时

当我们向拉伸方法传入该组参数时,代表我们未对原始图像的任何区域进行保护.其拉伸效果如图4.1.1
在该种情况下,我们发现原始图像按比例放大了3倍,因此我们将该情况当做拉伸模式下的默认状况
在之后的实验中,我们将该种状况当做参考对象,显示在界面的右下角

4.1.3.capInsets参数为UIEdgeInsetsMake(0,20, 0, 0)时

当我们向拉伸方法传入该组参数时,代表我们对原始图像左部的三分之一进行保护(即红色方块区域).其拉伸效果如图4.1.3
在该种情况下,我们可以发现拉伸后的图像中:

  • 原始图像中受保护的区域(即红色方块区域)在X轴方向保持了原比例,但在Y轴方向进行了拉伸

  • 原始图像中未受保护的区域,直接按比例进行了拉伸

 

4.2选择平铺模式

resizingMode参数为UIImageResizingModeTile

4.2.1.capInsets参数为UIEdgeInsetsMake(0, 0, 0, 0)时

当我们向拉伸方法传入该组参数时,代表我们未对原始图像的任何区域进行保护.其平铺效果如图4.2.1
在该种情况下,我们发现原始图像按比例填充了相框,因此我们将该情况当做拉伸模式下的默认状况
在之后的实验中,我们将该种状况当做参考对象,显示在界面的右下角

4.2.3.capInsets参数为UIEdgeInsetsMake(0,20, 0, 0)时

当我们向拉伸方法传入该组参数时,代表我们对原始图像左部的三分之一进行保护(即红色方块区域).其平铺效果如图4.2.3
在该种情况下,我们可以发现拉伸后的图像中:

  • 原始图像中受保护的区域(即红色方块区域)在X轴方向保持了原比例,但在Y轴方向进行了平铺填充

  • 原始图像中未受保护的区域,直接按比例进行了平铺,但不包含被保护的区域(注意观察蓝色箭头所指的区域)

 

5. 结论和建议

通过8组实验数据可以观察出拉伸方法在平铺模式和拉伸模式下的变化过程和主要区别,由此我们可知:

  • 对原始图形使用拉伸方法且在四周增加保护区域后,能保证原始图形的四个角不失真,但其余部分的变化细节则有不同

  • 如果原始图像的外轮廓不平整的话,使用拉伸方式会让外轮廓的不平整度放大,使用平铺方式应该能减小这种情况

6. 附录-代码

为了缩短代码的长度,我使用了Storyboard搭建软件界面,想重现实验的朋友可以自行构建界面,具体的参数我在文章和附录中进行了简要说明,我相信聪明的你一定可以搞定!

 

 

 

 

 

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

#import “ViewController.h”

 

@interface ViewController ()

@property (weak, nonatomic) IBOutlet UIImageView *imageView1;

@property (weak, nonatomic) IBOutlet UIImageView *imageView2;

@property (weak, nonatomic) IBOutlet UIImageView *imageView3;

@end

 

@implementation ViewController

 

– (void)viewDidLoad {

[super viewDidLoad];

 

//–imageView1的相关内容————————————————————————————

 

//相框大小为60 * 128    图片尺寸为60 * 128

//读取图片

UIImage *testImage1 = [UIImage imageNamed:@”123456789″];

 

testImage1 = [testImage1 resizableImageWithCapInsets:UIEdgeInsetsMake(0, 0, 0, 0) resizingMode:UIImageResizingModeStretch];

self.imageView1.image = testImage1;

 

//—imageView2的相关内容———————————————————————————–

 

//相框为180 * 384    图片尺寸为60 * 128    相框大小为原始图片的3倍

//读取图片

UIImage *testImage2 = [UIImage imageNamed:@”123456789″];

/***********************************************/

//方法1 resizableImageWithCapInsets:默认是平铺

//方法2 resizableImageWithCapInsets: resizingMode: 方法

//  UIImageResizingModeTile,     平铺

//平铺的概念是保证原图像大小不变,将新图像填充满

//testImage2 = [testImage2 resizableImageWithCapInsets:UIEdgeInsetsMake(0, 0, 0, 0) resizingMode:UIImageResizingModeTile];

 

//将上部的三分之一”保护”,然后进行显示

//这代表新图像中,上部的三分之一和原图像一样,而其余部分的填充不会使用原图像上部的三分之一

// testImage2 = [testImage2 resizableImageWithCapInsets:UIEdgeInsetsMake(42, 0, 0, 0) resizingMode:UIImageResizingModeTile];

 

//将左部的三分之一”保护”,然后进行显示

//这代表新图像中,上部的三分之一和原图像一样,而其余部分的填充不会使用原图像上部的三分之一

// testImage2 = [testImage2 resizableImageWithCapInsets:UIEdgeInsetsMake(0,20, 0, 0) resizingMode:UIImageResizingModeTile];

 

//将四周进行保护后

//在X轴上,由于1被左边的设置保护,3被右边的设置保护,所以中间只能用2来平铺,同理,7和9之间的8

//在Y轴上,由于1被上边的设置保护,7被下边的设置保护,所以中间只能用4来平铺,同理,3和9之间的6

//由于5没有被保护,所以在整个空间中,用5进行平铺来填充剩余的区域

// testImage2 = [testImage2 resizableImageWithCapInsets:UIEdgeInsetsMake(42, 20, 42, 20) resizingMode:UIImageResizingModeTile];

 

/***********************************************/

//resizableImageWithCapInsets: resizingMode: 方法

//  UIImageResizingModeStretch,  拉伸

//  拉伸的概念是直接按比例将图片放大到与相框尺寸相同的图像,

//testImage2 = [testImage2 resizableImageWithCapInsets:UIEdgeInsetsMake(0, 0, 0, 0) resizingMode:UIImageResizingModeStretch];

 

//将上部的三分之一”保护”,然后进行显示

//保证原图像上部的三分之一在Y轴上不被拉伸,其余部分按剩余比例拉伸

//testImage2 = [testImage2 resizableImageWithCapInsets:UIEdgeInsetsMake(42, 0, 0, 0) resizingMode:UIImageResizingModeStretch];

 

//将左部的三分之一”保护”,然后进行显示

//保证原图像左部的三分之一在Y轴上不被拉伸,其余部分按剩余比例拉伸

//testImage2 = [testImage2 resizableImageWithCapInsets:UIEdgeInsetsMake(0, 20, 0, 0) resizingMode:UIImageResizingModeStretch];

 

//将四周进行保护后

//在X轴上,由于1被左边的设置保护,3被右边的设置保护,所以中间只能用2来拉伸,同理,7和9之间的8

//在Y轴上,由于1被上边的设置保护,7被下边的设置保护,所以中间只能用4来拉伸,同理,3和9之间的6

//由于5没有被保护,所以在整个空间中,用5进行拉伸来填充剩余的区域

//testImage2 = [testImage2 resizableImageWithCapInsets:UIEdgeInsetsMake(42, 20, 42, 20) resizingMode:UIImageResizingModeStretch];

 

//将图片添加到相框

self.imageView2.image = testImage2;

 

//—–imageView3的相关内容———————————————————————————-

 

//读取图片

UIImage *testImage3 = [UIImage imageNamed:@”123456789″];

 

/***********************************************/

//resizableImageWithCapInsets默认是平铺

//resizableImageWithCapInsets默认情况对比图

//testImage3 = [testImage3 resizableImageWithCapInsets:UIEdgeInsetsMake(0, 0, 0, 0) resizingMode:UIImageResizingModeTile];

 

/***********************************************/

//resizableImageWithCapInsets: resizingMode: 方法

//  UIImageResizingModeTile,     平铺 (已经测试过了,)

//  UIImageResizingModeStretch,  拉伸

//testImage3 = [testImage3 resizableImageWithCapInsets:UIEdgeInsetsMake(0, 0, 0, 0) resizingMode:UIImageResizingModeStretch];

/***********************************************/

 

//将图片添加到相框

self.imageView3.image = testImage3;

// Do any additional setup after loading the view, typically from a nib.

}

 

@end

 

问啊-定制化IT教育平台,牛人一对一服务,有问必答,开发编程 交头条 官方 站:www.wenaaa.com 下载问啊APP,参与官方悬赏,赚百元现金。

QQ群290551701 聚集很多互联 精英,技术总监,架构师,项目经理!开源技术研究,欢迎业内人士,大牛及新手有志于从事IT行业人员进入!

相关资源:Wikka高速可伸缩性软件v1.3.1-其它代码类资源-CSDN文库

声明:本站部分文章及图片源自用户投稿,如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢!

上一篇 2016年2月6日
下一篇 2016年2月6日

相关推荐