[ios]ios畫線 UIGraphicsBeginImageContextWithOptions--產生透明的圖形

標籤：

參考 ：http://www.mgenware.com/blog/?p=493

 

這三種東西：CGContextRef，CGPath和UIBezierPath。本質上都是一樣的，都是使用Quartz來繪畫。只不過把繪圖操作暴露在不同的API層面上，在具體實現上，當然也會有一些細小的差別。

我們將主要使用這3個類型，繪製出同一張圖片，如下，一個笑臉：

首先使用Quartz的CGPath來做這張圖。很簡單，首先建立用於轉移座標的Transform，然後建立一個CGMutablePathRef（屬於CGPath類型）對象。接著通過兩個CGPathAddEllipseInRect和一個CGPathAddArc函數來繪製Path中的兩個眼睛和一個嘴，注意把CGAffineTransform的地址傳進去，這樣Transform才會應用。接著把這個建立好的CGPath加入到當前CGContextRef中，最後通過CGContextRef執行繪畫。

代碼：

- (void)viewDidLoad{    [super viewDidLoad];        //開始映像繪圖    UIGraphicsBeginImageContext(self.view.bounds.size);    //擷取當前CGContextRef    CGContextRef gc = UIGraphicsGetCurrentContext();        //建立用於轉移座標的Transform，這樣我們不用按照實際顯示做座標計算    CGAffineTransform transform = CGAffineTransformMakeTranslation(50, 50);    //建立CGMutablePathRef    CGMutablePathRef path = CGPathCreateMutable();    //左眼    CGPathAddEllipseInRect(path, &transform, CGRectMake(0, 0, 20, 20));    //右眼    CGPathAddEllipseInRect(path, &transform, CGRectMake(80, 0, 20, 20));    //笑    CGPathMoveToPoint(path, &transform, 100, 50);    CGPathAddArc(path, &transform, 50, 50, 50, 0, M_PI, NO);    //將CGMutablePathRef添加到當前Context內    CGContextAddPath(gc, path);    //設定繪圖屬性    [[UIColor blueColor] setStroke];    CGContextSetLineWidth(gc, 2);    //執行繪畫    CGContextStrokePath(gc);        //從Context中擷取映像，並顯示在介面上    UIImage *img = UIGraphicsGetImageFromCurrentImageContext();    UIGraphicsEndImageContext();        UIImageView *imgView = [[UIImageView alloc] initWithImage:img];    [self.view addSubview:imgView];}

接下來，我們不去使用CGPath類型的相關函數，而完全使用CGContextRef相關的函數，這些函數執行起來其實是和上面講的的CGPath完全等價的。

這裡需要注意的是，完全使用CGContextRef的話，Transform的應用需使用CGContextTranslateCTM函數。

完整代碼：

- (void)viewDidLoad{    [super viewDidLoad];        //開始映像繪圖    UIGraphicsBeginImageContext(self.view.bounds.size);    //擷取當前CGContextRef    CGContextRef gc = UIGraphicsGetCurrentContext();        //使用CGContextTranslateCTM函數來轉移座標的Transform，這樣我們不用按照實際顯示做座標計算    CGContextTranslateCTM(gc, 50, 50);    //左眼    CGContextAddEllipseInRect(gc, CGRectMake(0, 0, 20, 20));    //右眼    CGContextAddEllipseInRect(gc, CGRectMake(80, 0, 20, 20));    //笑    CGContextMoveToPoint(gc, 100, 50);    CGContextAddArc(gc, 50, 50, 50, 0, M_PI, NO);    //設定繪圖屬性    [[UIColor blueColor] setStroke];    CGContextSetLineWidth(gc, 2);    //執行繪畫    CGContextStrokePath(gc);        //從Context中擷取映像，並顯示在介面上    UIImage *img = UIGraphicsGetImageFromCurrentImageContext();    UIGraphicsEndImageContext();    UIImageView *imgView = [[UIImageView alloc] initWithImage:img];    [self.view addSubview:imgView];}

同樣會繪製出上面的圖形。

 

最後我們使用UIBezierPath類型來完成上述圖形，UIBezierPath很有意思，它封裝了Quartz的相關API，自己存在於UIKit中，因此不是基於C的API，而是基於Objective-C對象的。那麼一個非常重要的點是由於離開了Quartz繪圖，所以不需要考慮Y軸翻轉的問題，在畫弧的時候，clockwise參數是和現實一樣的，如果需要順時針就傳YES，而不是像Quartz環境下傳NO的。

其次橢圓的建立需使用bezierPathWithOvalInRect方法，這裡名字是Oral而不是Quartz中的Ellipse。

最後注意UIBezierPath的applyTransform方法需要最後調用。

完整代碼：

 

- (void)viewDidLoad{    [super viewDidLoad];        //開始映像繪圖    UIGraphicsBeginImageContext(self.view.bounds.size);        //建立UIBezierPath    UIBezierPath *path = [UIBezierPath bezierPath];    //左眼    [path appendPath:[UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 0, 20, 20)]];    //右眼    [path appendPath:[UIBezierPath bezierPathWithOvalInRect:CGRectMake(80, 0, 20, 20)]];    //笑    [path moveToPoint:CGPointMake(100, 50)];    //注意這裡clockwise參數是YES而不是NO，因為這裡不知Quartz，不需要考慮Y軸翻轉的問題    [path addArcWithCenter:CGPointMake(50, 50) radius:50 startAngle:0 endAngle:M_PI clockwise:YES];    //使用applyTransform函數來轉移座標的Transform，這樣我們不用按照實際顯示做座標計算    [path applyTransform:CGAffineTransformMakeTranslation(50, 50)];    //設定繪畫屬性    [[UIColor blueColor] setStroke];    [path setLineWidth:2];    //執行繪畫    [path stroke];        //從Context中擷取映像，並顯示在介面上    UIImage *img = UIGraphicsGetImageFromCurrentImageContext();    UIGraphicsEndImageContext();    UIImageView *imgView = [[UIImageView alloc] initWithImage:img];    [self.view addSubview:imgView];}

 

[ios]ios畫線 UIGraphicsBeginImageContextWithOptions--產生透明的圖形