首先,要了解圖形上下文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);