CGContextRef&CGMutablePathRef&UIBezierPath簡單學習

時間 2019-11-07

標籤 cgcontextref&cgmutablepathref&uibezierpath cgcontextref cgmutablepathref uibezierpath 簡單學習简体版

原文原文鏈接

簡單的四句介紹ios

Quartz是一個二維繪圖引擎，使用的是CoreGraphics庫，同時支持iOS和Mac系統git

CGContextRef:獲取圖形上下文.或者叫做用域，即畫布，他是專門用來保存繪畫期間的各類數據的github

UIBezierPath是對CGPathRef的封裝。建立矢量圖形時，拆解成一條或者多條線段，拼接起來，每條下端的終點都是下一條線段的起點segmentfault

當咱們繪製路徑時，Path的信息就會被Graphics context重置。若是咱們想要保存path信息，並屢次使用它，咱們就能夠用到CGPathCreatMutable申請路徑，而後用CGPathAddLintToPoint等方法來添加路徑。api

一塊兒學習，共同進步，可下載對應Demo

1.設置點和線

介紹屬性

先設置一個起點
添加一箇中間點
畫一個矩形
畫一個圓形
畫一個扇形
二階曲線
三階曲線

CGContextRef	UIBezierPath	CGMutablePathRef
CGContextMoveToPoint	moveToPoint	CGPathMoveToPoint
CGContextAddLineToPoint	addLineToPoint	CGPathAddRect
CGContextAddRect	bezierPathWithRect	CGPathAddRect
CGContextAddEllipseInRect	bezierPathWithOvalInRect	CGPathAddEllipseInRect
CGContextAddArc	addArcWithCenter	CGPathAddArcToPoint
CGContextAddQuadCurveToPoint	addQuadCurveToPoint	CGPathAddQuadCurveToPoint
CGContextAddCurveToPoint	addCurveToPoint	CGPathAddCurveToPoint

二、設置線的屬性

這些設置線屬性的API都是通用的學習

線寬 CGContextSetLineWidth
線的顏色 CGContextSetStrokeColorWithColor
填充顏色 CGContextSetFillColorWithColor
line join CGContextSetLineCap
line cap CGContextSetLineJoin
透明度 CGContextSetAlpha
設置陰影 CGContextSetShadow
設置陰影顏色 CGContextSetShadowWithColor
切割操做 CGContextClip

思惟導圖

CGContextRef介紹

Quartz2d是一個二維繪圖引擎，使用的是CoreGraphics庫，同時支持iOS和Mac系統

有點難，比較底層，操做系統層api通常都是純C開發的，有針對性的開發纔會用到ui

要基於UIView去開發spa

實戰用途

畫線段

畫直線CGContextAddLineToPoint操作系統
畫虛線CGContextSetLineDashcode

畫三角形

CGContextClosePath

畫矩形

CGContextAddRect

畫圓

CGContextAddEllipseInRect

畫扇形

CGContextAddArc

畫曲線

CGContextAddQuadCurveToPoint
CGContextAddCurveToPoint

畫特效

CGContextSetShadow
CGContextSetAlpha

繪製文字

drawInRect

繪製圖片

drawInRect
CGContextClip

變換運用（改變畫布位置）

CGContextTranslateCTM
CGContextRotateCTM
CGContextScaleCTM

一、CGContextRef之畫線段

CGContextRef 具備貫穿全局的效果，咱們設置一個全局變量建立一次就能夠了

虛線

- (void)drawLine1{
    //獲取圖形上下文.或者叫做用域，即畫布，他是專門用來保存繪畫期間的各類數據的
    CGContextRef contextRef = UIGraphicsGetCurrentContext();
    
    //路徑設置
    //先設置一個起點
    CGContextMoveToPoint(contextRef, 50, 100);
    //設置終點
    CGContextAddLineToPoint(contextRef, 100, 500);
    
    //設置樣式
    //設置線寬
    CGContextSetLineWidth(contextRef, 5.0f);
    //設置線的顏色
    CGContextSetStrokeColorWithColor(contextRef, [UIColor redColor].CGColor);
    
    //風格  頭部和尾部的處理
    CGContextSetLineCap(contextRef, kCGLineCapRound);
    
    
    /*
     畫虛線
     參數1 做用域
     參數2 起點的偏移量
     參數3 指明虛線是如何交替繪製
     lengths的值｛10,10｝表示先繪製10個點，再跳過10個點
     若是把lengths值改成｛10, 20, 10｝，則表示先繪製10個點，跳過20個點，繪製10個點，跳過10個點，再繪製20個點，
     參數4 實心部分和虛心部分的循環次數
     */
    CGFloat lenths[] = {10, 10};
    CGContextSetLineDash(contextRef, 0, lenths, 2);
    
    
    //渲染
    CGContextStrokePath(contextRef);
}

效果圖

