IOS用CGContextRef畫各種圖形（轉(zhuǎn)載 原創(chuàng)地址http://blog.csdn.net/rhljiayou/article/details/9919713）

首先了解一下CGContextRef:

An opaque type that represents a Quartz 2D drawing environment.

Graphics Context是圖形上下文,可以將其理解為一塊畫布,我們可以在上面進(jìn)行繪畫操作,繪制完成后,將畫布放到我們的view中顯示即可,view看作是一個(gè)畫框.

#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方法，你可以在此自定義繪畫和動(dòng)畫

-?(void)drawRect:(CGRect)rect

{

//An?opaque?type?that?represents?a?Quartz?2D?drawing?environment.

//一個(gè)不透明類型的Quartz?2D繪畫環(huán)境,相當(dāng)于一個(gè)畫布,你可以在上面任意繪畫

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為圓點(diǎn)坐標(biāo)，radius半徑，startAngle為開始的弧度，endAngle為?結(jié)束的弧度，clockwise?0為順時(shí)針，1為逆時(shí)針。

CGContextAddArc(context,?100,?20,?15,?0,?2*PI,?0);//添加一個(gè)圓

CGContextDrawPath(context,?kCGPathStroke);//繪制路徑

//填充圓，無邊框

CGContextAddArc(context,?150,?30,?30,?0,?2*PI,?0);//添加一個(gè)圓

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);//添加一個(gè)圓

//kCGPathFill填充非零繞數(shù)規(guī)則,kCGPathEOFill表示用奇偶規(guī)則,kCGPathStroke路徑,kCGPathFillStroke路徑填充,kCGPathEOFillStroke表示描線，不是填充

CGContextDrawPath(context,?kCGPathFillStroke);//繪制路徑加填充

/*畫線及孤線*/

//畫線

CGPoint?aPoints[2];//坐標(biāo)點(diǎn)

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);//繪畫路徑

//注，如果還是沒弄明白怎么回事，請(qǐng)參考：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?，這個(gè)就

不屬于在context上畫，而是將層插入到view層上面。那么這里就設(shè)計(jì)到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);

//畫線形成一個(gè)矩形

//CGContextSaveGState與CGContextRestoreGState的作用

/*

CGContextSaveGState

函數(shù)的作用是將當(dāng)前圖形狀態(tài)推入堆棧。之后，您對(duì)圖形狀態(tài)所做的修改會(huì)影響隨后的描畫操作，但不影響存儲(chǔ)在堆棧中的拷貝。在修改完成后，您可以通過

CGContextRestoreGState函數(shù)把堆棧頂部的狀態(tài)彈出，返回到之前的圖形狀態(tài)。這種推入和彈出的方式是回到之前圖形狀態(tài)的快速方法，避

免逐個(gè)撤消所有的狀態(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

//再寫一個(gè)看看效果

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

//下面再看一個(gè)顏色漸變的圓

CGContextDrawRadialGradient(context,?gradient,?CGPointMake(300,?100),?0.0,?CGPointMake(300,?100),?10,?kCGGradientDrawsBeforeStartLocation);

/*畫扇形和橢圓*/

//畫扇形，也就畫圓，只不過是設(shè)置角度的大小，形成一個(gè)扇形

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);

/*畫三角形*/

//只要三個(gè)點(diǎn)就行跟畫一條線方式一樣，把三點(diǎn)連接起來

CGPoint?sPoints[3];//坐標(biāo)點(diǎn)

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的起點(diǎn)

CGContextAddQuadCurveToPoint(context,190,?310,?120,?390);//設(shè)置貝塞爾曲線的控制點(diǎn)坐標(biāo)和終點(diǎn)坐標(biāo)

CGContextStrokePath(context);

//三次曲線函數(shù)

CGContextMoveToPoint(context,?200,?300);//設(shè)置Path的起點(diǎn)

CGContextAddCurveToPoint(context,250,?280,?250,?400,?280,?300);//設(shè)置貝塞爾曲線的控制點(diǎn)坐標(biāo)和控制點(diǎn)坐標(biāo)終點(diǎn)坐標(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點(diǎn)開始畫圖片，可以把注釋去掉看看

CGContextDrawImage(context,?CGRectMake(100,?340,?20,?20),?image.CGImage);//使用這個(gè)使圖片上下顛倒了，參考http://blog.csdn.net/koupoo/article/details/8670024

//????CGContextDrawTiledImage(context,?CGRectMake(0,?0,?20,?20),?image.CGImage);//平鋪圖

}

@end

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

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

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