iOS Quartz筆記

躍然發表於2015-12-03

Quartz 2D是一個二維繪圖引擎，同時支援iOS和Mac OS X系統（跨平臺，純 C 語言的）。包含在 Core Graphics 框架中。
Quartz 2D能完成的工作
繪製圖形 : 線條\三角形\矩形\圓\弧等
繪製文字
繪製\生成圖片(影像)
讀取\生成PDF
截圖\裁剪圖片
自定義UI控制元件
Quartz2D 是蘋果官方的二維繪圖引擎，同時支援 iOS 和 Mac OS X 系統。
Cocos2D（Cocos2D-x、Cocos2D-iPhone、Cocos2D-HTML5等）, Cocos2D 是一個第三方開源的2D遊戲框架。做2D 遊戲的還有 Sprite Kit。一般3D 遊戲用 unity3D。

一、drawRect

1> 說明 - (void)drawRect:(CGRect)rect 什麼時候呼叫、呼叫次數等
- 當 view 第一次被顯示的時候呼叫(呼叫一次)
- 或者是重繪事件被觸發的時候
- 不要手動去呼叫這個方法
- 手動呼叫重繪方法 setNeedsDisplay 或者 setNeedsDisplayInRect:

2> 說明為什麼要在 - (void)drawRect:(CGRect)rect 方法中進行繪圖
- 只有在這個方法中才能獲取當前 View 的繪圖上下文

二、簡單繪製

案例:
1> 繪製一根線段

參考程式碼:

 void test1()
 {
     // 1. 獲取當前的圖形上下文
     CGContextRef ctx = UIGraphicsGetCurrentContext();

     // 2. 在上下文中繪製圖形（拼接路徑）
     // 2.1 設定一個起點
     CGContextMoveToPoint(ctx, 20, 20);
     // 2.2 新增一條直線到(100, 100)這個點
     CGContextAddLineToPoint(ctx, 100, 20);


     // 3. 把上下文渲染顯示到 HMView01上
    // StrokePath 表示把路徑以空心的形式渲染出來。
     CGContextStrokePath(ctx);
 }

2> 繪製一箇中文”二”, 兩根線段


 參考程式碼:

 void test2()
 {
     // 1. 獲取當前的圖形上下文
     CGContextRef ctx = UIGraphicsGetCurrentContext();

     // 2. 在上下文中繪製圖形（拼接路徑）
     // 2.1 設定一個起點
     CGContextMoveToPoint(ctx, 20, 20);
     // 2.2 新增一條直線到(100, 100)這個點
     CGContextAddLineToPoint(ctx, 100, 20);


     // 2.3 再重新設定一個起點
     CGContextMoveToPoint(ctx, 5, 50);
     // 2.4 再新增一條線
     CGContextAddLineToPoint(ctx, 115, 50);


     // 3. 把上下文渲染顯示到 HMView01上
    // StrokePath 表示把路徑以空心的形式渲染出來。
     CGContextStrokePath(ctx);
 }

3> 繪製一個”三角形”