二、CGContextRef之畫多邊形

畫三角形

- (void)drawTriangle{
    //獲取圖形上下文
    CGContextRef contextRef = UIGraphicsGetCurrentContext();
    
    //設置點
    CGContextMoveToPoint(contextRef, 100, 100);
    CGContextAddLineToPoint(contextRef, 200, 200);
    CGContextAddLineToPoint(contextRef, 100, 200);
    
    //把點封閉起來
    CGContextClosePath(contextRef);
    
    //設置線寬
    CGContextSetLineWidth(contextRef, 3.0f);
    //設置線的顏色
    CGContextSetStrokeColorWithColor(contextRef, [UIColor redColor].CGColor);
    //設置填充顏色
    CGContextSetFillColorWithColor(contextRef, [UIColor greenColor].CGColor);
    
    
    // 若是寫了多種渲染方式，那麼只執行第一種
//    CGContextStrokePath(contextRef);
//    CGContextFillPath(contextRef);
    
    CGContextDrawPath(contextRef, kCGPathFillStroke);
 
}

效果圖

畫正方形

//獲取圖形上下文
   CGContextRef contextRef = UIGraphicsGetCurrentContext();
   
   CGContextAddRect(contextRef, CGRectMake(100, 100, 100, 100));
   
   //顏色的填充
   CGContextSetFillColorWithColor(contextRef, [UIColor redColor].CGColor);
   //線寬
   CGContextSetLineWidth(contextRef, 4.0f);
   CGContextSetStrokeColorWithColor(contextRef, [UIColor blueColor].CGColor);
   
   //渲染
   CGContextDrawPath(contextRef, kCGPathFillStroke);

效果圖

三、CGContextRef之畫曲線

畫圓

 // 繪製圖形上下文
    CGContextRef contextRef = UIGraphicsGetCurrentContext();
    
    CGContextAddEllipseInRect(contextRef, CGRectMake(100, 100, 100, 100));
    
    CGContextDrawPath(contextRef, kCGPathFillStroke);

扇形

- (void)drawArc1{
    
    CGContextRef contextRef = UIGraphicsGetCurrentContext();
    /*
     參數1:做用域
     參數2:圓心x座標
     參數3:圓心y座標
     參數4:半徑
     參數5:開始角度
     參數6:結束角度
     參數7:方向，0表示順時針，1表示逆時針
     
     */
    CGContextAddArc(contextRef, 100, 200, 100, 0, M_PI_4, 0);
    
    CGContextSetLineWidth(contextRef, 5.0f);
    CGContextSetFillColorWithColor(contextRef, [UIColor greenColor].CGColor);
    CGContextSetStrokeColorWithColor(contextRef, [UIColor redColor].CGColor);
    
    
//    CGContextAddLineToPoint(contextRef, 100, 200);
    
    CGContextDrawPath(contextRef, kCGPathFillStroke);
    
    
}




- (void)drawArc2{
    CGContextRef contextRef = UIGraphicsGetCurrentContext();
    
    
    //第一部分
    CGContextMoveToPoint(contextRef, 250, 400);
    CGContextAddArc(contextRef, 250, 400, 100, 0, M_PI_2, 0);
    CGContextSetFillColorWithColor(contextRef, [UIColor blueColor].CGColor);
    CGContextFillPath(contextRef);
    
    
    //第二部分
    CGContextMoveToPoint(contextRef, 250, 400);
    CGContextAddArc(contextRef, 250, 400, 100, M_PI_2, M_PI_2/2*3, 0);
    CGContextSetFillColorWithColor(contextRef, [UIColor redColor].CGColor);
    CGContextFillPath(contextRef);
    
    // 第三部分
    CGContextMoveToPoint(contextRef, 250, 400);
    CGContextAddArc(contextRef, 250, 400, 100, 0, 225*M_PI/180.0, 1);
    CGContextSetFillColorWithColor(contextRef, [UIColor purpleColor].CGColor);
    CGContextFillPath(contextRef);

    
}

效果圖

畫曲線

   
    CGContextRef contextRef = UIGraphicsGetCurrentContext();
    
    //起點
    CGContextMoveToPoint(contextRef, 20, 300);
    /*
     三階貝塞爾曲線
     參數1:做用域
     參數2:控制點x
     參數3:控制點y
     參數4:控制點x
     參數5:控制點y
     參數6:終點x
     參數7:終點y
     
     - `CGContextAddQuadCurveToPoint`  二階貝塞爾曲線
     */
    CGContextAddCurveToPoint(contextRef, 100, -100, 200, 900, 300, 400);
     CGContextStrokePath(contextRef);

效果圖

