前言
iOS系統本身提供了兩套繪圖的框架，即UIBezierPath 和 Core Graphics。而前者所屬UIKit，其實是對Core Graphics框架關于path的進一步封裝，所以使用起來比較簡單。但是畢竟Core Graphics更接近底層，所以它更加強大。
CoreGraphics,也稱為Quartz 2D 是UIKit下的主要繪圖系統，頻繁的用于繪制自定義視圖。Core Graphics是高度集成于UIView和其他UIKit部分的。Core Graphics數據結構和函數可以通過前綴CG來識別。
//宏定義
#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 為圓的中心點
//畫圓
- (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]); //設置陰影
CGContextSetFillColorWithColor(ctx, [UIColor yellowColor].CGColor);
CGContextFillPath(ctx); //only填充內容顏色
CGContextSetStrokeColorWithColor(ctx, [UIColor redColor].CGColor);
CGContextSetLineWidth(ctx, 10);
// CGContextStrokePath(ctx); //only填充邊線顏色
// CGContextDrawPath(ctx, kCGPathFillStroke); //根據mode ，選擇填充模式
}
畫橢圓
x，y 為最左邊點
//畫橢圓
-(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);
}
畫不規則圖形
- (void)drawQuadCurve1 { //以兩個點為control點，畫線
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); // 起點和終點圓角
CGContextStrokePath(ctx); //only填充邊線顏色
}
- (void)drawQuadCurve2 {//以一個點為control點，畫線
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); // 起點和終點圓角
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);
}
擴散性漸變色
- (void)drawdrawRadialGradientWithRect:(CGRect)rect
{
//先創造一個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個參數：
Color Space:和上面一樣
顏色分量的數組：這個數組必須包含CGFloat類型的紅、綠、藍和alpha值。數組中元素的數量和接下來兩個參數密切。從本質來講，你必須讓這個數組包含足夠的值，用來指定第四個參數中位置的數量。所以如果你需要兩個位置（起點和終點），那么你必須為數組提供兩種顏色。
位置數組：顏色數組中各個顏色的位置，此參數控制該漸變從一種顏色過渡到另一種顏色的速度有多快。
位置的數量：這個參數指明了我們需要多少顏色和位置。
例如：
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
注：本文只為學習總結之用。
學習引用：http://www.lxweimin.com/p/bbb2cc485a45
