前言
iOS系統(tǒng)本身提供了兩套繪圖的框架，即UIBezierPath 和 Core Graphics。而前者所屬UIKit，其實(shí)是對(duì)Core Graphics框架關(guān)于path的進(jìn)一步封裝，所以使用起來比較簡(jiǎn)單。但是畢竟Core Graphics更接近底層，所以它更加強(qiáng)大。
CoreGraphics,也稱為Quartz 2D 是UIKit下的主要繪圖系統(tǒng)，頻繁的用于繪制自定義視圖。Core Graphics是高度集成于UIView和其他UIKit部分的。Core Graphics數(shù)據(jù)結(jié)構(gòu)和函數(shù)可以通過前綴CG來識(shí)別。
//宏定義
#define Width [[UIScreen mainScreen] bounds].size.width
#define Height [[UIScreen mainScreen] bounds].size.height
繪制矩形
//畫矩形
- (void)drawRectangle {
CGRect rectangle = CGRectMake(Width/2-80, 400, 160, 60);
CGContextRef ctx = UIGraphicsGetCurrentContext();
CGContextAddRect(ctx, rectangle);
CGContextSetFillColorWithColor(ctx, [UIColor lightGrayColor].CGColor);
CGContextFillPath(ctx);
}
畫圓
x,y 為圓的中心點(diǎn)
//畫圓
- (void)drawCircleAtX:(float)x Y:(float)y {
CGContextRef ctx = UIGraphicsGetCurrentContext();
CGContextAddArc(ctx, x, y, 150, 0, 2 * M_PI, 1);
CGContextSetShadowWithColor(ctx, CGSizeMake(10, 10), 20.0f, [[UIColor grayColor] CGColor]); //設(shè)置陰影
CGContextSetFillColorWithColor(ctx, [UIColor yellowColor].CGColor);
CGContextFillPath(ctx); //only填充內(nèi)容顏色
CGContextSetStrokeColorWithColor(ctx, [UIColor redColor].CGColor);
CGContextSetLineWidth(ctx, 10);
// CGContextStrokePath(ctx); //only填充邊線顏色
// CGContextDrawPath(ctx, kCGPathFillStroke); //根據(jù)mode ，選擇填充模式
}
畫橢圓
x，y 為最左邊點(diǎn)
//畫橢圓
-(void)drawEllipseAtX:(float)x Y:(float)y {
CGContextRef ctx = UIGraphicsGetCurrentContext();
CGContextAddEllipseInRect(ctx, CGRectMake(x, y, 60, 30));
CGContextSetFillColorWithColor(ctx, [UIColor redColor].CGColor);
CGContextFillPath(ctx);
}
畫多邊形
//畫多邊形
-(void)drawTriangle{
CGContextRef ctx = UIGraphicsGetCurrentContext();
CGContextMoveToPoint(ctx, Width/2, 10);
CGContextAddLineToPoint(ctx,Width/2-30, 60);
CGContextAddLineToPoint(ctx,Width/2+30, 60);
CGContextClosePath(ctx);
CGContextSetFillColorWithColor(ctx, [UIColor blackColor].CGColor);
CGContextFillPath(ctx);
}
畫不規(guī)則圖形
- (void)drawQuadCurve1 { //以兩個(gè)點(diǎn)為control點(diǎn)，畫線
CGContextRef ctx = UIGraphicsGetCurrentContext();
CGContextMoveToPoint(ctx, Width/2-80, 270);
CGContextAddCurveToPoint(ctx, Width/2-50, 340, Width/2+50, 340, Width/2+80, 270);
CGContextSetStrokeColorWithColor(ctx, [UIColor redColor].CGColor);
CGContextSetLineWidth(ctx, 5);
CGContextSetLineCap(ctx, kCGLineCapRound); // 起點(diǎn)和終點(diǎn)圓角
CGContextStrokePath(ctx); //only填充邊線顏色
}
- (void)drawQuadCurve2 {//以一個(gè)點(diǎn)為control點(diǎn)，畫線
CGContextRef ctx = UIGraphicsGetCurrentContext();
CGContextMoveToPoint(ctx, Width/2+5, 180);
CGContextAddCurveToPoint(ctx, Width/2-5, 220, Width/2+70, 240, Width/2, 260);
CGContextSetStrokeColorWithColor(ctx, [UIColor brownColor].CGColor);
CGContextSetLineWidth(ctx, 5);
CGContextSetLineCap(ctx, kCGLineCapRound); // 起點(diǎn)和終點(diǎn)圓角
CGContextStrokePath(ctx); //only填充邊線顏色
}
線性漸變色
線性漸變主要 startshine = CGPointMake(Width/2,350+60);
endshine = CGPointMake(Width/2,350);來決定方向
漸變都可以放到自定義的圖畫中
-(void)draw{
CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
NSArray* gradientColors = [NSArray arrayWithObjects:
(id)[UIColor whiteColor].CGColor,
(id)[UIColor purpleColor].CGColor, nil];
CGFloat gradientLocations[] = {0, 1};
CGGradientRef gradient = CGGradientCreateWithColors(colorSpace,
(__bridge CFArrayRef)gradientColors,
gradientLocations);
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSaveGState(context);
CGContextMoveToPoint(context, Width/2, 350);
CGContextAddArc(context, Width/2, 350, 50, 1.04 , 2.09 , 0);
CGContextClosePath(context);
CGContextClip(context);
CGPoint endshine;
CGPoint startshine;
startshine = CGPointMake(Width/2,350+60);
endshine = CGPointMake(Width/2,350);
CGContextDrawLinearGradient(context,gradient , startshine, endshine, 0);
CGContextRestoreGState(context);
}
擴(kuò)散性漸變色
- (void)drawdrawRadialGradientWithRect:(CGRect)rect
{
//先創(chuàng)造一個(gè)CGGradientRef,顏色是白,黑,location分別是0,1
CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
NSArray* gradientColors = [NSArray arrayWithObjects:
(id)[UIColor whiteColor].CGColor,
(id)[UIColor blackColor].CGColor, nil];
CGFloat gradientLocations[] = {0, 1};
CGGradientRef gradient = CGGradientCreateWithColors(colorSpace,
(__bridge CFArrayRef)gradientColors,
gradientLocations);
CGPoint startCenter = CGPointMake(CGRectGetMidX(rect), CGRectGetMidY(rect));
CGFloat radius = MAX(CGRectGetHeight(rect), CGRectGetWidth(rect));
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextAddRect(context, rect);
CGContextClip(context);
CGContextDrawRadialGradient(context, gradient,
startCenter, 0,
startCenter, radius,
0);
CGGradientRelease(gradient);
CGColorSpaceRelease(colorSpace);
}
CGGradientCreateWithColorComponents包含以下4個(gè)參數(shù)：
Color Space:和上面一樣
顏色分量的數(shù)組：這個(gè)數(shù)組必須包含CGFloat類型的紅、綠、藍(lán)和alpha值。數(shù)組中元素的數(shù)量和接下來兩個(gè)參數(shù)密切。從本質(zhì)來講，你必須讓這個(gè)數(shù)組包含足夠的值，用來指定第四個(gè)參數(shù)中位置的數(shù)量。所以如果你需要兩個(gè)位置（起點(diǎn)和終點(diǎn)），那么你必須為數(shù)組提供兩種顏色。
位置數(shù)組：顏色數(shù)組中各個(gè)顏色的位置，此參數(shù)控制該漸變從一種顏色過渡到另一種顏色的速度有多快。
位置的數(shù)量：這個(gè)參數(shù)指明了我們需要多少顏色和位置。
例如：
CGGradientRef gradient = CGGradientCreateWithColorComponents(colorSpace, (CGFloat[]){
0.8, 0.2, 0.2, 1.0,
0.2, 0.8, 0.2, 1.0,
0.2, 0.2, 0.8, 1.0
}, (CGFloat[]){
0.0, 0.5, 1.0
}, 3);
___________________________________________________________
同等效果
NSArray* gradientColors = [NSArray arrayWithObjects:
(id)[UIColor yellowColor].CGColor,
(id)[UIColor blueColor].CGColor,
(id)[UIColor redColor].CGColor,
nil];
CGFloat gradientLocations[] = {0, 0.5,1};
CGGradientRef gradient = CGGradientCreateWithColors(colorSpace,
(__bridge CFArrayRef)gradientColors,
gradientLocations);
最終得到效果
效果圖.png
注：本文只為學(xué)習(xí)總結(jié)之用。
學(xué)習(xí)引用：http://www.itdecent.cn/p/bbb2cc485a45
