#import "DrawView.h" @implementation DrawView /** * 作用:專門用來繪圖 * 什么時候調用:當View顯示的時候調用 * @param rect:當View的bounds */ - (void)drawRect:(CGRect)rect { // Drawing code // NSLog(@"%s",__func__); // NSLog(@"%@",NSStringFromCGRect(rect)); //1.在drawRect方法當中系統已經幫你創建一個跟View相關聯的上下文.(Layer上下文) //只要獲取上下文就行了. //繪制曲線 //1.獲取上下文 CGContextRef ctx = UIGraphicsGetCurrentContext(); //2.描述路徑 UIBezierPath *path = [UIBezierPath bezierPath]; //畫曲線 //2.1設置起點 [path moveToPoint:CGPointMake(50, 280)]; //2.2添加一根曲線到某一個點 [path addQuadCurveToPoint:CGPointMake(250, 280) controlPoint:CGPointMake(250, 200)]; //3.把路徑添加到上下文 CGContextAddPath(ctx, path.CGPath); //4.把上下文的內容渲染View上 CGContextStrokePath(ctx); } //畫直線 - (void)drawLine{ //1.獲取上下文(獲取,創建上下文 都 以uigraphics開頭) CGContextRef ctx = UIGraphicsGetCurrentContext(); //2.繪制路徑 UIBezierPath *path = [UIBezierPath bezierPath]; //2.1 設置起點 [path moveToPoint:CGPointMake(50, 280)]; //2.2 添加一根線到終點 [path addLineToPoint:CGPointMake(250, 50)]; //畫第二條線 // [path moveToPoint:CGPointMake(100, 280)]; // [path addLineToPoint:CGPointMake(250, 100)]; //addLineToPoint:把上一條線的終點當作是下一條線的起點 [path addLineToPoint:CGPointMake(200, 280)]; //上下文的狀態 //設置線的寬度 CGContextSetLineWidth(ctx, 10); //設置線的連接樣式（兩條線的交點為圓角） CGContextSetLineJoin(ctx, kCGLineJoinRound); //設置線的頂角樣式（兩根線的兩端為圓角） CGContextSetLineCap(ctx, kCGLineCapRound); //設置顏色（此方法會自動判斷是stroke描點，還是fill填充而設置顏色） [[UIColor redColor] set]; //3.把繪制的內容添加到上下文當中. //UIBezierPath:UIKit框架 -> CGPathRef:CoreGraphics框架 CGContextAddPath(ctx, path.CGPath); //4.把上下文的內容顯示到View上(渲染到View的layer)(stroke fill) CGContextStrokePath(ctx); } @end
#import "DrawView.h" @implementation DrawView -(void)awakeFromNib{ //畫橢圓 //UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(50, 50, 100, 50)]; //使用UIBezierPath提供的繪圖方法進行繪制 //[path stroke]方法中默認做了:1.獲取上下文->2.描述路徑,3.把路徑添加到上下文,4.把上下文的內容渲染View上,只有在drawRect:方法當中才能夠獲取上下文.在awakeFromNib當獲取不到上下文,所以沒有辦法 進行繪圖. //[path stroke]; } - (void)drawRect:(CGRect)rect { //// 1：繪制矩形 和 直線 // UIBezierPath *path = [UIBezierPath bezierPathWithRect:CGRectMake(50, 50, 100, 100)]; // [path moveToPoint: CGPointMake(50, 250)]; // [path addLineToPoint:CGPointMake(250, 250)]; // // [path setLineWidth:10]; // [path stroke]; // 2： 使用UIBezierPath提供的繪圖方法進行繪制 // 畫橢圓或是圓形：當寬高不相等時時橢圓，相等的時候是圓形，調用UIBezierPath的對象方法[path stroke]，默認做了1.獲取上下文->2.描述路徑,3.把路徑添加到上下文,4.把上下文的內容渲染View上,只有在drawRect:方法當中才能夠獲取上下文.在awakeFromNib當獲取不到上下文,所以沒有辦法 進行繪圖. // UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(50, 50, 100, 100)]; // // [[UIColor redColor] set]; // [path stroke]; //3：畫弧 //Center:弧所在的圓心 //radius:圓的半徑 //startAngle:開始角度 //endAngle:截至角度 //clockwise: YES:順時針 NO:逆時針 NSLog(@"%@",NSStringFromCGPoint(self.center)); //畫弧 // CGPoint center = CGPointMake(rect.size.width * 0.5, rect.size.height * 0.5); // CGFloat radius = rect.size.width * 0.5 - 10; // //不能直接會用self.center ,是因為self.center坐標是相對於它的父控件. // UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:center radius:radius startAngle:0 endAngle:-M_PI_2 clockwise:NO]; // [path stroke]; // //畫扇形 // // CGPoint center = CGPointMake(rect.size.width * 0.5, rect.size.height * 0.5); // CGFloat radius = rect.size.width * 0.5 - 10; // //不能直接會用self.center ,是因為self.center坐標是相對於它的父控件. // UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:center radius:radius startAngle:0 endAngle:-M_PI_2 clockwise:NO]; // // //添加一根線到圓心 // [path addLineToPoint:center]; // [[UIColor redColor] set]; // //關閉路徑closePath:從路徑終點連接一根線到路徑的起點 //// [path closePath]; // // // // //畫扇形 // //fill(填充之前,會自動關閉路徑) // [path fill]; // // //[path stroke];//1.獲取上下文->2.描述路徑,3.把路徑添加到上下文,4.把上下文的內容渲染View上 // [self drawRect]; } //畫矩形 - (void)drawRect{ //1.獲取上下文 CGContextRef ctx = UIGraphicsGetCurrentContext(); //2.描述路徑 //畫矩形 //UIBezierPath *path = [UIBezierPath bezierPathWithRect:CGRectMake(50, 50, 100, 100)]; //圓角矩形 //cornerRadius:圓角半徑 UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(50, 50, 100, 100) cornerRadius:23]; [[UIColor yellowColor] set]; //3.把路徑添加到上下文 CGContextAddPath(ctx, path.CGPath); //4.把上下文的內容渲染View上 //CGContextStrokePath(ctx);一個圓圈 CGContextFillPath(ctx);//填充 } @end
1.DrawRect方法作用?什么時候調用.
DrawRect作用:專用在這個方法當中繪圖的.只有在這個方法當中才能取得跟View相關聯的上下文.
DrawRect是系統自己調用的, 它是當View顯示的時候自動調用.
2.畫線(基本步驟描述)
2.1獲取跟View相關聯的上下文
CGContextRef ctx = UIGraphicsGetCurrentContext();
2.2繪制路徑
UIBezierPath *path = [UIBezierPath bezierPath];
2.2.1設置起點
[path moveToPoint:CGPointMake(10, 125)];
2.2.2添加一根線到某個點
[path addLineToPoint:CGPointMake(200, 125)];
2.3把路徑添加到上下文
CGContextAddPath(ctx,path.CGPath);
2.4把上下文的內容渲染到View上面.
CGContextStrokePath(ctx);
3. 想要再添加一根線怎么辦?
第一種方法:重新設置起點,添加一根線到某個點,一個UIBezierPath路徑上面可以有多條線.
第二種方法:直接在原來的基礎上添加線.把上一條的終點當做下一條線的起點.添加一根線到某個點
直接在下面addLineToPoint:
4.怎么樣設置線的寬度,顏色,樣式?
設置這些樣式,我們稱為是修改圖形上下文的狀態.
設置線寬:CGContextSetLineWidth(ctx, 20);
設置線段的連接樣式: CGContextSetLineJoin(ctx, kCGLineJoinRound);
添加頂角樣式:CGContextSetLineCap(ctx, kCGLineCapRound);
設置線的顏色: [[UIColor redColor] set];
5.如何畫曲線?
畫曲線方法比較特殊需要一個控制點來決定曲線的彎曲程度.畫曲線方法為:
先設置一個曲線的起點
[path moveToPoint:CGPointMake(10, 125)];
再添加到個點到曲線的終點.同時還須要一個controlPoint(控件點決定曲線彎曲的方法程序)
[path addQuadCurveToPoint:CGPointMake(240, 125) controlPoint:CGPointMake(125, 10)];
6.如何畫矩形,圓角矩形?
圓角矩形的畫法多了一個參數,cornerRadius
cornerRadius它是矩形的圓角半徑.
通過圓角矩形可以畫一個圓.當矩形是正方形的時候,把圓角半徑設為寬度的一半,就是一個圓.
bezierPathWithRoundedRect:CGRectMake(10, 100, 50, 50) cornerRadius:10
7.如果畫橢圓,圓?
畫橢圓的方法為:
前兩個參數分別代碼圓的圓心,后面兩個參數分別代表圓的寬度,與高度.
寬高都相等時,畫的是一個正圓, 不相等時畫的是一個橢圓
bezierPathWithOvalInRect:CGRectMake(10, 100, 50, 50)
8.如何利用UIKit封裝的上下文進行畫圖?
直接來個:[path stroke]就可以了.
它底層的實現,就是獲取上下文,拼接路徑,把路徑添加到上下文,渲染到View
9.如何畫圓弧?
首先要確定圓才能確定圓弧,圓孤它就圓上的一個角度嘛
Center:圓心
radius:圓的半徑
startAngle:起始角度
endAngle:終點角度
clockwise:Yes順時針,No逆時針
注意:startAngle角度的位置是從圓的最右側為0度.
UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(125, 125)
radius:100
startAngle:0
endAngle:M_PI * 2
clockwise:YES];
10.如果畫扇形.
畫扇形的方法為:先畫一個圓孤再添加一個一根線到圓心,然后關閉路徑.
關閉路徑就會自動從路徑的終點到路徑的起點封閉起下
用填充的話,它會默認做一個封閉路徑,從路徑的終點到起點.
[path fill];