iOS開發(fā):Quartz2D繪圖

首先,要了解圖形上下文CGContextRef,圖形上下文可以理解為一塊畫布,我們要在畫布上進(jìn)行繪畫,然后UIView相當(dāng)于畫的支架,畫布要貼在支架上展示。
所以,既然CGContextRef是畫布,那么我們就要有一塊畫布,我們獲取畫布就是在UIView的drawRect方法里。

首先創(chuàng)建一個繼承UIView的子類,.m文件里drawRect方法系統(tǒng)注釋掉了。
將其解除注釋,然后就可以在drawRect方法里進(jìn)行繪圖!

1、繪制直線

    //1、獲取圖形上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    //2、先起點(diǎn)、連線到下一點(diǎn)...
    CGContextMoveToPoint(ctx, 50, 10);
    CGContextAddLineToPoint(ctx, 50, 70);
    CGContextAddLineToPoint(ctx, 70, 100);
    //設(shè)置線寬
    CGContextSetLineWidth(ctx, 5);
    //設(shè)置起點(diǎn)和終點(diǎn)的樣式
    CGContextSetLineCap(ctx, kCGLineCapRound);
    //設(shè)置轉(zhuǎn)折點(diǎn)的樣式
    CGContextSetLineJoin(ctx, kCGLineJoinRound);
    //設(shè)置線條顏色方法一
    CGContextSetRGBStrokeColor(ctx, 1.0, 0, 0, 1);
    //設(shè)置線條顏色方法二
    [[UIColor redColor] setStroke];
    //3、繪制
    CGContextStrokePath(ctx);

2、繪制三角形

    //1、獲取圖形上下文
    CGContextRef ctx0 = UIGraphicsGetCurrentContext();
    //2、連上三個點(diǎn)
    CGContextMoveToPoint(ctx0, 10, 150);
    CGContextAddLineToPoint(ctx0, 50, 200);
    CGContextAddLineToPoint(ctx0, 25, 250);
    //3、首尾相連
    CGContextClosePath(ctx0);
    //4、繪制
    CGContextStrokePath(ctx0);

3、繪制矩形

    //1、獲取圖形上下文
    CGContextRef ctx1 = UIGraphicsGetCurrentContext();
    //2、設(shè)置矩形位置
    CGContextAddRect(ctx1, CGRectMake(200, 300, 100, 150));
    //3、設(shè)置填充顏色
    [[UIColor redColor] setFill];
    //4、繪制
    CGContextFillPath(ctx1);

4、繪制圓形

    //1、獲取圖形上下文
    CGContextRef ctx2 = UIGraphicsGetCurrentContext();
    //2、設(shè)置圓形位置(寬高不一樣則為橢圓)
    CGContextAddEllipseInRect(ctx2, CGRectMake(200, 50, 100, 100));
    //3、繪制
    CGContextFillPath(ctx2);

5、繪制弧線

    //1、獲取圖形上下文
    CGContextRef ctx3 = UIGraphicsGetCurrentContext();
    //2、設(shè)置弧線位置(上下文, 圓心x, 圓心y, 半徑, 開始角度, 結(jié)束角度, 0代表順時針1代表逆時針)
    CGContextAddArc(ctx3, 300, 200, 50, M_PI, M_PI_2, 1);
    //3、繪制
    CGContextStrokePath(ctx3);

6、繪制虛線

    //畫虛線(還有用CAShapeLayer也可以畫虛線)
    //1、獲取圖形上下文
    CGContextRef ctx4 = UIGraphicsGetCurrentContext();
    //設(shè)置顏色
    CGContextSetStrokeColorWithColor(ctx4, [UIColor redColor].CGColor);
    //設(shè)置線寬
    CGContextSetLineWidth(ctx4, 2.0);
    /* 2、設(shè)置虛線參數(shù)
    c 繪制的context,這個不用多說;
    phase,第一個虛線段從哪里開始,例如傳入3,則從第三個單位開始;
    lengths,一個C數(shù)組,表示繪制部分和空白部分的分配。例如傳入[2,2],則繪制2個單位,然后空白兩個單位,以此重復(fù);
    count lengths的數(shù)量;
     */
    CGFloat lengths[] = {5};
    CGContextSetLineDash(ctx4, 0, lengths, 1);
    //設(shè)置線段位置
    CGContextMoveToPoint(ctx4,150,150);
    CGContextAddLineToPoint(ctx4, 150, 300);
    //3、繪制
    CGContextStrokePath(ctx4);

7、繪制曲線

    //畫曲線
    //1、獲取圖形上下文
    CGContextRef ctx5 = UIGraphicsGetCurrentContext();
    //2、創(chuàng)建路徑對象
    UIBezierPath *path = [UIBezierPath bezierPath];
    //3、設(shè)置起點(diǎn)位置
    [path moveToPoint:CGPointMake(50, 280)];
    //4、添加一根曲線到某點(diǎn)(三次曲線用addCurveToPoint,二次曲線用addQuadCurveToPoint)
    [path addQuadCurveToPoint:CGPointMake(250, 280) controlPoint:CGPointMake(100, 100)];
    //5、將繪制的內(nèi)容添加到上下文中
    CGContextAddPath(ctx5, path.CGPath);
    //6、渲染
    CGContextStrokePath(ctx5);

