Quartz2D--貝塞爾路徑去畫圖

簡述：

  • 1、Quartz2D是什么

    • Quartz2D是二維繪圖引擎，同時支持IOS和Mac

  • 2、Quartz2D能做什么

  • 1、繪制圖形：線條\三角形\矩形\圓\弧等

  • 2、繪制文字

  • 3、繪制\生成圖片(常用)

  • 4、截圖\裁剪圖片(常用)

  • 5、讀取\生成PDF(不常用)

  • 6、自定義UI控件(不常用)

  • 3、Quartz2D操作流程

  • 3.1、看完上面的，我想大家應(yīng)該知道Quartz2D是用來干什么的了吧，但是我們又該如何操作它來完成自己想完成的繪制呢，那么需要使用它，我們的知道它的一個流程:

     1、我們首先需要開啟圖形上下文（Graphics Context）：是一個CGContextRef類型的數(shù)據(jù)。
 2、然后對我們想繪制的圖片或者圖形進(jìn)行一系列的操作。
 3、最后就是渲染在我的View上面。

  • 3.2、那么知道流程之后，我們在看看什么是上下文它又具有什么作用：

     1、介紹：
     1、在上面已經(jīng)介紹Graphics Context是一個CGContextRef類型的數(shù)據(jù)，但是那為什么是已CG開頭呢，
        是因為Quartz2D的API來自于Core Graphics框架，數(shù)據(jù)類型和函數(shù)基本都以CG作為前綴。
 2、作用：
     1、它保存繪圖信息、繪圖狀態(tài)
     2、決定繪制的輸出目標(biāo)(繪制到什么地?去?) (輸出目標(biāo)可以是PDF?文件、Bitmap或者顯示器的窗口上)

  • 3.3、在Quartz2D提供了以下幾種類型的Graphics Context：

     Bitmap Graphics Context     位圖上下文
 PDF Graphics Context        PDF上下文
 Window Graphics Context     窗口上下文
 Layer Graphics Context      Layer上下文
 Printer Graphics Context    打印機(jī)上下文

    如果想深入了解的話，大家可以去看看官方文檔，如何英文和我一樣的話我建議大家去看看南峰子的技術(shù)博客,我覺得此大神英文真心讓我膜拜啊。

  • 3.4、如何利用Quartz2D繪制東西到view上？

     1、首先，得有圖形上下文，因為它能保存繪圖信息，并且決定著繪制到什么地方去
 2、其次，那個圖形上下文必須跟view相關(guān)聯(lián)，才能將內(nèi)容繪制到view上面
 3、實現(xiàn)關(guān)聯(lián)的話，需要創(chuàng)建一個類，并且繼承于UIView，最重要的是要實現(xiàn)- (void)drawRect:(CGRect)rect這個方法

 其實說了那么多廢話都是想說- (void)drawRect:(CGRect)rect而已，好咯，那就開始摟代碼吧

代碼：

