1. 設計思路
要合并兩張圖片浇垦，用Quartz2D的知識组橄，則要先要搞一個空的大圖片，然后再把兩張小圖片畫到那張大圖片上面
圖片.png
2. 實現（由一般實現再過度到隊列組）
2.1 方法一（先下載第1張圖片叶撒，然后下載第2張圖片紊搪，最后合并圖片）弊病：由于圖片比較耗時田柔，一張一張的下載圖片更耗時俐巴。
2.1.1 首先創(chuàng)建一個project，然后拖一個imageview
圖片.png
2.1.2 連線監(jiān)聽imageview
圖片.png
2.1.3 代碼
// htingViewController.h
#import <UIKit/UIKit.h>
@interface htingViewController : UIViewController
@end
//
// htingViewController.m
#import "htingViewController.h"
@interface htingViewController ()
@property (weak, nonatomic) IBOutlet UIImageView *imageView;
@property (nonatomic, strong) UIImage *image1;
@property (nonatomic, strong) UIImage *image2;
@end
@implementation htingViewController
- (void)viewDidLoad
{
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
}
- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
// 異步下載
dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0), ^{
// 1.下載第1張
NSURL *url1 = [NSURL URLWithString:@"http://g.hiphotos.baidu.com/image/pic/item/f2deb48f8c5494ee460de6182ff5e0fe99257e80.jpg"];
NSData *data1 = [NSData dataWithContentsOfURL:url1];
UIImage *image1 = [UIImage imageWithData:data1];
// 2.下載第2張
NSURL *url2 = [NSURL URLWithString:@"http://su.bdimg.com/static/superplus/img/logo_white_ee663702.png"];
NSData *data2 = [NSData dataWithContentsOfURL:url2];
UIImage *image2 = [UIImage imageWithData:data2];
// 3.合并圖片
// 開啟一個位圖上下文
UIGraphicsBeginImageContextWithOptions(image1.size, NO, 0.0);
// 繪制第1張圖片
CGFloat image1W = image1.size.width;
CGFloat image1H = image1.size.height;
[image1 drawInRect:CGRectMake(0, 0, image1W, image1H)];
// 繪制第2張圖片
CGFloat image2W = image2.size.width * 0.5;
CGFloat image2H = image2.size.height * 0.5;
CGFloat image2Y = image1H - image2H;
[image2 drawInRect:CGRectMake(0, image2Y, image2W, image2H)];
// 得到上下文中的圖片
UIImage *fullImage = UIGraphicsGetImageFromCurrentImageContext();
// 結束上下文
UIGraphicsEndImageContext();
// 4.回到主線程顯示圖片
dispatch_async(dispatch_get_main_queue(), ^{
self.imageView.image = fullImage;
});
});
}
@end
2.1.4 運行結果
圖片.png
2.2. 方法二（由于上面的設計中下載圖片比較耗時硬爆，可以同事開啟兩個線程同事下載兩張圖片 ）弊残蓝妗：要搞兩個額外的屬性
#import <UIKit/UIKit.h>
@interface htingViewController : UIViewController
@end
//
// htingViewController.m
#import "htingViewController.h"
@interface htingViewController ()
@property (weak, nonatomic) IBOutlet UIImageView *imageView;
@property (nonatomic, strong) UIImage *image1;
@property (nonatomic, strong) UIImage *image2;
@end
@implementation htingViewController
- (void)viewDidLoad
{
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
}
- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
// 異步下載
dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0), ^{
// 1.下載第1張
NSURL *url1 = [NSURL URLWithString:@"http://g.hiphotos.baidu.com/image/pic/item/f2deb48f8c5494ee460de6182ff5e0fe99257e80.jpg"];
NSData *data1 = [NSData dataWithContentsOfURL:url1];
self.image1 = [UIImage imageWithData:data1];
[self bindImages];
});
dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0), ^{
// 2.下載第2張
NSURL *url2 = [NSURL URLWithString:@"http://su.bdimg.com/static/superplus/img/logo_white_ee663702.png"];
NSData *data2 = [NSData dataWithContentsOfURL:url2];
self.image2 = [UIImage imageWithData:data2];
[self bindImages];
});
}
- (void)bindImages
{
if (self.image1 == nil || self.image2 == nil) return;
// 3.合并圖片
// 開啟一個位圖上下文 （相當于創(chuàng)建了一個空的圖片）
// UIGraphicsBeginImageContextWithOptions(<#CGSize size#>（新的圖片有多大）, <#BOOL opaque#>（NO代表透明，YES代表不透明）, <#CGFloat scale#> （縮放比例）)
UIGraphicsBeginImageContextWithOptions(self.image1.size, NO, 0.0);
// 繪制第1張圖片 （繪制到上面創(chuàng)建的那個位圖上下文上面 也就是那張空的圖片上面）
CGFloat image1W = self.image1.size.width;
CGFloat image1H = self.image1.size.height;
[self.image1 drawInRect:CGRectMake(0, 0, image1W, image1H)];
// 繪制第2張圖片
CGFloat image2W = self.image2.size.width * 0.5;
CGFloat image2H = self.image2.size.height * 0.5;
CGFloat image2Y = image1H - image2H;
//把image2 繪制到后面的那個區(qū)域
[self.image2 drawInRect:CGRectMake(0, image2Y, image2W, image2H)];
// 得到上下文中的圖片
UIImage *fullImage = UIGraphicsGetImageFromCurrentImageContext();
// 結束上下文
UIGraphicsEndImageContext();
// 4.回到主線程顯示圖片
dispatch_async(dispatch_get_main_queue(), ^{
self.imageView.image = fullImage;
});
}
@end
2.3 方法三 隊列組
#import <UIKit/UIKit.h>
@interface htingViewController : UIViewController
@end
//
// htingViewController.m
#import "htingViewController.h"
@interface htingViewController ()
@property (weak, nonatomic) IBOutlet UIImageView *imageView;
//@property (nonatomic, strong) UIImage *image1;
//@property (nonatomic, strong) UIImage *image2;
@end
@implementation htingViewController
- (void)viewDidLoad
{
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
}
- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
// 1.隊列組
dispatch_group_t group = dispatch_group_create();
dispatch_queue_t queue = dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0);
// 2.下載圖片1
__block UIImage *image1 = nil; //要加一個 __block因為 block代碼默認不能改外面的東西（記住語法即可）
dispatch_group_async(group, queue, ^{
NSURL *url1 = [NSURL URLWithString:@"http://g.hiphotos.baidu.com/image/pic/item/f2deb48f8c5494ee460de6182ff5e0fe99257e80.jpg"];
NSData *data1 = [NSData dataWithContentsOfURL:url1];
image1 = [UIImage imageWithData:data1];
});
// 3.下載圖片2
__block UIImage *image2 = nil;
dispatch_group_async(group, queue, ^{
NSURL *url2 = [NSURL URLWithString:@"http://su.bdimg.com/static/superplus/img/logo_white_ee663702.png"];
NSData *data2 = [NSData dataWithContentsOfURL:url2];
image2 = [UIImage imageWithData:data2];
});
// 4.合并圖片 用Quartz2D的知識缀磕，則要先要搞一個空的大圖片缘圈，然后再把小圖片畫上去(保證執(zhí)行完組里面的所有任務之后，再執(zhí)行notify函數里面的block)
//隊列組：要把隊列組里面的所有任務都執(zhí)行完后調用dispatch_group_notify(group, queue, ^{ }
dispatch_group_notify(group, queue, ^{
// 開啟一個位圖上下文
UIGraphicsBeginImageContextWithOptions(image1.size, NO, 0.0);
// 繪制第1張圖片
CGFloat image1W = image1.size.width;
CGFloat image1H = image1.size.height;
[image1 drawInRect:CGRectMake(0, 0, image1W, image1H)];
// 繪制第2張圖片
CGFloat image2W = image2.size.width * 0.5;
CGFloat image2H = image2.size.height * 0.5;
CGFloat image2Y = image1H - image2H;
[image2 drawInRect:CGRectMake(0, image2Y, image2W, image2H)];
// 得到上下文中的圖片
UIImage *fullImage = UIGraphicsGetImageFromCurrentImageContext();
// 結束上下文
UIGraphicsEndImageContext();
// 5.回到主線程顯示圖片
dispatch_async(dispatch_get_main_queue(), ^{
self.imageView.image = fullImage;
});
});
}
@end
圖片.png
-**
-
隊列組
不知道是否正確袜蚕，看到就載過來糟把，供大家參考
圖片.png