8、Translate(移動)、Rotate(旋轉(zhuǎn))、Scale(縮放)

    //移動
    //1、獲取圖形上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    //2、設(shè)置需要移動到的新坐標(biāo)點(diǎn)(必須要在原圖設(shè)置前)
    CGContextTranslateCTM(ctx, 10, 10);
    //3、設(shè)置原圖坐標(biāo)位置
    CGContextAddRect(ctx, CGRectMake(0, 0, 100, 100));
    //4、渲染
    CGContextFillPath(ctx);
    //旋轉(zhuǎn)
    //1、獲取圖形上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    //2、設(shè)置需要旋轉(zhuǎn)的角度(必須要在原圖設(shè)置前)
    CGContextRotateCTM(ctx, M_PI_4);
    //3、設(shè)置原圖坐標(biāo)位置
    CGContextAddRect(ctx, CGRectMake(100, 0, 40, 5));
    //4、渲染
    CGContextFillPath(ctx);
    //縮放
    //1、獲取圖形上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    //2、設(shè)置縮放比例(縮放體現(xiàn)(100,100,100,100)---->(50,10,50,10))
    CGContextScaleCTM(ctx, 0.5, 0.1);
    //3、設(shè)置原圖坐標(biāo)位置
    CGContextAddRect(ctx, CGRectMake(100, 100, 100, 100));
    //4、渲染
    CGContextFillPath(ctx);

9、Shadow(陰影)和Gradient(漸變)

陰影

    //陰影
    //1、獲取圖形上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    //2、添加一個矩形
    CGContextAddRect(ctx, CGRectMake(100, 100, 100, 100));
    //3、設(shè)置陰影方位(ctx,(x向偏移量,y向偏移量), blur 非負(fù)數(shù),決定陰影的模糊程度,數(shù)越大越模糊)
    CGContextSetShadow(ctx, CGSizeMake(-10.0, 10.0), 1.0);
    //4、渲染
    CGContextFillPath(ctx);

漸變

漸變就是從一種顏色逐漸變換為另一種顏色:
Quart提供了兩種漸變模型
1、axial gradient:線性漸變,使用的時候設(shè)置好兩個頂點(diǎn)的顏色(也可以設(shè)置中間過渡色)
2、radial gradient :可以實(shí)現(xiàn)一個圓到另一個圓的漸變或者一個點(diǎn)到另一個點(diǎn)的漸變

兩種漸變的繪制模型:
CGShading - 使用這種數(shù)據(jù)類型需要自己定義CFFunction來計算每一個點(diǎn)的漸變顏色,較為復(fù)雜,但是能夠更靈活的繪制。
CGGradient- 使用這種數(shù)據(jù)類型只需要制定兩個頂點(diǎn)的顏色,以及繪制模式,其余的Quartz會給繪制,但是漸變的數(shù)學(xué)模型不靈活。

    CGContextRef context = UIGraphicsGetCurrentContext();
    //用CGGradient繪制
    CGColorSpaceRef deviceRGB = CGColorSpaceCreateDeviceRGB();
    size_t num_of_locations = 2;
    CGFloat locations[2] = {0.0,1.0};
    CGFloat components[8] = {1.0, 0.0, 0.0, 1.0,  // 紅色
        0.0, 1.0, 0.0, 1.0};//綠色
    CGGradientRef gradient = CGGradientCreateWithColorComponents(deviceRGB, components, locations,num_of_locations);
    CGPoint startPoint = CGPointMake(0, 50);
    CGPoint endPoint = CGPointMake(0, 100);
    CGContextDrawLinearGradient(context,gradient,startPoint, endPoint,0);
    CGColorSpaceRelease(deviceRGB);
    CGGradientRelease(gradient);

10、復(fù)雜繪圖(狀態(tài)堆棧)

    //多圖繪制(狀態(tài)堆棧)
    //1、繪制第一圖
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    //2、保存狀態(tài),入棧
    CGContextSaveGState(ctx);
    CGContextAddRect(ctx, CGRectMake(10, 10, 50, 50));
    CGContextSetLineWidth(ctx, 5.0);
    CGContextFillPath(ctx);
    //3、推出棧(此時坐標(biāo)系已經(jīng)回到了最開始的狀態(tài))
    CGContextRestoreGState(ctx);
    //4、可以繪制第二圖
    CGContextAddEllipseInRect(ctx, CGRectMake(100, 100, 100, 100));
    CGContextSetFillColorWithColor(ctx, [UIColor purpleColor].CGColor);
    CGContextFillPath(ctx);
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容