參考程式碼:

 void test3()
 {
     // 1. 獲取當前的圖形上下文
     CGContextRef ctx = UIGraphicsGetCurrentContext();

     // 2. 在上下文中繪製圖形（拼接路徑）
     // 2.1 設定一個起點
     CGContextMoveToPoint(ctx, 20, 20);
     // 2.2 新增一條直線到(100, 100)這個點
     CGContextAddLineToPoint(ctx, 100, 100);

     // 2.3 再新增一條線
     CGContextAddLineToPoint(ctx, 120, 30);

     // 2.4 再新增一條線段
     //CGContextAddLineToPoint(ctx, 20, 20);
     // 另外一種做法: 直接關閉路徑（連線最後一個點和起點）
     CGContextClosePath(ctx);


     // 3. 把上下文渲染顯示到 HMView01上
     // StrokePath 表示把路徑以空心的形式渲染出來。
     CGContextStrokePath(ctx);
 }
 ```

4> 繪製一個”矩形”。
* 思路1: 可以畫4根線來表示一個矩形。

 參考程式碼:
 // 繪製四邊形, 這種畫法, 只能話"正"的圖形, "斜"的需要使用"矩陣"的方式來進行旋轉
 void test4()
 {
     // 繪製一個"四邊形"
     // 1. 獲取當前圖形上下文
     CGContextRef ctx = UIGraphicsGetCurrentContext();

     // 2. 開始繪製路徑
     CGContextAddRect(ctx, CGRectMake(20, 20, 100, 120));

     // 3. 渲染
     CGContextStrokePath(ctx);
 }

5> 繪製一個實心”矩形”

參考程式碼:
    // 繪製"實心"矩形, 只要把 Stroke 變成 Fill 即可
    void test5()
    {
        // 繪製一個"四邊形"
        // 1. 獲取當前圖形上下文
        CGContextRef ctx = UIGraphicsGetCurrentContext();

        // 2. 開始繪製路徑
        CGContextAddRect(ctx, CGRectMake(20, 20, 100, 120));

        // 3. 渲染
        CGContextFillPath(ctx);

    }

6.1> 設定圖形的顏色

參考程式碼:

// 設定圖形的顏色
void test6()
{
     // 繪製一個"四邊形"
     // 1. 獲取當前圖形上下文
     CGContextRef ctx = UIGraphicsGetCurrentContext();

     // 2. 開始繪製路徑
     CGContextAddRect(ctx, CGRectMake(20, 20, 100, 120));



     //============ C 語言的方式設定顏色 =================

     CGContextSetRGBFillColor(ctx, 200/255.0, 100/255.0, 50/255.0, 1.0);
     //CGContextSetRGBStrokeColor(<#CGContextRef context#>, <#CGFloat red#>, <#CGFloat green#>, <#CGFloat blue#>, <#CGFloat alpha#>)

     //============ C 語言的方式設定顏色 =================



     //============ OC 的方式設定顏色 =================
     // 設定空心圖形的線條顏色
     // [[UIColor redColor] setStroke];

     // 設定實心圖形的填充顏色
     // [[UIColor redColor] setFill];

     // 統一設定"空心圖形" 和 "實心圖形"的顏色
     //[[UIColor redColor] set];
     //============ OC 的方式設定顏色 =================



     // 3. 渲染
     CGContextFillPath(ctx);
}

6.2> 設定不同線段, 不同顏色


參考程式碼: 

void test8()
{
    //畫兩根線, 一根紅色, 一根藍色
    // 1. 獲取上下文物件
    CGContextRef ctx = UIGraphicsGetCurrentContext();


    // 2. 繪製圖形
    // 2.1 設定起點
    CGContextMoveToPoint(ctx, 50, 50);
    // 2.2 新增一根線
    CGContextAddLineToPoint(ctx, 50, 150);

    // 2.3 設定線段顏色
    [[UIColor redColor] set];
    // 2.4 設定線寬
    CGContextSetLineWidth(ctx, 10);
    // 渲染一次
    CGContextStrokePath(ctx);

    // 再移動到一個新的起點
    CGContextMoveToPoint(ctx, 100, 50);
    // 再新增一根線
    CGContextAddLineToPoint(ctx, 100, 150);
    // 設定線的顏色
    [[UIColor blueColor] set];


    // 3. 渲染"上下文物件"到 view 上
    CGContextStrokePath(ctx);
}

7> 設定線段寬度（也可以使用這種方式繪製”實心矩形”）

 參考程式碼:

// 設定線段寬度
void test7()
{
    // 繪製一個"四邊形"
    // 1. 獲取當前圖形上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();

    // 2. 開始繪製路徑
    CGContextAddRect(ctx, CGRectMake(20, 20, 100, 120));

    // 設定空心圖形的線條顏色
    // [[UIColor redColor] setStroke];

    // 設定實心圖形的填充顏色
    // [[UIColor redColor] setFill];

    // 統一設定"空心圖形" 和 "實心圖形"的顏色
    [[UIColor redColor] set];

    // 設定線段寬度
    CGContextSetLineWidth(ctx, 20);

    // 3. 渲染
    CGContextStrokePath(ctx);
}

解釋:

1> 拼接路徑

參考程式碼:

 // 2. 在上下文中繪製圖形（拼接路徑）
 // 2.1 設定一個起點
 CGContextMoveToPoint(ctx, 20, 20);
 // 2.2 新增一條直線到(100, 100)這個點
 CGContextAddLineToPoint(ctx, 100, 100);

 // 2.3 再新增一條線
 CGContextAddLineToPoint(ctx, 120, 30);

2> 設定狀態

 參考程式碼:

 // 統一設定"空心圖形" 和 "實心圖形"的顏色
 [[UIColor redColor] set];

 // 設定線段寬度
 CGContextSetLineWidth(ctx, 20);

8> 設定線段”頭尾部”的樣式

 參考程式碼:

 void test9()
 {
     // 1. 獲取上下文物件
     CGContextRef ctx = UIGraphicsGetCurrentContext();

     // 2. 繪製路徑
     // 2.1 移動到起點
     CGContextMoveToPoint(ctx, 20, 20);

     // 2.2 新增一條線段
     CGContextAddLineToPoint(ctx, 100, 100);

     // 2.3 設定顏色
     [[UIColor redColor] set];

     // 2.4 設定線段寬度
     CGContextSetLineWidth(ctx, 15);

     // 2.5 設定線段頭尾部樣式

 //enum CGLineCap {
 //kCGLineCapButt, 預設值
 //kCGLineCapRound, 圓角
 //kCGLineCapSquare 方角
 //};

    CGContextSetLineCap(ctx, kCGLineCapSquare);

    // 3. 渲染
    CGContextStrokePath(ctx);
}

9> 設定轉折點樣式

參考程式碼:

 void test10()
 {
     // 1. 獲取上下文物件
     CGContextRef ctx = UIGraphicsGetCurrentContext();

     // 2. 繪製路徑
     // 2.1 移動到起點
     CGContextMoveToPoint(ctx, 20, 20);

     // 2.2 新增一條線段
     CGContextAddLineToPoint(ctx, 100, 100);
     // 2.3 再新增一條線段
     CGContextAddLineToPoint(ctx, 150, 50);

     // 2.3 設定顏色
     [[UIColor redColor] set];

     // 2.4 設定線段寬度
     CGContextSetLineWidth(ctx, 15);

     // 2.5 設定線段頭尾部樣式
     CGContextSetLineCap(ctx, kCGLineCapRound);
     // 2.6 設定轉折點樣式
     CGContextSetLineJoin(ctx, kCGLineJoinBevel);

     // 3. 渲染
     CGContextStrokePath(ctx);
 }

三、橢圓\圓

1> 橢圓\圓

 參考程式碼: 思路, 圓其實就是一個在在矩形中的圖形。
 // 繪製圓和橢圓
 void test()
 {
     // 1. 獲取上下文
     CGContextRef ctx = UIGraphicsGetCurrentContext();

     // 2. 繪製圖形
     // 橢圓
     CGContextAddEllipseInRect(ctx, CGRectMake(10, 20, 150, 100));
     // 圓
     CGContextAddEllipseInRect(ctx, CGRectMake(30, 50, 100, 100));

     // 3. 渲染
     CGContextStrokePath(ctx);
 }

2> 繪製圓環:

思路1: 在畫圓的時候, 設定線寬即可。CGContextSetLineWidth(ctx, 20);
思路2: 畫兩個巢狀的圓

3> 畫不同的圓弧

畫上面半個圓弧
畫下面半個圓弧
畫右下角的1/4圓弧
左側半圓弧
右側半圓弧
左下角的1/4的圓弧
畫一個圓

參考程式碼:
 // 畫不同的圓弧
 void test2()
 {
     // 1. 獲取上下文
     CGContextRef ctx = UIGraphicsGetCurrentContext();

     // 2. 繪製圖形
     // 畫圓弧
     // ios 系統中座標系剛好是反的所以指定了1（順時針）反而效果是"逆時針"。
     //CGContextAddArc(ctx, 100, 100, 50, 0, M_PI, 0);
     //CGContextAddArc(ctx, 100, 100, 50, 0, M_PI * 0.5, 0);
     //CGContextAddArc(ctx, 100, 100, 50, -M_PI_2, M_PI_2, 0);
     // 繪製左下角的1/4的圓弧
     //CGContextAddArc(ctx, 100, 100, 50, M_PI, M_PI_2, 1);
     // 畫一個圓
     //CGContextAddArc(ctx, 100, 100, 50, 0, M_PI * 2, 1);

     // 3. 渲染
     CGContextStrokePath(ctx);
 }

4> 演示

 參考程式碼:


 - (void)drawRect:(CGRect)rect {

     // 1. 獲取上下文
     CGContextRef ctx = UIGraphicsGetCurrentContext();

     // 2. 繪製圖形
     // 繪製左下角的1/4的圓弧
     CGContextAddArc(ctx, 100, 100, 50, M_PI, M_PI_2, 1);

     // 3. 渲染
     CGContextFillPath(ctx);
 }

5> 畫一個左下角1/4 的實心圓

參考程式碼:

 - (void)drawRect:(CGRect)rect {

     // 1. 獲取上下文
     CGContextRef ctx = UIGraphicsGetCurrentContext();

     // 2. 繪製圖形
     // 繪製左下角的1/4的圓弧
     CGContextAddArc(ctx, 100, 100, 50, M_PI, M_PI_2, 1);
     // 新增一根線
     CGContextAddLineToPoint(ctx, 100, 100);
     // 關閉路徑
     CGContextClosePath(ctx);

     // 3. 渲染
     CGContextFillPath(ctx);
 }

四、文字繪製(通過OC 來繪製圖形)

1> 繪製一段文字(思路: 直接使用 OC 的方法, 無需手動獲取上下文物件)

 參考程式碼:

 - (void)drawRect:(CGRect)rect {
     NSString *str = @"哈哈, 黑馬程式設計師 iOS學院。";

     NSDictionary *attrs = @{
         NSForegroundColorAttributeName : [UIColor redColor],
         NSFontAttributeName : [UIFont systemFontOfSize:20]
     };

     [str drawAtPoint:CGPointMake(30, 50) withAttributes:attrs];
 }

2> 繪製一段文字到一個指定的區域
* 思路: 呼叫字串的 drawInRect: 方法.

參考程式碼:

 - (void)drawRect:(CGRect)rect {


     // 1. 繪製文字
     NSString *str = @"哈哈, 黑馬程式設計師 iOS。";

     NSDictionary *attrs = @{
     NSForegroundColorAttributeName : [UIColor redColor],
     NSFontAttributeName : [UIFont systemFontOfSize:20]
     };

     [str drawInRect:CGRectMake(20, 20, 50, 250) withAttributes:attrs];



     // 1. 獲取上下文
     CGContextRef ctx = UIGraphicsGetCurrentContext();
     // 2. 把矩形畫出來
     CGContextAddRect(ctx,CGRectMake(20, 20, 50, 250));

     // 3. 渲染
     CGContextStrokePath(ctx);
 }

五、圖片繪製(通過OC 來繪製圖形)

1> 繪製一張圖片到 UIView 上。
思路: 通過 OC 的方法來實現。

參考程式碼:
 - (void)drawRect:(CGRect)rect {
     // 1. 獲取圖片
     UIImage *img = [UIImage imageNamed:@"dst2"];
     // 2. 把圖片畫到當前的 view中
     [img drawAtPoint:CGPointMake(0, 0)];
 }

2> 在指定的矩形中繪製圖片（會自動拉伸）

參考程式碼:
 - (void)drawRect:(CGRect)rect {

     // 1. 獲取圖片
     UIImage *img = [UIImage imageNamed:@"dst2"];
     // 2. 把圖片畫到當前的 view中
     [img drawInRect:CGRectMake(0, 0, 150, 150)];

 }

3> 畫格子花紋效果(（pattern）), 思路: 呼叫drawAsPatternInRect:方法

 參考程式碼:
 - (void)drawRect:(CGRect)rect {
     // 1. 獲取圖片
     UIImage *img = [UIImage imageNamed:@"abc"];

     // 2. 把圖片畫到當前的 view中
     [img drawAsPatternInRect:self.bounds];

     // 3. 在右下角顯示文字
     NSString *str = @"@傳智播客 ios 學院";
     NSDictionary *attrs = @{
     NSForegroundColorAttributeName : [UIColor redColor],
     NSFontAttributeName : [UIFont systemFontOfSize:20]
     };

     [ str drawInRect:CGRectMake(0, 100, 200, 30) withAttributes:attrs];
 }

六、在指定的區域畫一張圖片, 然後再在指定的區域畫一些文字（水印）

 參考程式碼:

 - (void)drawRect:(CGRect)rect {
 // Drawing code

 // 在指定的區域內畫一張圖片
 UIImage *img = [UIImage imageNamed:@"dst2"];
 [img drawInRect:self.bounds];


 // 在指定的區域畫一些文字
 NSString *str = @"傳智播客 iOS 學院。";
 [str drawInRect:CGRectMake(10, 400, 200, 30) withAttributes:nil];

 }

2.練習（畫人）

1> 設定控制器 view 為自定義 view
2> 先畫黃色背景圖片
   * 上半個圓弧
   * 左側的豎線
   * 下半個圓弧
   * 關閉路徑
3> 畫嘴巴
4> 畫眼鏡的綁帶
5> 畫左側眼鏡框
6> 左側眼鏡框中的白色圈

七、圖形上下文棧

1> 畫兩根線, 設定線的顏色、寬度、頭尾的樣式 LineCap

2> 要求, 第二根線不具有第一根線的樣式。

3> 解決, 在畫第一根線之前先儲存”繪圖上下文棧”, 在畫第二根線的時候再恢復繪圖上下文棧

CGContextSaveGState(ctx);// 儲存ctx這個繪圖上下文物件

CGContextRestoreGState(ctx); // 恢復 ctx這個圖形上下文

八、矩陣操作

1> 整體旋轉、整體縮放
* 思路: 隨便在一個 UIView 上畫一些圖形（線段、矩形、圓等）

參考程式碼:

 - (void)drawRect:(CGRect)rect {
     // Drawing code
     // 1. 獲取上下文
     CGContextRef ctx = UIGraphicsGetCurrentContext();

     //======================= 矩陣操作 ============================
     // 1.1 旋轉
     CGContextRotateCTM(ctx, M_PI_4 * 0.5);
     // 1.2 縮放
     CGContextScaleCTM(ctx, 0.5, 0.5);
     //======================= 矩陣操作 ============================

     // 2. 繪製一些圖形
     CGContextMoveToPoint(ctx, 10, 10);
     CGContextAddLineToPoint(ctx, 100, 100);
     CGContextAddEllipseInRect(ctx, CGRectMake(130, 150, 100, 100));
     CGContextAddRect(ctx, CGRectMake(70, 90, 100, 80));

     // 3. 渲染
     CGContextStrokePath(ctx);

 }

2> 最後畫的那個圖形不要矩陣操作
* 思路: 在繪製任何圖形前儲存上下文, 在繪製最後一個圖形前恢復上下文

 參考程式碼:
 - (void)drawRect:(CGRect)rect {
     // Drawing code
     // 1. 獲取上下文
     CGContextRef ctx = UIGraphicsGetCurrentContext();

     // 儲存上下文
     CGContextSaveGState(ctx);

     //======================= 矩陣操作 ============================
     // 1.1 旋轉
     CGContextRotateCTM(ctx, M_PI_4 * 0.5);
     // 1.2 縮放
     CGContextScaleCTM(ctx, 0.5, 0.5);
     //======================= 矩陣操作 ============================

     // 2. 繪製一些圖形
     CGContextMoveToPoint(ctx, 10, 10);
     CGContextAddLineToPoint(ctx, 100, 100);
     CGContextAddEllipseInRect(ctx, CGRectMake(130, 150, 100, 100));

     // 恢復上下文
     CGContextRestoreGState(ctx);

     CGContextAddRect(ctx, CGRectMake(70, 90, 100, 80));

     // 3. 渲染
     CGContextStrokePath(ctx);

 }

八、圖片裁剪

1> 把一個圖片裁剪成圓形

思路:
在 UIView 上繪製一個25 * 25的圓

裁剪上下文

載入圖片, 把圖片繪製到 “上下文” 上, 就自動實現了裁剪了

參考程式碼:

 - (void)drawRect:(CGRect)rect {
     // Drawing code
     CGContextRef ctx = UIGraphicsGetCurrentContext();

     // 1. 畫圓，這裡最好使用 Ellipse 來繪製圓（畫圓和畫圖片都從0,0點開始）。
     CGContextAddArc(ctx, 100, 100, 90, 0, M_PI * 2, 1);

     // 2. 裁剪上下文, 注意裁剪完畢就只能在裁剪好的區域內畫東西了, 超出的地方無法繪製圖形。
     CGContextClip(ctx);

     // 3. 把圖片繪製上去
     UIImage *img = [UIImage imageNamed:@"dst2"];
     [img drawAtPoint:CGPointMake(0, 0)];
 }

重繪案例: 調整 slider 滑動條, 同時改變圓的大小

1> 思路: 讓繪製圓時, 半徑隨著 slider 的變化而變化

setNeedsDisplay 方法會把之前的內容都清除掉, 然後再重繪。

setNeedsDisplayInRect:<#(CGRect)#>區域性重新整理

參考程式碼:

 - (void)setRadius:(CGFloat)radius
 {
     _radius = radius;
     [self setNeedsDisplay];
 }


 - (void)drawRect:(CGRect)rect {
     // Drawing code
     CGContextRef ctx = UIGraphicsGetCurrentContext();

     CGContextAddArc(ctx, 100, 100, self.radius, 0, M_PI * 2, 1);

     CGContextFillPath(ctx);

 }

 ```