繪制圖形(線條\三角形\矩形\圓\弧\餅圖)：

  • 1、線條

  • 第一種

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

    //2、設(shè)置開始畫線的點
    CGContextMoveToPoint(ctx, 20, 100);

    //3、設(shè)置結(jié)束畫線的點
    CGContextAddLineToPoint(ctx, 200, 100);

    //4、設(shè)置線條的寬度
    CGContextSetLineWidth(ctx, 5);

    //5、設(shè)置線條起點和終點的樣式為圓角
    CGContextSetLineCap(ctx, kCGLineCapRound);

    //6、設(shè)置線條的轉(zhuǎn)角的樣式為圓角
    CGContextSetLineJoin(ctx, kCGLineJoinRound);

    //7、設(shè)置繪圖的顏色
    [[UIColor redColor] set];

    //8設(shè)置第二條線的終點(自動把上一條直線的終點當(dāng)做起點)
    // CGContextAddLineToPoint(ctx, 300, 200);

    //9.渲染（繪制出一條空心的線，線條不能為實心，只有圖型可為實心）
    CGContextStrokePath(ctx);
    //CGContextFillPath(ctx);
}

  • 第二種(使用了貝塞爾路徑)

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

    //2、繪制內(nèi)容拼接路徑，繪制的內(nèi)容都會路徑  UIBezierPath是UIKit中的
    UIBezierPath *path = [UIBezierPath bezierPath];

    //3、設(shè)置開始畫線的點
    [path moveToPoint:CGPointMake(50, 50)];

    //4、設(shè)置結(jié)束畫線的點
    [path addLineToPoint:CGPointMake(200, 200)];

    //5、給上下文添加路徑
    CGContextAddPath(ctx, path.CGPath);

    //繪制第二根線  這里我就不寫注釋了 和上面一樣
    path = [UIBezierPath bezierPath];
    [path moveToPoint:CGPointMake(200, 200)];
    [path addLineToPoint:CGPointMake(100, 200)];
    CGContextAddPath(ctx, path.CGPath);

    //6.渲染（繪制出一條空心的線，線條不能為實心，只有圖型可為實心）
    CGContextStrokePath(ctx);
    //如果大家想設(shè)置顏色，寬度，圓角狀態(tài)的話 可參考上面的，因為都是一樣的
}

    后面的話我都是使用貝塞爾路徑來實現(xiàn)繪圖，因為它使用起來比較方便,易閱讀 ,善于管理,不像上面那種閱讀起來比較麻煩，如果有很多繪圖信息,老長老長的;

  • 2、三角形

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

    //2、繪制內(nèi)容拼接路徑，繪制的內(nèi)容都會路徑  UIBezierPath是UIKit中的
    UIBezierPath *path = [UIBezierPath bezierPath];

    //3、設(shè)置開始畫線的點
    [path moveToPoint:CGPointMake(50, 50)];

    //4、設(shè)置結(jié)束畫線的點  另外在添加了兩個點 最后回到最初的點  那么三角形就構(gòu)成了
    [path addLineToPoint:CGPointMake(200, 200)];

    [path addLineToPoint:CGPointMake(100, 200)];

    [path addLineToPoint:CGPointMake(50, 50)];
    //5、給上下文添加路徑
    CGContextAddPath(ctx, path.CGPath);

    //6.渲染（繪制出一條空心的線，線條不能為實心，只有圖型可為實心）
    //CGContextStrokePath(ctx);   空心
    CGContextFillPath(ctx);  //實心
}

  • 3、矩形

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

    //2、繪制內(nèi)容拼接路徑，繪制的內(nèi)容都會路徑  UIBezierPath是UIKit中的
    UIBezierPath *path = [UIBezierPath bezierPathWithRect:CGRectMake(20, 20, 100, 100)];

    //3、給上下文添加路徑
    CGContextAddPath(ctx, path.CGPath);
    //4.渲染（繪制出一條空心的線，線條不能為實心，只有圖型可為實心）
    //    CGContextStrokePath(ctx);   空心
    CGContextFillPath(ctx);  //實心
}

  • 4、圓形

     //---------------------------第一種-----------------------------
//通過矩形改變cornerRadius畫圓  也可以畫圓角的矩形
- (void)drawRect:(CGRect)rect {
    //1、獲取上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();

    //2、繪制內(nèi)容拼接路徑，繪制的內(nèi)容都會路徑  UIBezierPath是UIKit中的
    UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(20, 20, 100, 100) cornerRadius:50];

    //3、給上下文添加路徑
    CGContextAddPath(ctx, path.CGPath);
    //4.渲染（繪制出一條空心的線，線條不能為實心，只有圖型可為實心）
    //    CGContextStrokePath(ctx);   空心
    CGContextFillPath(ctx);  //實心
}
//---------------------------第二種-----------------------------
//畫圓形以及橢圓  寬度和高度一樣則是圓形 不一樣則是橢圓
- (void)drawRect:(CGRect)rect {
    //1、獲取上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();

    //2、繪制內(nèi)容拼接路徑，繪制的內(nèi)容都會路徑  UIBezierPath是UIKit中的
    UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(20, 20, 50, 100)];

    //3、給上下文添加路徑
    CGContextAddPath(ctx, path.CGPath);
    //4.渲染（繪制出一條空心的線，線條不能為實心，只有圖型可為實心）
    //    CGContextStrokePath(ctx);   空心
    CGContextFillPath(ctx);  //實心
}

  • 5、弧形

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

