首先了解一下CGContextRef:
An opaque type that represents a Quartz 2D drawing environment.
Graphics Context是圖形上下文,可以將其理解為一塊畫布,我們可以在上面進(jìn)行繪畫操作,繪制完成后,將畫布放到我們的view中顯示即可,view看作是一個畫框.
#import
#import?
#define?PI?3.14159265358979323846
@interface?CustomView?:?UIView
@end
#import "CustomView.h"
@implementation?CustomView
-?(id)initWithFrame:(CGRect)frame
{
self?=?[super?initWithFrame:frame];
if(self)?{
}
returnself;
}
//?覆蓋drawRect方法雅宾，你可以在此自定義繪畫和動畫
-?(void)drawRect:(CGRect)rect
{
//An?opaque?type?that?represents?a?Quartz?2D?drawing?environment.
//一個不透明類型的Quartz?2D繪畫環(huán)境,相當(dāng)于一個畫布,你可以在上面任意繪畫
CGContextRef?context?=?UIGraphicsGetCurrentContext();
/*寫文字*/
CGContextSetRGBFillColor?(context,??1,?0,?0,?1.0);//設(shè)置填充顏色
UIFont??*font?=?[UIFont?boldSystemFontOfSize:15.0];//設(shè)置
[@"畫圓："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為圓點坐標(biāo)竟秫，radius半徑，startAngle為開始的弧度额各，endAngle為?結(jié)束的弧度，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填充非零繞數(shù)規(guī)則,kCGPathEOFill表示用奇偶規(guī)則,kCGPathStroke路徑,kCGPathFillStroke路徑填充,kCGPathEOFillStroke表示描線，不是填充
CGContextDrawPath(context,?kCGPathFillStroke);//繪制路徑加填充
/*畫線及孤線*/
//畫線
CGPoint?aPoints[2];//坐標(biāo)點
aPoints[0]?=CGPointMake(100,?80);//坐標(biāo)1
aPoints[1]?=CGPointMake(130,?80);//坐標(biāo)2
//CGContextAddLines(CGContextRef?c,?const?CGPoint?points[],size_t?count)
//points[]坐標(biāo)數(shù)組揪罕，和count大小
CGContextAddLines(context,?aPoints,?2);//添加線
CGContextDrawPath(context,?kCGPathStroke);//根據(jù)坐標(biāo)繪制路徑
//畫笑臉弧線
//左
CGContextSetRGBStrokeColor(context,?0,?0,?1,?1);//改變畫筆顏色
CGContextMoveToPoint(context,?140,?80);//開始坐標(biāo)p1
//CGContextAddArcToPoint(CGContextRef?c,?CGFloat?x1,?CGFloat?y1,CGFloat?x2,?CGFloat?y2,?CGFloat?radius)
//x1,y1跟p1形成一條線的坐標(biāo)p2梯码，x2,y2結(jié)束坐標(biāo)跟p3形成一條線的p3,radius半徑,注意,?需要算好半徑的長度,
CGContextAddArcToPoint(context,?148,?68,?156,?80,?10);
CGContextStrokePath(context);//繪畫路徑
//右
CGContextMoveToPoint(context,?160,?80);//開始坐標(biāo)p1
//CGContextAddArcToPoint(CGContextRef?c,?CGFloat?x1,?CGFloat?y1,CGFloat?x2,?CGFloat?y2,?CGFloat?radius)
//x1,y1跟p1形成一條線的坐標(biāo)p2宝泵，x2,y2結(jié)束坐標(biāo)跟p3形成一條線的p3,radius半徑,注意,?需要算好半徑的長度,
CGContextAddArcToPoint(context,?168,?68,?176,?80,?10);
CGContextStrokePath(context);//繪畫路徑
//右
CGContextMoveToPoint(context,?150,?90);//開始坐標(biāo)p1
//CGContextAddArcToPoint(CGContextRef?c,?CGFloat?x1,?CGFloat?y1,CGFloat?x2,?CGFloat?y2,?CGFloat?radius)
//x1,y1跟p1形成一條線的坐標(biāo)p2，x2,y2結(jié)束坐標(biāo)跟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藍(lán)色
CGContextSetFillColorWithColor(context,?aColor.CGColor);//填充顏色
aColor?=?[UIColor?yellowColor];
CGContextSetStrokeColorWithColor(context,?aColor.CGColor);//線框顏色
CGContextAddRect(context,CGRectMake(140,?120,?60,?30));//畫方框
CGContextDrawPath(context,?kCGPathFillStroke);//繪畫路徑
//矩形鳄抒，并填棄漸變顏色
//關(guān)于顏色參考http://blog.sina.com.cn/s/blog_6ec3c9ce01015v3c.html
//http://blog.csdn.net/reylen/article/details/8622932
//
第一種填充方式闯捎，第一種方式必須導(dǎo)入類庫quartcore并#import?，這個就
不屬于在context上畫许溅，而是將層插入到view層上面瓤鼻。那么這里就設(shè)計到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
函數(shù)的作用是將當(dāng)前圖形狀態(tài)推入堆棧茬祷。之后，您對圖形狀態(tài)所做的修改會影響隨后的描畫操作并蝗，但不影響存儲在堆棧中的拷貝祭犯。在修改完成后，您可以通過
CGContextRestoreGState函數(shù)把堆棧頂部的狀態(tài)彈出滚停，返回到之前的圖形狀態(tài)沃粗。這種推入和彈出的方式是回到之前圖形狀態(tài)的快速方法，避
免逐個撤消所有的狀態(tài)修改键畴；這也是將某些狀態(tài)（比如裁剪路徑）恢復(fù)到原有設(shè)置的唯一方式陪每。
*/
CGContextSaveGState(context);
CGContextMoveToPoint(context,?220,?90);
CGContextAddLineToPoint(context,?240,?90);
CGContextAddLineToPoint(context,?240,?110);
CGContextAddLineToPoint(context,?220,?110);
CGContextClip(context);//context裁剪路徑,后續(xù)操作的路徑
//CGContextDrawLinearGradient(CGContextRef?context,CGGradientRef?gradient,?CGPoint?startPoint,?CGPoint?endPoint,CGGradientDrawingOptions?options)
//gradient漸變顏色,startPoint開始漸變的起始位置,endPoint結(jié)束坐標(biāo),options開始坐標(biāo)之前or開始之后開始漸變
CGContextDrawLinearGradient(context,?gradient,CGPointMake
(220,90)?,CGPointMake(240,110),
kCGGradientDrawsAfterEndLocation);
CGContextRestoreGState(context);//?恢復(fù)到之前的context
//再寫一個看看效果
CGContextSaveGState(context);
CGContextMoveToPoint(context,?260,?90);
CGContextAddLineToPoint(context,?280,?90);
CGContextAddLineToPoint(context,?280,?100);
CGContextAddLineToPoint(context,?260,?100);
CGContextClip(context);//裁剪路徑
//說白了，開始坐標(biāo)和結(jié)束坐標(biāo)是控制漸變的方向和形狀
CGContextDrawLinearGradient(context,?gradient,CGPointMake
(260,?90)?,CGPointMake(260,?100),
kCGGradientDrawsAfterEndLocation);
CGContextRestoreGState(context);//?恢復(fù)到之前的context
//下面再看一個顏色漸變的圓
CGContextDrawRadialGradient(context,?gradient,?CGPointMake(300,?100),?0.0,?CGPointMake(300,?100),?10,?kCGGradientDrawsBeforeStartLocation);
/*畫扇形和橢圓*/
//畫扇形镰吵，也就畫圓，只不過是設(shè)置角度的大小挂签，形成一個扇形
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];//坐標(biāo)點
sPoints[0]?=CGPointMake(100,?220);//坐標(biāo)1
sPoints[1]?=CGPointMake(130,?220);//坐標(biāo)2
sPoints[2]?=CGPointMake(130,?160);//坐標(biāo)3
CGContextAddLines(context,?sPoints,?3);//添加線
CGContextClosePath(context);//封起來
CGContextDrawPath(context,?kCGPathFillStroke);//根據(jù)坐標(biāo)繪制路徑
/*畫圓角矩形*/
floatfw?=?180;
floatfh?=?280;
CGContextMoveToPoint(context,?fw,?fh-20);//?開始坐標(biāo)右邊開始
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);//根據(jù)坐標(biāo)繪制路徑
/*畫貝塞爾曲線*/
//二次曲線
CGContextMoveToPoint(context,?120,?300);//設(shè)置Path的起點
CGContextAddQuadCurveToPoint(context,190,?310,?120,?390);//設(shè)置貝塞爾曲線的控制點坐標(biāo)和終點坐標(biāo)
CGContextStrokePath(context);
//三次曲線函數(shù)
CGContextMoveToPoint(context,?200,?300);//設(shè)置Path的起點
CGContextAddCurveToPoint(context,250,?280,?250,?400,?280,?300);//設(shè)置貝塞爾曲線的控制點坐標(biāo)和控制點坐標(biāo)終點坐標(biāo)
CGContextStrokePath(context);
/*圖片*/
UIImage?*image?=?[UIImage?imageNamed:@"apple.jpg"];
[image?drawInRect:CGRectMake(60,?340,?20,?20)];//在坐標(biāo)中畫出圖片
//????[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