四、CGContextRef之畫特效

 CGContextRef contextRef = UIGraphicsGetCurrentContext();
    
    
    CGContextAddRect(contextRef, CGRectMake(100, 100, 100, 100));
    CGContextSetFillColorWithColor(contextRef, [UIColor redColor].CGColor);
    CGContextSetStrokeColorWithColor(contextRef, [UIColor greenColor].CGColor);
    CGContextSetLineWidth(contextRef, 5.0f);
    
    //設置透明度
    //取值範圍（0~1，0表示全透明，1是不透明）
     CGContextSetAlpha(contextRef, 1);
    
    /*
     設置陰影
     參數1:畫布
     參數2:右偏移量
     參數3:下偏移量
     參數4:模糊度（0是不模糊，越大越模糊，10就差很少）
     */
    CGContextSetShadow(contextRef, CGSizeMake(10, 10), 10);
    
    
    CGContextDrawPath(contextRef, kCGPathFillStroke);

效果圖

五、CGContextRef之繪製

繪製文字

 NSDictionary *dic = @{
                          NSFontAttributeName:[UIFont systemFontOfSize:15],
                           NSForegroundColorAttributeName : [UIColor redColor]
                          };
    // 兩種的區別drawInRect會自動換行，drawAtPoint:CGPointZero不會自動換行
    [text drawInRect:CGRectMake(20, 100, self.bounds.size.width - 40, 100) withAttributes:dic];
//    [text drawAtPoint:CGPointMake(20, 200) withAttributes:dic];

繪製圖片

- (void)drawImage{
    UIImage *image = [UIImage imageNamed:@"image.jpg"];
    [image drawInRect:CGRectMake(100, 100, 250, 250)];
    // 平鋪圖像，超出部分會自動剪裁
//    [image drawAsPatternInRect:self.bounds];
    // 若是實現文字和圖片共存，須要將文字寫在後面，防止被圖片蓋住
    NSDictionary *dic = @{
                          NSFontAttributeName:[UIFont systemFontOfSize:15],
                          NSForegroundColorAttributeName : [UIColor redColor]
                          };
    NSString *text = @"若是實現文字和圖片共存，須要將文字寫在後面，防止被圖片蓋住";
    [text drawInRect:CGRectMake(100, 300, 250, 100) withAttributes:dic];
}

-(void)clipImage{
    /*
     思路：先畫一個圓，讓圖片顯示在圓的內部，超出的部分不顯示。
     注意：顯示的範圍只限於指定的剪切範圍，不管往上下文中繪製什麼東西，只要超出了這個範圍的都不會顯示。
     */
    
    
    CGContextRef contextRef = UIGraphicsGetCurrentContext();
    // 先畫一個圓形
    CGContextAddEllipseInRect(contextRef, CGRectMake(100, 400, 200, 200));
    
    // 切割操做
    CGContextClip(contextRef);
    CGContextFillPath(contextRef);
    
    
    UIImage *image = [UIImage imageNamed:@"image.jpg"];
    [image drawInRect:CGRectMake(100, 400, 200, 200)];
    

}

效果圖

六、CGContextRef之圖形變換

 UIImage *image0 = [UIImage imageNamed:@"image.jpg"];
    [image0 drawInRect:CGRectMake(300, 400, 100, 100)];
    
    CGContextRef contextRef = UIGraphicsGetCurrentContext();
    // 移動變換
    //    CGContextTranslateCTM(contextRef, -100, -100);
    /**
     *  對象沿着x軸移動-100單位，沿着y軸移動-100單位
     */
    // 多個變換會疊加
    // 縮放
    //    CGContextScaleCTM(contextRef, 0.5, 0.5);
    
    // 獲取中心點
//    CGFloat cenX = CGRectGetMidX(self.bounds);
//    CGFloat cenY = CGRectGetMidY(self.bounds);
//    
    
    // 先移動一下
    //    CGContextTranslateCTM(contextRef, cenX, cenY);
    CGContextTranslateCTM(contextRef, 100+100/2.0, 100+100/2.0);
    
    // 旋轉變換
    CGContextRotateCTM(contextRef, M_PI_4);
    // 再移動回去
    CGContextTranslateCTM(contextRef, -(100+100/2.0), -(100+100/2.0));
    
    /**
     *  旋轉能夠認爲實質是旋轉座標系，會繞着座標原點旋轉，能夠先將座標原點移動到要旋轉的圖形的中點，而後執行旋轉，而後再移動回來，實現繞着圖形中心旋轉的目的
     */
    
    
    UIImage *image = [UIImage imageNamed:@"image.jpg"];
    [image drawInRect:CGRectMake(300, 400, 100, 100)];

效果圖

UIBezierPath

使用步驟

建立一個 UIBezierPath 對象
用 moveToPoint: 設置初始線段的起點
添加線段，定義一或多個子路徑
修改 UIBezierPath 的繪圖相關的屬性，好比stroke path的屬性 lineWidth 和 lineJoinStyle ， filled path的屬性 usesEvenOddFillRule