iOS开发中关于UIImage的知识点总结

iOS开发中关于UIImage的知识点总结

UIImage是iOS中层级比较高的一个用来加载和绘制图像的一个类,更底层的类还有 CGImage,以及iOS5.0以后新增加的CIImage。今天我们主要聊一聊UIImage的三个属性: imageOrientation, size, scale,几个初始化的方法: imageNamed,imageWithContentsOfFile,以及绘制Image的几个draw开头的方法。

一、UIImage的size,scale属性

先想一个问题“一个图像的尺寸到底是多大呢?”

第一反应可能就是image.size,恭喜你答错了,正确的答案是图像的实际的尺寸(像 素)等于image.size乘以image.scale。如果做过界面贴图的话你可能经常会需要准备至少两套图,一套1倍图,一套图已@2x命名的二倍 图。这样当我们的程序运行在retina屏幕的时候系统就会自动的去加载@2x的图片,它的size将和一倍图加载进来的size相等,但是scale却 置为2,这点大家可以做个简单的小测试验证一下。然我们再深入一点儿为什么不直接加载到成二倍的尺寸呢,原因很简单因为我们在界面布局中逻辑坐标系中的 (单位是point),而实际的绘制都是在设备坐标系(单位是pixel)进行的,系统会自动帮我们完成从point到pixel之间的转化。其实这个比 例也就刚好和UIScreen中的scale对应,这样整条scale的线就可以串通了。

二、UIImage的几种初始化方法的对比

1、imageNamed:方法

imageNamed:是UIImage的一个类方法,它做的事情比我们看到的要稍微多一些。它的加载流程如下:

a. 系统回去检查系统缓存中是否存在该名字的图像,如果存在则直接返回。

b. 如果系统缓存中不存在该名字的图像,则会先加载到缓存中,在返回该对象。

观察上面的操作我们发现系统会缓存我们使用imageNamed:方法加载的图像时候,系统会自动帮我们缓存。这种机制适合于那种频繁用到界面贴图累的加载,但如果我们需要短时间内频繁的加载一些一次性的图像的话,最好不要使用这种方法。

2、imageWithContentsOfFile:和initWithContentsOfFile:方法

这两个方法跟前一个方法一样都是完成从文件加载图像的功能。但是不会经过系统缓存,直接从文件系统中加载并返回。

顺便提一下,当收到内存警告的时候,系统可能会将UIImage内部的存储图像的内存释放,下一次需要绘制的时候会重新去加载。

3、imageWithCGImage:scale:orientation:方法

该方面使用一个CGImageRef创建UIImage,在创建时还可以指定方法倍数以及旋转方向。当scale设置为1的时候,新创建的图像将和原图像尺寸一摸一样,而orientaion则可以指定新的图像的绘制方向。

三、UIImage的imageOrientation属性

UIImage有一个imageOrientation的属性,主要作用是控制image的绘制方向,共有以下8中方向:

  
  
  
  
  1. typedef NS_ENUM(NSInteger, UIImageOrientation) { 
  2.     UIImageOrientationUp,            // default orientation    
  3.     UIImageOrientationDown,          // 180 deg rotation        
  4.     UIImageOrientationLeft,          // 90 deg CCW      (编程发现官方文档中,left和right图像标反了,此处更正过来) 
  5.     UIImageOrientationRight,         // 90 deg CW    
  6.     UIImageOrientationUpMirrored,    // as above but image mirrored along other axis. horizontal flip   
  7.     UIImageOrientationDownMirrored,  // horizontal flip 
  8.     UIImageOrientationLeftMirrored,  // vertical flip  
  9.     UIImageOrientationRightMirrored, // vertical flip  
  10. }; 

默认的方向是UIImageOrientationUp,这8种方向对应的绘制方如上面所示。我 们在日常使用中经常会碰到把iPhone相册中的照片导入到windows中,发现方向不对的问题就是与这个属性有关,因为导出照片的时候,写exif中 的方向信息时候没有考虑该方向的原因。既然这个属性可以控制image的绘制方向,那我们能不能通过改过这个属性来完成UIImage的旋转和翻转呢?带 着这个问题我们继续往下看。