2> “下雪”案例
思路:

1> 首先繪製一個雪花圖片

2> 新增一個屬性用來設定雪花的 y 值, 在 drawRect方法中每次修改 y 值

3> 在 awakeFromNib 方法中, 啟動定時器, 定時呼叫 setNeedsDisplay方法

參考程式碼:

 - (void)awakeFromNib
 {
     NSTimer *timer = [NSTimer scheduledTimerWithTimeInterval:0.2 target:self selector:@selector(setNeedsDisplay) userInfo:nil repeats:YES];

 // 預設一秒鐘60次
 CADisplayLink *disLink = [CADisplayLink displayLinkWithTarget:self selector:@selector(setNeedsDisplay)];
 [disLink addToRunLoop:[NSRunLoop mainRunLoop] forMode:NSDefaultRunLoopMode];


 }

- (void)setRadius:(CGFloat)radius
 {
     _radius = radius;
     [self setNeedsDisplay];
 }
 - (void)drawRect:(CGRect)rect {

     self.snowY += 10;

     if (self.snowY >= self.frame.size.height) {
     self.snowY = -100;
     }

     // Drawing code
     UIImage *imgSnow = [UIImage imageNamed:@"snow"];
     [imgSnow drawAtPoint:CGPointMake(50, self.snowY)];

 }

