Swift - 实现图片(UIImage)的水平翻转(镜像),垂直翻转

Swift - 实现图片(UIImage)的水平翻转(镜像),垂直翻转
有时候我们需要对图片(UIImage)进行垂直翻转(上下翻转),或者水平翻转处理(即镜像处理)。如下图:

原文:Swift - 实现图片(UIImage)的水平翻转(镜像),垂直翻转
原文:Swift - 实现图片(UIImage)的水平翻转(镜像),垂直翻转

通常有两种方式。

方法一,更改图片方向

1,实现原理
UIImage 有个属性叫 imageOrientation,它是一个枚举变量。主要作用是控制image的绘制方向,共有以下8种方向:

enum UIImageOrientation : Int {
    case Up //0:默认方向
    case Down //1:180°旋转
    case Left //2:逆时针旋转90°
    case Right //3:顺时针旋转90°
    case UpMirrored //4:水平翻转
    case DownMirrored //5:水平翻转
    case LeftMirrored //6:垂直翻转
    case RightMirrored //7:垂直翻转
}

那么我们只需要通过改变 UIImage 的 orientation,这样图片显示出来的时候,图片容器会根据新的这个 orientation 属性进行显示。从而实现水平翻转或者垂直翻转。

2,水平翻转(即左右镜像)

//原始图片
let srcImage = UIImage(named: "hangge.png")!
 
//翻转图片的方向
let flipImageOrientation = (srcImage.imageOrientation.rawValue + 4) % 8
//翻转图片
let flipImage =  UIImage(CGImage:srcImage.CGImage!,
    scale:srcImage.scale,
    orientation:UIImageOrientation(rawValue: flipImageOrientation)!
)
 
//图片显示
imageView.image = flipImage

3,垂直翻转

//原始图片
let srcImage = UIImage(named: "hangge.png")!
 
//翻转图片的方向
var flipImageOrientation = (srcImage.imageOrientation.rawValue + 4) % 8
flipImageOrientation += flipImageOrientation%2==0 ? 1 : -1
//翻转图片
let flipImage =  UIImage(CGImage:srcImage.CGImage!,
    scale:srcImage.scale,
    orientation:UIImageOrientation(rawValue: flipImageOrientation)!
)
 
//图片显示
imageView.image = flipImage

方法二,通过Quartz重绘图片,改变原始图片数据

1,实现原理
方法1是通过改变 UIImage 的 orientation 实现翻转的,也就是说它只是改变了一个标记而已。
它内部的图片数据其实还是原始的数据,如果翻转图片不是用来显示,而是需要用于图像识别、图像处理等操作那上面那个方法就不适合了。
本方法是将 UIImage 的图片原始数据数组进行重排,从而实现翻转。其实现的关键点是在Core Graphics(Quartz)层面上重绘图片。

2,水平翻转(即左右镜像)
由于Core Graphics(Quartz) 与 UIKit 的y轴坐标系是相反的,先绕原点旋转180度,再平移一下就好了

//原始图片
let srcImage = UIImage(named: "hangge.png")!
 
//Quartz重绘图片
let rect =  CGRectMake(0, 0, srcImage.size.width , srcImage.size.height);//创建矩形框
//根据size大小创建一个基于位图的图形上下文
UIGraphicsBeginImageContextWithOptions(rect.size, false, 2)
let currentContext =  UIGraphicsGetCurrentContext();//获取当前quartz 2d绘图环境
CGContextClipToRect(currentContext, rect);//设置当前绘图环境到矩形框
CGContextRotateCTM(currentContext, CGFloat(M_PI)); //旋转180度
//平移, 这里是平移坐标系,跟平移图形是一个道理
CGContextTranslateCTM(currentContext, -rect.size.width, -rect.size.height);
CGContextDrawImage(currentContext, rect, srcImage.CGImage);//绘图
 
//翻转图片
let drawImage =  UIGraphicsGetImageFromCurrentImageContext();//获得图片
let flipImage =  UIImage(CGImage:drawImage.CGImage!,
    scale:srcImage.scale,
    orientation:srcImage.imageOrientation  //图片方向不用改
)
 
//图片显示
imageView.image = flipImage

3,垂直翻转
垂直翻转更简单了。由于 Core Graphics(Quartz) 与 UIKit 的y轴坐标系是相反的,UIKit是y轴向下,Quartz是y轴向上。直接绘制就是垂直翻转的。

//原始图片
let srcImage = UIImage(named: "hangge.png")!
 
//Quartz重绘图片
let rect =  CGRectMake(0, 0, srcImage.size.width , srcImage.size.height);//创建矩形框
//根据size大小创建一个基于位图的图形上下文
UIGraphicsBeginImageContextWithOptions(rect.size, false, 2)
let currentContext =  UIGraphicsGetCurrentContext();//获取当前quartz 2d绘图环境
CGContextClipToRect(currentContext, rect);//设置当前绘图环境到矩形框
CGContextDrawImage(currentContext, rect, srcImage.CGImage);//绘图
 
//翻转图片
let drawImage =  UIGraphicsGetImageFromCurrentImageContext();//获得图片
let flipImage =  UIImage(CGImage:drawImage.CGImage!,
    scale:srcImage.scale,
    orientation:srcImage.imageOrientation  //图片方向不用改
)
 
//图片显示
imageView.image = flipImage

注:如何防止由于图片重绘造成显示模糊
由于使用视网膜屏,我的原始图片是 hangge@2x.png。如果使用第二方法,即通过重绘来实现图片翻转并显示出来。那么在创建图形上下文的时候就需要设置好放大倍数。而不能简单地直接 UIGraphicsBeginImageContext(rect.size) 来创建。
1
2
//根据size大小创建一个基于位图的图形上下文
UIGraphicsBeginImageContextWithOptions(rect.size, false, 2)

原文出自:www.hangge.com 转载请保留原文链接:http://www.hangge.com/blog/cache/detail_974.html

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 214,377评论 6 496
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,390评论 3 389
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 159,967评论 0 349
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,344评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,441评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,492评论 1 292
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,497评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,274评论 0 269
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,732评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,008评论 2 328
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,184评论 1 342
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,837评论 4 337
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,520评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,156评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,407评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,056评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,074评论 2 352

推荐阅读更多精彩内容