四、UIImage的几个draw方法

UIImage的几个draw方法是用来绘制图像的利器,为什么这样说呢?因为它们在绘制图 像的时候会考虑当前图像的方向,即根据的imageOrientation绘制出不同的方向。由于图像是绘制在当前context中的,它同时还会考虑到 当前context的transform的变化。利于这两点我们就可以玩转图像的旋转和翻转了。

搜索了一些,目前网上大部分图像旋转都是通过创建CGBitmapContext,然后根据图像方向设置context的transform来实现的,这种方法要求对整个矩阵变化的过程都非常清楚,一个参数设置不多,出来的结果就会有问题。

下面我介绍一种实现起来简单方便的图像旋转方法,这种方法主要就是利用imageWithCGImage:scale:orientation:方法,指定不同的orientation来完成所需要的功能,先举个简单的例子:

假设一副图片显示为 iOS开发中关于UIImage的知识点 - 第1张  | IT江湖,我们要向左旋转90°,那么转过之后应该就会显示为iOS开发中关于UIImage的知识点 - 第2张  | IT江湖,即将原图从orientationUP转到orientationLeft即可。以此类推为不同的方向旋转,只需要注意看R的显示即可,这样整个旋转和翻转的实现过程中完全可以不用考虑Transform那些东西,是不是很简单。