3.模仿UIImageView
思路:

1> 演示 UIImageView 的基本用法

2> 自定義一個類繼承自 UIView, 新增一個 image 屬性

 參考程式碼:
 // 1. 控制器
 - (void)viewDidLoad {
 [super viewDidLoad];
 // Do any additional setup after loading the view, typically from a nib.
 MyImageView *imgView =[[MyImageView alloc] init];
 imgView.image = [UIImage imageNamed:@"dst2"];
 imgView.frame = CGRectMake(30, 30, 100, 100);
 [self.view addSubview:imgView];

 self.myImgView = imgView;

 }

 - (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
 {
 self.myImgView.image = [UIImage imageNamed:@"snow"];
 }



 // 2. 自定義 view
 - (void)setImage:(UIImage *)image
 {
 _image = image;
 [self setNeedsDisplay];
 }

 // Only override drawRect: if you perform custom drawing.
 // An empty implementation adversely affects performance during animation.
 - (void)drawRect:(CGRect)rect {
 // Drawing code
 [self.image drawAtPoint:CGPointZero];
 }

作業: 讓 UITextView 具有 PlaceHolder 功能。

圖片水印 (產生一張真的圖片, 實現圖片的合成)

在一張圖片上, 再繪製一張圖片

思路:

0> 讀取要打水印的圖片

1> 手動建立一個機遇點陣圖的”上下文”, 根據原圖設定上下文的大小(開啟一個新的點陣圖上下文)
UIGraphicsBeginImageContextWithOptions(imgOriginal.size, NO, 0.0);

2> 把原圖畫到整個上下文中

3> 載入水印圖片, 把水印圖片畫到指定的矩形中

4> 從上下文種獲取繪製到的圖片
UIGraphicsGetImageFromCurrentImageContext();

5> 把圖片設定給圖片框

6> 儲存圖片

獲取圖片對應的二進位制資料
NSData *imgData = UIImagePNGRepresentation(finalImg);
儲存二進位制資料
[imgData writeToFile:fileName atomically:YES];

參考程式碼:

 // 1.
 UIImage *imgOriginal = [UIImage imageNamed:@"dst2"];


 // 2.
 //使用UIGraphicsBeginImageContextWithOptions方法更清晰
 // 這行程式碼執行完畢後就會建立一個新的 UIImage 物件（空的）
 UIGraphicsBeginImageContextWithOptions( imgOriginal.size, NO, 0.0);


 // 畫原圖
 [imgOriginal drawInRect:CGRectMake(0, 0, imgOriginal.size.width, imgOriginal.size.height)];
 // 畫水印圖片
 UIImage *watermarkImg = [UIImage imageNamed:@"logo"];
 CGFloat w = watermarkImg.size.width * 1.0;
 CGFloat h = watermarkImg.size.height * 1.0;
 CGFloat x = imgOriginal.size.width - w - 50;
 CGFloat y = imgOriginal.size.height - h - 50;
 [watermarkImg drawInRect:CGRectMake(x, y, w, h)];


 // 從上下文種獲取繪製到的圖片
 UIImage *finalImg = UIGraphicsGetImageFromCurrentImageContext();

 // 結束一個上下文
 UIGraphicsEndImageContext();

 self.imgView.image = finalImg;

 // 把圖片儲存
 // 1. 獲取二進位制資料
 //UIImageJPEGRepresentation(<#UIImage *image#>, 0~1的取值。1表示質量最好)
 NSData *imgData = UIImagePNGRepresentation(finalImg);

 // 2. 儲存
 NSString *docPath = [NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask, YES) lastObject];
 NSLog(@"%@", docPath);
 NSString *fileName = [docPath stringByAppendingPathComponent:@"aa.png"];
 [imgData writeToFile:fileName atomically:YES];