首先了解一下CGContextRef:
An opaque type that represents a Quartz 2D drawing environment.
Graphics Context是圖形上下文,可以將其理解為一塊畫布,我們可以在上面進行繪畫操作,繪制完成后,將畫布放到我們的view中顯示即可,view看作是一個畫框.
自己學習時實現的demo,希望對大家有幫助,具體的實現看代碼,并有完美的注釋解釋,還有一些對我幫助的博文供大家參考。都在代碼里面。
看一下demo效果圖先:
自定義CustomView類,CustomView.h:
- #import?<UIKit/UIKit.h>??
- #import?<QuartzCore/QuartzCore.h>??
- #define?PI?3.14159265358979323846??
- @interface?CustomView?:?UIView??
- ??
- ??
- @end??
實現類CustomView.m:
- #import?"CustomView.h"??
- ??
- @implementation?CustomView??
- ??
- -?(id)initWithFrame:(CGRect)frame??
- {??
- ????self?=?[super?initWithFrame:frame];??
- ????if?(self)?{??
- ????}??
- ????return?self;??
- }??
- ??
- ??
- //?覆蓋drawRect方法,你可以在此自定義繪畫和動畫??
- -?(void)drawRect:(CGRect)rect??
- {??
- ????//An?opaque?type?that?represents?a?Quartz?2D?drawing?environment.??
- ????//一個不透明類型的Quartz?2D繪畫環境,相當于一個畫布,你可以在上面任意繪畫??
- ????CGContextRef?context?=?UIGraphicsGetCurrentContext();??
- ??????
- ????/*寫文字*/??
- ????CGContextSetRGBFillColor?(context,??1,?0,?0,?1.0);//設置填充顏色??
- ????UIFont??*font?=?[UIFont?boldSystemFontOfSize:15.0];//設置??
- ????[@"畫圓:"?drawInRect:CGRectMake(10,?20,?80,?20)?withFont:font];??
- ????[@"畫線及孤線:"?drawInRect:CGRectMake(10,?80,?100,?20)?withFont:font];??
- ????[@"畫矩形:"?drawInRect:CGRectMake(10,?120,?80,?20)?withFont:font];??
- ????[@"畫扇形和橢圓:"?drawInRect:CGRectMake(10,?160,?110,?20)?withFont:font];??
- ????[@"畫三角形:"?drawInRect:CGRectMake(10,?220,?80,?20)?withFont:font];??
- ????[@"畫圓角矩形:"?drawInRect:CGRectMake(10,?260,?100,?20)?withFont:font];??
- ????[@"畫貝塞爾曲線:"?drawInRect:CGRectMake(10,?300,?100,?20)?withFont:font];??
- ????[@"圖片:"?drawInRect:CGRectMake(10,?340,?80,?20)?withFont:font];??
- ??
- ????/*畫圓*/??
- ????//邊框圓??
- ????CGContextSetRGBStrokeColor(context,1,1,1,1.0);//畫筆線的顏色??
- ????CGContextSetLineWidth(context,?1.0);//線的寬度??
- ????//void?CGContextAddArc(CGContextRef?c,CGFloat?x,?CGFloat?y,CGFloat?radius,CGFloat?startAngle,CGFloat?endAngle,?int?clockwise)1 弧度=180°/π?(≈57.3°)?度=弧度×180°/π?360°=360×π/180?=2π?弧度???
- ????//?x,y為圓點坐標,radius半徑,startAngle為開始的弧度,endAngle為?結束的弧度,clockwise?0為順時針,1為逆時針。??
- ????CGContextAddArc(context,?100,?20,?15,?0,?2*PI,?0);?//添加一個圓??
- ????CGContextDrawPath(context,?kCGPathStroke);?//繪制路徑??
- ??????
- ????//填充圓,無邊框??
- ????CGContextAddArc(context,?150,?30,?30,?0,?2*PI,?0);?//添加一個圓??
- ????CGContextDrawPath(context,?kCGPathFill);//繪制填充??
- ??????
- ????//畫大圓并填充顏??
- ????UIColor*aColor?=?[UIColor?colorWithRed:1?green:0.0?blue:0?alpha:1];??
- ????CGContextSetFillColorWithColor(context,?aColor.CGColor);//填充顏色??
- ????CGContextSetLineWidth(context,?3.0);//線的寬度??
- ????CGContextAddArc(context,?250,?40,?40,?0,?2*PI,?0);?//添加一個圓??
- ????//kCGPathFill填充非零繞數規則,kCGPathEOFill表示用奇偶規則,kCGPathStroke路徑,kCGPathFillStroke路徑填充,kCGPathEOFillStroke表示描線,不是填充??
- ????CGContextDrawPath(context,?kCGPathFillStroke);?//繪制路徑加填充??
- ??????
- ????/*畫線及孤線*/??
- ????//畫線??
- ????CGPoint?aPoints[2];//坐標點??
- ????aPoints[0]?=CGPointMake(100,?80);//坐標1??
- ????aPoints[1]?=CGPointMake(130,?80);//坐標2??
- ????//CGContextAddLines(CGContextRef?c,?const?CGPoint?points[],size_t?count)??
- ????//points[]坐標數組,和count大小??
- ????CGContextAddLines(context,?aPoints,?2);//添加線??
- ????CGContextDrawPath(context,?kCGPathStroke);?//根據坐標繪制路徑??
- ??????
- ????//畫笑臉弧線??
- ????//左??
- ????CGContextSetRGBStrokeColor(context,?0,?0,?1,?1);//改變畫筆顏色??
- ????CGContextMoveToPoint(context,?140,?80);//開始坐標p1??
- ????//CGContextAddArcToPoint(CGContextRef?c,?CGFloat?x1,?CGFloat?y1,CGFloat?x2,?CGFloat?y2,?CGFloat?radius)??
- ????//x1,y1跟p1形成一條線的坐標p2,x2,y2結束坐標跟p3形成一條線的p3,radius半徑,注意,?需要算好半徑的長度,??
- ????CGContextAddArcToPoint(context,?148,?68,?156,?80,?10);??
- ????CGContextStrokePath(context);//繪畫路徑??
- ??????
- ????//右??
- ????CGContextMoveToPoint(context,?160,?80);//開始坐標p1??
- ????//CGContextAddArcToPoint(CGContextRef?c,?CGFloat?x1,?CGFloat?y1,CGFloat?x2,?CGFloat?y2,?CGFloat?radius)??
- ????//x1,y1跟p1形成一條線的坐標p2,x2,y2結束坐標跟p3形成一條線的p3,radius半徑,注意,?需要算好半徑的長度,??
- ????CGContextAddArcToPoint(context,?168,?68,?176,?80,?10);??
- ????CGContextStrokePath(context);//繪畫路徑??
- ??????
- ????//右??
- ????CGContextMoveToPoint(context,?150,?90);//開始坐標p1??
- ????//CGContextAddArcToPoint(CGContextRef?c,?CGFloat?x1,?CGFloat?y1,CGFloat?x2,?CGFloat?y2,?CGFloat?radius)??
- ????//x1,y1跟p1形成一條線的坐標p2,x2,y2結束坐標跟p3形成一條線的p3,radius半徑,注意,?需要算好半徑的長度,??
- ????CGContextAddArcToPoint(context,?158,?102,?166,?90,?10);??
- ????CGContextStrokePath(context);//繪畫路徑??
- ????//注,如果還是沒弄明白怎么回事,請參考:http://donbe.blog.163.com/blog/static/138048021201052093633776/??
- ??????
- ????/*畫矩形*/??
- ????CGContextStrokeRect(context,CGRectMake(100,?120,?10,?10));//畫方框??
- ????CGContextFillRect(context,CGRectMake(120,?120,?10,?10));//填充框??
- ????//矩形,并填棄顏色??
- ????CGContextSetLineWidth(context,?2.0);//線的寬度??
- ????aColor?=?[UIColor?blueColor];//blue藍色??
- ????CGContextSetFillColorWithColor(context,?aColor.CGColor);//填充顏色??
- ????aColor?=?[UIColor?yellowColor];??
- ????CGContextSetStrokeColorWithColor(context,?aColor.CGColor);//線框顏色??
- ????CGContextAddRect(context,CGRectMake(140,?120,?60,?30));//畫方框??
- ????CGContextDrawPath(context,?kCGPathFillStroke);//繪畫路徑??
- ??????
- ????//矩形,并填棄漸變顏色??
- ????//關于顏色參考http://blog.sina.com.cn/s/blog_6ec3c9ce01015v3c.html??
- ????//http://blog.csdn.net/reylen/article/details/8622932??
- ????// 第一種填充方式,第一種方式必須導入類庫quartcore并#import?<QuartzCore/QuartzCore.h>,這個就 不屬于在context上畫,而是將層插入到view層上面。那么這里就設計到Quartz?Core?圖層編程了。??
- ????CAGradientLayer?*gradient1?=?[CAGradientLayer?layer];??
- ????gradient1.frame?=?CGRectMake(240,?120,?60,?30);??
- ????gradient1.colors?=?[NSArray?arrayWithObjects:(id)[UIColor?whiteColor].CGColor,??
- ????????????????????????(id)[UIColor?grayColor].CGColor,??
- ????????????????????????(id)[UIColor?blackColor].CGColor,??
- ????????????????????????(id)[UIColor?yellowColor].CGColor,??
- ????????????????????????(id)[UIColor?blueColor].CGColor,??
- ????????????????????????(id)[UIColor?redColor].CGColor,??
- ????????????????????????(id)[UIColor?greenColor].CGColor,??
- ????????????????????????(id)[UIColor?orangeColor].CGColor,??
- ????????????????????????(id)[UIColor?brownColor].CGColor,nil];??
- ????[self.layer?insertSublayer:gradient1?atIndex:0];??
- ????//第二種填充方式???
- ????CGColorSpaceRef?rgb?=?CGColorSpaceCreateDeviceRGB();??
- ????CGFloat?colors[]?=??
- ????{??
- ????????1,1,1,?1.00,??
- ????????1,1,0,?1.00,??
- ????????1,0,0,?1.00,??
- ????????1,0,1,?1.00,??
- ????????0,1,1,?1.00,??
- ????????0,1,0,?1.00,??
- ????????0,0,1,?1.00,??
- ????????0,0,0,?1.00,??
- ????};??
- ????CGGradientRef?gradient?=?CGGradientCreateWithColorComponents??
- ????(rgb,?colors,?NULL,?sizeof(colors)/(sizeof(colors[0])*4));//形成梯形,漸變的效果???
- ????CGColorSpaceRelease(rgb);??
- ????//畫線形成一個矩形??
- ????//CGContextSaveGState與CGContextRestoreGState的作用??
- ????/*?
- ?????CGContextSaveGState 函數的作用是將當前圖形狀態推入堆棧。之后,您對圖形狀態所做的修改會影響隨后的描畫操作,但不影響存儲在堆棧中的拷貝。在修改完成后,您可以通過 CGContextRestoreGState函數把堆棧頂部的狀態彈出,返回到之前的圖形狀態。這種推入和彈出的方式是回到之前圖形狀態的快速方法,避 免逐個撤消所有的狀態修改;這也是將某些狀態(比如裁剪路徑)恢復到原有設置的唯一方式。?
- ?????*/??
- ????CGContextSaveGState(context);??
- ????CGContextMoveToPoint(context,?220,?90);??
- ????CGContextAddLineToPoint(context,?240,?90);??
- ????CGContextAddLineToPoint(context,?240,?110);??
- ????CGContextAddLineToPoint(context,?220,?110);??
- ????CGContextClip(context);//context裁剪路徑,后續操作的路徑??
- ????//CGContextDrawLinearGradient(CGContextRef?context,CGGradientRef?gradient,?CGPoint?startPoint,?CGPoint?endPoint,CGGradientDrawingOptions?options)??
- ????//gradient漸變顏色,startPoint開始漸變的起始位置,endPoint結束坐標,options開始坐標之前or開始之后開始漸變??
- ????CGContextDrawLinearGradient(context,?gradient,CGPointMake??
- ????????????????????????????????(220,90)?,CGPointMake(240,110),??
- ????????????????????????????????kCGGradientDrawsAfterEndLocation);??
- ????CGContextRestoreGState(context);//?恢復到之前的context??
- ??????
- ????//再寫一個看看效果??
- ????CGContextSaveGState(context);??
- ????CGContextMoveToPoint(context,?260,?90);??
- ????CGContextAddLineToPoint(context,?280,?90);??
- ????CGContextAddLineToPoint(context,?280,?100);??
- ????CGContextAddLineToPoint(context,?260,?100);??
- ????CGContextClip(context);//裁剪路徑??
- ????//說白了,開始坐標和結束坐標是控制漸變的方向和形狀??
- ????CGContextDrawLinearGradient(context,?gradient,CGPointMake??
- ????????????????????????????????(260,?90)?,CGPointMake(260,?100),??
- ????????????????????????????????kCGGradientDrawsAfterEndLocation);??
- ????CGContextRestoreGState(context);//?恢復到之前的context??
- ??????
- ????//下面再看一個顏色漸變的圓??
- ????CGContextDrawRadialGradient(context,?gradient,?CGPointMake(300,?100),?0.0,?CGPointMake(300,?100),?10,?kCGGradientDrawsBeforeStartLocation);??
- ??????
- ????/*畫扇形和橢圓*/??
- ????//畫扇形,也就畫圓,只不過是設置角度的大小,形成一個扇形??
- ????aColor?=?[UIColor?colorWithRed:0?green:1?blue:1?alpha:1];??
- ????CGContextSetFillColorWithColor(context,?aColor.CGColor);//填充顏色??
- ????//以10為半徑圍繞圓心畫指定角度扇形??
- ????CGContextMoveToPoint(context,?160,?180);??
- ????CGContextAddArc(context,?160,?180,?30,??-60?*?PI?/?180,?-120?*?PI?/?180,?1);??
- ????CGContextClosePath(context);??
- ????CGContextDrawPath(context,?kCGPathFillStroke);?//繪制路徑??
- ??
- ????//畫橢圓??
- ????CGContextAddEllipseInRect(context,?CGRectMake(160,?180,?20,?8));?//橢圓??
- ????CGContextDrawPath(context,?kCGPathFillStroke);??
- ??????
- ????/*畫三角形*/??
- ????//只要三個點就行跟畫一條線方式一樣,把三點連接起來??
- ????CGPoint?sPoints[3];//坐標點??
- ????sPoints[0]?=CGPointMake(100,?220);//坐標1??
- ????sPoints[1]?=CGPointMake(130,?220);//坐標2??
- ????sPoints[2]?=CGPointMake(130,?160);//坐標3??
- ????CGContextAddLines(context,?sPoints,?3);//添加線??
- ????CGContextClosePath(context);//封起來??
- ????CGContextDrawPath(context,?kCGPathFillStroke);?//根據坐標繪制路徑??
- ??????
- ????/*畫圓角矩形*/??
- ????float?fw?=?180;??
- ????float?fh?=?280;??
- ??????
- ????CGContextMoveToPoint(context,?fw,?fh-20);??//?開始坐標右邊開始??
- ????CGContextAddArcToPoint(context,?fw,?fh,?fw-20,?fh,?10);??//?右下角角度??
- ????CGContextAddArcToPoint(context,?120,?fh,?120,?fh-20,?10);?//?左下角角度??
- ????CGContextAddArcToPoint(context,?120,?250,?fw-20,?250,?10);?//?左上角??
- ????CGContextAddArcToPoint(context,?fw,?250,?fw,?fh-20,?10);?//?右上角??
- ????CGContextClosePath(context);??
- ????CGContextDrawPath(context,?kCGPathFillStroke);?//根據坐標繪制路徑??
- ??????
- ????/*畫貝塞爾曲線*/??
- ????//二次曲線??
- ????CGContextMoveToPoint(context,?120,?300);//設置Path的起點??
- ????CGContextAddQuadCurveToPoint(context,190,?310,?120,?390);//設置貝塞爾曲線的控制點坐標和終點坐標??
- ????CGContextStrokePath(context);??
- ????//三次曲線函數??
- ????CGContextMoveToPoint(context,?200,?300);//設置Path的起點??
- ????CGContextAddCurveToPoint(context,250,?280,?250,?400,?280,?300);//設置貝塞爾曲線的控制點坐標和控制點坐標終點坐標??
- ????CGContextStrokePath(context);??
- ??????
- ??????
- ????/*圖片*/??
- ????UIImage?*image?=?[UIImage?imageNamed:@"apple.jpg"];??
- ????[image?drawInRect:CGRectMake(60,?340,?20,?20)];//在坐標中畫出圖片??
- //????[image?drawAtPoint:CGPointMake(100,?340)];//保持圖片大小在point點開始畫圖片,可以把注釋去掉看看??
- ????CGContextDrawImage(context,?CGRectMake(100,?340,?20,?20),?image.CGImage);//使用這個使圖片上下顛倒了,參考http://blog.csdn.net/koupoo/article/details/8670024??
- ??????
- //????CGContextDrawTiledImage(context,?CGRectMake(0,?0,?20,?20),?image.CGImage);//平鋪圖??
- ??
- }??
- ??
- ??
- @end??
用法:
- CustomView?*customView?=?[[CustomView?alloc]initWithFrame:CGRectMake(0,?0,?320,?self.view.frame.size.height)];??
- ????[self.view?addSubview:customView];??
ok,完成。
大家如果看過我的其它博客,會發現,這遍博客跟我的某一片博客很像,沒錯,就是http://blog.csdn.net/rhljiayou/article/details/7212620
當年寫andriod的時候寫的一遍博客。
請大家尊重一下我的勞動成功,轉載請注明原創地址!
http://blog.csdn.net/rhljiayou/article/details/9919713
版權聲明:本文為博主原創文章,未經博主允許不得轉載。