下面是图像旋转和翻转的完整代码:

  
  
  
  
  1. // 
  2. //  UIImage+Rotate_Flip.h 
  3. //  SvImageEdit 
  4. // 
  5. //  Created by  maple on 5/14/13. 
  6. //  Copyright (c) 2013 smileEvday. All rights reserved. 
  7. // 
  8. // 
  9.   
  10. #import <UIKit/UIKit.h> 
  11.   
  12. @interface UIImage (Rotate_Flip) 
  13.   
  14. /* 
  15. * @brief rotate image 90 withClockWise 
  16. */ 
  17. - (UIImage*)rotate90Clockwise; 
  18.   
  19. /* 
  20. * @brief rotate image 90 counterClockwise 
  21. */ 
  22. - (UIImage*)rotate90CounterClockwise; 
  23.   
  24. /* 
  25. * @brief rotate image 180 degree 
  26. */ 
  27. - (UIImage*)rotate180; 
  28.   
  29. /* 
  30. * @brief rotate image to default orientation 
  31. */ 
  32. - (UIImage*)rotateImageToOrientationUp; 
  33.   
  34. /* 
  35. * @brief flip horizontal 
  36. */ 
  37. - (UIImage*)flipHorizontal; 
  38.   
  39. /* 
  40. * @brief flip vertical 
  41. */ 
  42. - (UIImage*)flipVertical; 
  43.   
  44. /* 
  45. * @brief flip horizontal and vertical 
  46. */ 
  47. - (UIImage*)flipAll; 
  48.   
  49.   
  50. @end 
  51.   
  52. UIImage+Rotate_Flip.h 
  
  
  
  
  1. // 
  2. //  UIImage+Rotate_Flip.m 
  3. //  SvImageEdit 
  4. // 
  5. //  Created by  maple on 5/14/13. 
  6. //  Copyright (c) 2013 smileEvday. All rights reserved. 
  7. // 
  8.   
  9. #import "UIImage+Rotate_Flip.h" 
  10.   
  11. @implementation UIImage (Rotate_Flip) 
  12.   
  13. /* 
  14. * @brief rotate image 90 with CounterClockWise 
  15. */ 
  16. - (UIImage*)rotate90CounterClockwise 
  17.     UIImage *image = nil; 
  18.     switch (self.imageOrientation) { 
  19.         case UIImageOrientationUp: 
  20.         { 
  21.             image = [UIImage imageWithCGImage:self.CGImage scale:1 orientation:UIImageOrientationLeft]; 
  22.             break
  23.         } 
  24.         case UIImageOrientationDown: 
  25.         { 
  26.             image = [UIImage imageWithCGImage:self.CGImage scale:1 orientation:UIImageOrientationRight]; 
  27.             break
  28.         } 
  29.         case UIImageOrientationLeft: 
  30.         { 
  31.             image = [UIImage imageWithCGImage:self.CGImage scale:1 orientation:UIImageOrientationDown]; 
  32.             break
  33.         } 
  34.         case UIImageOrientationRight: 
  35.         { 
  36.             image = [UIImage imageWithCGImage:self.CGImage scale:1 orientation:UIImageOrientationUp]; 
  37.             break
  38.         } 
  39.         case UIImageOrientationUpMirrored: 
  40.         { 
  41.             image = [UIImage imageWithCGImage:self.CGImage scale:1 orientation:UIImageOrientationRightMirrored]; 
  42.             break
  43.         } 
  44.         case UIImageOrientationDownMirrored: 
  45.         { 
  46.             image = [UIImage imageWithCGImage:self.CGImage scale:1 orientation:UIImageOrientationLeftMirrored]; 
  47.             break
  48.         } 
  49.         case UIImageOrientationLeftMirrored: 
  50.         { 
  51.             image = [UIImage imageWithCGImage:self.CGImage scale:1 orientation:UIImageOrientationUpMirrored]; 
  52.             break
  53.         } 
  54.         case UIImageOrientationRightMirrored: 
  55.         { 
  56.             image = [UIImage imageWithCGImage:self.CGImage scale:1 orientation:UIImageOrientationDownMirrored]; 
  57.             break
  58.         } 
  59.         default
  60.             break
  61.     } 
  62.      
  63.     return image; 
  64.   
  65. /* 
  66. * @brief rotate image 90 with Clockwise 
  67. */ 
  68. - (UIImage*)rotate90Clockwise 
  69.     UIImage *image = nil; 
  70.     switch (self.imageOrientation) { 
  71.         case UIImageOrientationUp: 
  72.         { 
  73.             image = [UIImage imageWithCGImage:self.CGImage scale:1 orientation:UIImageOrientationRight]; 
  74.             break
  75.         } 
  76.         case UIImageOrientationDown: 
  77.         { 
  78.             image = [UIImage imageWithCGImage:self.CGImage scale:1 orientation:UIImageOrientationLeft]; 
  79.             break
  80.         } 
  81.         case UIImageOrientationLeft: 
  82.         { 
  83.             image = [UIImage imageWithCGImage:self.CGImage scale:1 orientation:UIImageOrientationUp]; 
  84.             break
  85.         } 
  86.         case UIImageOrientationRight: 
  87.         { 
  88.             image = [UIImage imageWithCGImage:self.CGImage scale:1 orientation:UIImageOrientationDown]; 
  89.             break
  90.         } 
  91.         case UIImageOrientationUpMirrored: 
  92.         { 
  93.             image = [UIImage imageWithCGImage:self.CGImage scale:1 orientation:UIImageOrientationLeftMirrored]; 
  94.             break
  95.         } 
  96.         case UIImageOrientationDownMirrored: 
  97.         { 
  98.             image = [UIImage imageWithCGImage:self.CGImage scale:1 orientation:UIImageOrientationRightMirrored]; 
  99.             break
  100.         } 
  101.         case UIImageOrientationLeftMirrored: 
  102.         { 
  103.             image = [UIImage imageWithCGImage:self.CGImage scale:1 orientation:UIImageOrientationDownMirrored]; 
  104.             break
  105.         } 
  106.         case UIImageOrientationRightMirrored: 
  107.         { 
  108.             image = [UIImage imageWithCGImage:self.CGImage scale:1 orientation:UIImageOrientationUpMirrored]; 
  109.             break
  110.         } 
  111.         default
  112.             break
  113.     } 
  114.      
  115.     return image; 
  116.   
  117. /* 
  118. * @brief rotate image 180 degree 
  119. */ 
  120. - (UIImage*)rotate180 
  121.     UIImage *image = nil; 
  122.     switch (self.imageOrientation) { 
  123.         case UIImageOrientationUp: 
  124.         { 
  125.             image = [UIImage imageWithCGImage:self.CGImage scale:1 orientation:UIImageOrientationDown]; 
  126.             break
  127.         } 
  128.         case UIImageOrientationDown: 
  129.         { 
  130.             image = [UIImage imageWithCGImage:self.CGImage scale:1 orientation:UIImageOrientationUp]; 
  131.             break
  132.         } 
  133.         case UIImageOrientationLeft: 
  134.         { 
  135.             image = [UIImage imageWithCGImage:self.CGImage scale:1 orientation:UIImageOrientationRight]; 
  136.             break
  137.         } 
  138.         case UIImageOrientationRight: 
  139.         { 
  140.             image = [UIImage imageWithCGImage:self.CGImage scale:1 orientation:UIImageOrientationLeft]; 
  141.             break
  142.         } 
  143.         case UIImageOrientationUpMirrored: 
  144.         { 
  145.             image = [UIImage imageWithCGImage:self.CGImage scale:1 orientation:UIImageOrientationDownMirrored]; 
  146.             break
  147.         } 
  148.         case UIImageOrientationDownMirrored: 
  149.         { 
  150.             image = [UIImage imageWithCGImage:self.CGImage scale:1 orientation:UIImageOrientationUpMirrored]; 
  151.             break
  152.         } 
  153.         case UIImageOrientationLeftMirrored: 
  154.         { 
  155.             image = [UIImage imageWithCGImage:self.CGImage scale:1 orientation:UIImageOrientationRightMirrored]; 
  156.             break
  157.         } 
  158.         case UIImageOrientationRightMirrored: 
  159.         { 
  160.             image = [UIImage imageWithCGImage:self.CGImage scale:1 orientation:UIImageOrientationLeftMirrored]; 
  161.             break
  162.         } 
  163.         default
  164.             break
  165.     } 
  166.      
  167.     return image; 
  168.   
  169. /* 
  170. * @brief rotate image to default orientation 
  171. */ 
  172. - (UIImage*)rotateImageToOrientationUp 
  173.     CGSize size = CGSizeMake(self.size.width * self.scale, self.size.height * self.scale); 
  174.     UIGraphicsBeginImageContext(size); 
  175.     CGContextRef context = UIGraphicsGetCurrentContext(); 
  176.     CGContextClearRect(context, CGRectMake(0, 0, size.width, size.height)); 
  177.      
  178.     [self drawInRect:CGRectMake(0, 0, size.width, size.height)]; 
  179.      
  180.     UIImage *image = UIGraphicsGetImageFromCurrentImageContext(); 
  181.     UIGraphicsEndImageContext(); 
  182.      
  183.     return image; 
  184.   
  185. /* 
  186. * @brief flip horizontal 
  187. */ 
  188. - (UIImage*)flipHorizontal 
  189.     UIImage *image = nil; 
  190.     switch (self.imageOrientation) { 
  191.         case UIImageOrientationUp: 
  192.         { 
  193.             image = [UIImage imageWithCGImage:self.CGImage scale:1 orientation:UIImageOrientationUpMirrored]; 
  194.             break
  195.         } 
  196.         case UIImageOrientationDown: 
  197.         { 
  198.             image = [UIImage imageWithCGImage:self.CGImage scale:1 orientation:UIImageOrientationDownMirrored]; 
  199.             break
  200.         } 
  201.         case UIImageOrientationLeft: 
  202.         { 
  203.             image = [UIImage imageWithCGImage:self.CGImage scale:1 orientation:UIImageOrientationRightMirrored]; 
  204.             break
  205.         } 
  206.         case UIImageOrientationRight: 
  207.         { 
  208.             image = [UIImage imageWithCGImage:self.CGImage scale:1 orientation:UIImageOrientationLeftMirrored]; 
  209.             break
  210.         } 
  211.         case UIImageOrientationUpMirrored: 
  212.         { 
  213.             image = [UIImage imageWithCGImage:self.CGImage scale:1 orientation:UIImageOrientationUp]; 
  214.             break
  215.         } 
  216.         case UIImageOrientationDownMirrored: 
  217.         { 
  218.             image = [UIImage imageWithCGImage:self.CGImage scale:1 orientation:UIImageOrientationDown]; 
  219.             break
  220.         } 
  221.         case UIImageOrientationLeftMirrored: 
  222.         { 
  223.             image = [UIImage imageWithCGImage:self.CGImage scale:1 orientation:UIImageOrientationRight]; 
  224.             break
  225.         } 
  226.         case UIImageOrientationRightMirrored: 
  227.         { 
  228.             image = [UIImage imageWithCGImage:self.CGImage scale:1 orientation:UIImageOrientationLeft]; 
  229.             break
  230.         } 
  231.         default
  232.             break
  233.     } 
  234.      
  235.     return image; 
  236.   
  237. /* 
  238. * @brief flip vertical 
  239. */ 
  240. - (UIImage*)flipVertical 
  241.     UIImage *image = nil; 
  242.     switch (self.imageOrientation) { 
  243.         case UIImageOrientationUp: 
  244.         { 
  245.             image = [UIImage imageWithCGImage:self.CGImage scale:1 orientation:UIImageOrientationDownMirrored]; 
  246.             break
  247.         } 
  248.         case UIImageOrientationDown: 
  249.         { 
  250.             image = [UIImage imageWithCGImage:self.CGImage scale:1 orientation:UIImageOrientationUpMirrored]; 
  251.             break
  252.         } 
  253.         case UIImageOrientationLeft: 
  254.         { 
  255.             image = [UIImage imageWithCGImage:self.CGImage scale:1 orientation:UIImageOrientationLeftMirrored]; 
  256.             break
  257.         } 
  258.         case UIImageOrientationRight: 
  259.         { 
  260.             image = [UIImage imageWithCGImage:self.CGImage scale:1 orientation:UIImageOrientationRightMirrored]; 
  261.             break
  262.         } 
  263.         case UIImageOrientationUpMirrored: 
  264.         { 
  265.             image = [UIImage imageWithCGImage:self.CGImage scale:1 orientation:UIImageOrientationDown]; 
  266.             break
  267.         } 
  268.         case UIImageOrientationDownMirrored: 
  269.         { 
  270.             image = [UIImage imageWithCGImage:self.CGImage scale:1 orientation:UIImageOrientationUp]; 
  271.             break
  272.         } 
  273.         case UIImageOrientationLeftMirrored: 
  274.         { 
  275.             image = [UIImage imageWithCGImage:self.CGImage scale:1 orientation:UIImageOrientationLeft]; 
  276.             break
  277.         } 
  278.         case UIImageOrientationRightMirrored: 
  279.         { 
  280.             image = [UIImage imageWithCGImage:self.CGImage scale:1 orientation:UIImageOrientationRight]; 
  281.             break
  282.         } 
  283.         default
  284.             break
  285.     } 
  286.      
  287.     return image; 
  288.   
  289. /* 
  290. * @brief flip horizontal and vertical 
  291. */ 
  292. - (UIImage*)flipAll 
  293.     return [self rotate180]; 
  294.   
  295. @end 
  296.   
  297. UIImage+Rotate_Flip.m 

以上只是实现了图像的顺时针90°,逆时针90°,180°旋转,以及水平翻转,数值翻转等。至 于任意角度旋转怎么实现?其实也很简单,留着给大家思考吧。虽然我们可以通过orientation这种方法简单的完成图像旋转,但是如果有时间的话还是 建议大家尽量的看一下那种通过transform来完成旋转的代码,你会彻底搞清楚旋转矩阵是怎么回事儿。当然程序中使用的时候推荐使用我上面提供的这种 方法,因为不涉及真实的旋转操作,速度会快很多。

通过上面的小例子,我们可以看出越高级别的API帮助我们做的事情就越多,越底层的API提 供了更多的灵活性,但同时也带来了很多需要我们处理的东西。再编程的过程中尽量的使用高级别的API,同时最好能搞懂底层的实现机制。这样我们的程序才会 更高效,出了问题才知道去哪里查找。

来自www.cnblogs.com/smileEvday/archive/2013/05/14/UIImage.html

你可能感兴趣的:(uiimage)