//2、繪制內(nèi)容拼接路徑，繪制的內(nèi)容都會路徑  UIBezierPath是UIKit中的

//為UIView的中心點
CGPoint center =   CGPointMake(rect.size.width * 0.5, rect.size.height * 0.5);
CGFloat radius = 50;
//center       圓心
//radius       半徑
//startAngle   開始角度
//endAngle     結(jié)束角度
//clockwise    Yes為順時針  NO為逆勢針
UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:center radius:radius startAngle:0 endAngle:M_PI_2 clockwise:YES];

//3、給上下文添加路徑
CGContextAddPath(ctx, path.CGPath);
//4.渲染（繪制出一條空心的線，線條不能為實心，只有圖型可為實心）
CGContextStrokePath(ctx);//   空心
//    CGContextFillPath(ctx);  實心

}
```

  • 6、餅圖

    其實餅圖就是在弧的兩端以及和中心點加了兩條線，成為了餅圖

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

    //2、繪制內(nèi)容拼接路徑，繪制的內(nèi)容都會路徑  UIBezierPath是UIKit中的

    //為UIView的中心點
    CGPoint center =   CGPointMake(rect.size.width * 0.5, rect.size.height * 0.5);
    CGFloat radius = 50;
    //center       圓心
    //radius       半徑
    //startAngle   開始角度
    //endAngle     結(jié)束角度
    //clockwise    Yes為順時針  NO為逆勢針
    UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:center radius:radius startAngle:0 endAngle:M_PI_2 clockwise:YES];

    //上面代碼為給路徑添加了一條弧，現(xiàn)在我們在弧的兩端以及和中心點加了兩條線  為餅圖
    //這里的話  我們之間添加到坐標(biāo)點為中心
    [path addLineToPoint:center];
    //這里直接閉合路徑  則一條餅圖的路徑就添加完成了
    [path closePath];

    //3、給上下文添加路徑
    CGContextAddPath(ctx, path.CGPath);

    //4.渲染（繪制出一條空心的線，線條不能為實心，只有圖型可為實心）
    CGContextStrokePath(ctx);//   空心
    //    CGContextFillPath(ctx);  實心
}

補充：

以上就是通過貝塞爾路徑畫的圖了，里面的話只要就是需要查看UIBezierPath中的一些方法，忘了看看就行，如果有喜歡直接用上下文去畫的朋友可以去看iOS-Quartz2D這位朋友寫的博客。

                    本章到此結(jié)束
            歡迎各位碼友隨意轉(zhuǎn)載并指正
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • Quartz2D以及drawRect的重繪機(jī)制字?jǐn)?shù)1487 閱讀21 評論1 喜歡1一、什么是Quartz2D Q...
    PurpleWind閱讀 804評論 0贊 3
  • 什么是Quartz2D 是一個二維的繪圖引擎,同時支持iOS和Mac系統(tǒng) Quartz2D的API是純C語言的,它...
    Mario_ZJ閱讀 609評論 0贊 1
  • 什么是Quartz 2D 1>Quartz 2D是一個二維繪圖引擎,同時支持iOS和Mac OS X系統(tǒng)(跨平臺,...
    青蔥烈馬閱讀 756評論 0贊 3
  • Quartz2D 簡介 Quartz2D是二維(平面)的繪圖引擎(經(jīng)包裝的函數(shù)庫，方便開發(fā)者使用。也就是說蘋果幫我...
    iOS_Cqlee閱讀 638評論 0贊 2
  • 在iOS上畫圖主要有3種方法： UIKit, 這是我們最常用的繪圖方法，平時的UIButton、UIImageVi...
    Hardy_Hu閱讀 946評論 0贊 6