1.參考全面的博客：Bitmap Graphics Context
2.core graphic這個框架能實現的基本功能1.基本圖形繪制
* 線段（線寬、線段樣式）
* 矩形（空心、實心、顏色）
* 三角形、梯形等形狀
* 橢圓/圓
* 圓弧
* 文字繪制
* 圖片繪制（pattern）
* 圖形上下文棧
2.練習（畫人）
3.模仿UIImageView
4.自定義checkbox
5.圖片裁剪
6.圖片水印
7.條紋背景
8.截圖
9.結尾總結，刷真的方法是setneeddisplay這個方法，也就是刷新的功能
10.如果有creat這個詞就需要進行釋放用cfrelease( )這個方法。
3.步驟
?在drawRect:方法中取得上下文后，就可以繪制東西到view上??View內部有個layer（圖層）屬性，drawRect:方法中取得的是一個Layer Graphics Context，因此，繪制的東西其實是繪制到view的layer上去了?
?View之所以能顯示東西，完全是因為它內部的layer1.獲得圖形上下文CGContextRef ctx = UIGraphicsGetCurrentContext();
?2.拼接路徑（下面代碼是搞一條線段）CGContextMoveToPoint(ctx, 10, 10);
CGContextAddLineToPoint(ctx, 100, 100);
3.繪制路徑CGContextStrokePath(ctx); // CGContextFillPath(ctx);
?新建一個起點void CGContextMoveToPoint(CGContextRef c, CGFloat x,CGFloat y)
?添加新的線段到某個點void CGContextAddLineToPoint(CGContextRef c, CGFloatx, CGFloat y)
?添加一個矩形void CGContextAddRect(CGContextRef c, CGRect rect)
?添加一個橢圓void CGContextAddEllipseInRect(CGContextRef context,CGRect rect)
?添加一個圓弧void CGContextAddArc(CGContextRef c, CGFloat x,CGFloat y,
CGFloat radius, CGFloat startAngle, CGFloat endAngle, intclockwise)
?Mode參數決定繪制的模式void CGContextDrawPath(CGContextRef c,CGPathDrawingMode mode)
?繪制空心路徑void CGContextStrokePath(CGContextRef c)
?繪制實心路徑void CGContextFillPath(CGContextRef c)
提示：一般以CGContextDraw、CGContextStroke、CGContextFill開頭的函數，都是用來繪制路徑的
?將當前的上下文copy一份,保存到棧頂(那個棧叫做”圖形上下文棧”)void CGContextSaveGState(CGContextRef c)
?將棧頂的上下文出棧,替換掉當前的上下文
void CGContextRestoreGState(CGContextRef c)
4.具體例子
- (void)drawRect:(CGRect)rect
{
CGContextRef ctx = UIGraphicsGetCurrentContext();
CGContextSaveGState(ctx);
CGContextRotateCTM(ctx, M_PI_4 * 0.3);
CGContextScaleCTM(ctx, 0.5, 0.5);
CGContextTranslateCTM(ctx, 0, 150);
CGContextAddRect(ctx, CGRectMake(10, 10, 50, 50));
CGContextStrokePath(ctx);
CGContextRestoreGState(ctx);
CGContextAddEllipseInRect(ctx, CGRectMake(100, 100, 100, 100));
CGContextMoveToPoint(ctx, 100, 100);
CGContextAddLineToPoint(ctx, 200, 250);
// 矩陣操作
// CGContextScaleCTM(ctx, 0.5, 0.5);
CGContextStrokePath(ctx);
}
- (void)drawRect:(CGRect)rect
{
// 1.獲得上下文
CGContextRef ctx = UIGraphicsGetCurrentContext();
// 將ctx拷貝一份放到棧中
CGContextSaveGState(ctx);
// 設置繪圖狀態
CGContextSetLineWidth(ctx, 10);
[[UIColor redColor] set];
CGContextSetLineCap(ctx, kCGLineCaPRound);
// 第1根線
CGContextMoveToPoint(ctx, 50, 50);
CGContextAddLineToPoint(ctx, 120, 190);
CGContextStrokePath(ctx);
// 將棧頂的上下文出棧,替換當前的上下文
CGContextRestoreGState(ctx);
// 第2根線
CGContextMoveToPoint(ctx, 10, 70);
CGContextAddLineToPoint(ctx, 220, 290);
CGContextStrokePath(ctx);
// CGContextDrawPath(ctx, kCGPathStroke);
}
#import "MJHumanView.h"
@implementation MJHumanView
- (void)drawRect:(CGRect)rect
{
// 1.上下文
CGContextRef ctx = UIGraphicsGetCurrentContext();
// 2.身體
drawBody(ctx, rect);
// 3.嘴(微笑)
drawZui(ctx, rect);
// 3.畫眼睛
drawEyes(ctx, rect);
}
void drawEyes(CGContextRef ctx, CGRect rect)
{
// 1.黑色綁帶
CGFloat startX = rect.size.width * 0.5 - MJRadius;
CGFloat startY = MJTopY;
CGContextMoveToPoint(ctx, startX, startY);
CGFloat endX = startX + 2 * MJRadius;
CGFloat endY = startY;
CGContextAddLineToPoint(ctx, endX, endY);
CGContextSetLineWidth(ctx, 15);
[[UIColor blackColor] set];
// 繪制線條
CGContextStrokePath(ctx);
// 2.最外圈的鏡框
[MJColor(61, 62, 66) set];
CGFloat kuangRadius = MJRadius * 0.4;
CGFloat kuangY = startY;
CGFloat kuangX = rect.size.width * 0.5 - kuangRadius;
CGContextAddArc(ctx, kuangX, kuangY, kuangRadius, 0, M_PI * 2, 0);
CGContextFillPath(ctx);
// 3.里面的白色框
[[UIColor whiteColor] set];
CGFloat whiteRadius = kuangRadius * 0.7;
CGFloat whiteX = kuangX;
CGFloat whiteY = kuangY;
CGContextAddArc(ctx, whiteX, whiteY, whiteRadius, 0, M_PI * 2, 0);
CGContextFillPath(ctx);
}
void drawZui(CGContextRef ctx, CGRect rect)
{
// 中間的控制點
CGFloat controlX = rect.size.width * 0.5;
CGFloat controlY = rect.size.height * 0.4;
// 當前點
CGFloat marginX = 20;
CGFloat marginY = 10;
CGFloat currentX = controlX - marginX;
CGFloat currentY = controlY - marginY;
CGContextMoveToPoint(ctx, currentX, currentY);
// 結束點
CGFloat endX = controlX + marginX;
CGFloat endY = currentY;
// 貝塞爾曲線
CGContextAddQuadCurveToPoint(ctx, controlX, controlY, endX, endY);
// 設置顏色
[[UIColor blackColor] set];
// 渲染
CGContextStrokePath(ctx);
}
void drawBody(CGContextRef ctx, CGRect rect)
{
// 上半圓
CGFloat topX = rect.size.width * 0.5;
CGFloat topY = MJTopY;
CGFloat topRadius = MJRadius;
CGContextAddArc(ctx, topX, topY, topRadius, 0, M_PI, 1);
// 向下延伸
CGFloat middleX = topX - topRadius;
CGFloat middleH = 100; // 中間身體的高度
CGFloat middleY = topY + middleH;
CGContextAddLineToPoint(ctx, middleX, middleY);
// 下半圓
CGFloat bottomX = topX;
CGFloat bottomY = middleY;
CGFloat bottomRadius = topRadius;
CGContextAddArc(ctx, bottomX, bottomY, bottomRadius, M_PI, 0, 1);
// 合并路徑
CGContextClosePath(ctx);
// 設置顏色
[MJColor(252, 218, 0) set];
// 利用填充方式畫出之前的路徑
CGContextFillPath(ctx);
}
- (void)drawRect:(CGRect)rect
{
// Drawing code
// 1.獲得圖形上下文
CGContextRef ctx = UIGraphicsGetCurrentContext();
// 2.拼接圖形(路徑)
// 設置線段寬度
CGContextSetLineWidth(ctx, 10);
// 設置線段頭尾部的樣式
CGContextSetLineCap(ctx, kCGLineCapRound);
// 設置線段轉折點的樣式
CGContextSetLineJoin(ctx, kCGLineJoinRound);
// 設置顏色
CGContextSetRGBStrokeColor(ctx, 1, 0, 0, 1);
// 設置一個起點
CGContextMoveToPoint(ctx, 10, 10);
// 添加一條線段到(100, 100)
CGContextAddLineToPoint(ctx, 100, 100);
// 渲染一次
CGContextStrokePath(ctx);
// 設置顏色
CGContextSetRGBStrokeColor(ctx, 0, 0, 1, 1);
// 設置一個起點
CGContextMoveToPoint(ctx, 200, 190);
// 添加一條線段到(150, 40)
CGContextAddLineToPoint(ctx, 150, 40);
CGContextAddLineToPoint(ctx, 120, 60);
// 3.渲染顯示到view上面
CGContextStrokePath(ctx);
}
void draw4Rect()
{
// 1.獲得上下文
CGContextRef ctx = UIGraphicsGetCurrentContext();
// 2.畫矩形
CGContextAddRect(ctx, CGRectMake(10, 10, 150, 100));
// set : 同時設置為實心和空心顏色
// setStroke : 設置空心顏色
// setFill : 設置實心顏色
[[UIColor whiteColor] set];
// CGContextSetRGBFillColor(ctx, 0, 0, 1, 1);
// 3.繪制圖形
CGContextFillPath(ctx);
}
void drawTriangle()
{
// 1.獲得上下文
CGContextRef ctx = UIGraphicsGetCurrentContext();
// 2.畫三角形
CGContextMoveToPoint(ctx, 0, 0);
CGContextAddLineToPoint(ctx, 100, 100);
CGContextAddLineToPoint(ctx, 150, 80);
// 關閉路徑(連接起點和最后一個點)
CGContextClosePath(ctx);
//
CGContextSetRGBStrokeColor(ctx, 0, 1, 0, 1);
// 3.繪制圖形
CGContextStrokePath(ctx);
}
- (void)drawRect:(CGRect)rect
{
// 1.獲得上下文
CGContextRef ctx = UIGraphicsGetCurrentContext();
// 2.畫1/4圓
CGContextMoveToPoint(ctx, 100, 100);
CGContextAddLineToPoint(ctx, 100, 150);
CGContextAddArc(ctx, 100, 100, 50, -M_PI_2, M_PI, 1);
CGContextClosePath(ctx);
[[UIColor redColor] set];
// 3.顯示所繪制的東西
CGContextFillPath(ctx);
}
void drawArc()
{
// 1.獲得上下文
CGContextRef ctx = UIGraphicsGetCurrentContext();
// 2.畫圓弧
// x/y : 圓心
// radius : 半徑
// startAngle : 開始角度
// endAngle : 結束角度
// clockwise : 圓弧的伸展方向(0:順時針, 1:逆時針)
CGContextAddArc(ctx, 100, 100, 50, M_PI_2, M_PI, 0);
// 3.顯示所繪制的東西
CGContextFillPath(ctx);
}
void drawCircle()
{
// 1.獲得上下文
CGContextRef ctx = UIGraphicsGetCurrentContext();
// 2.畫圓
CGContextAddEllipseInRect(ctx, CGRectMake(50, 10, 100, 100));
CGContextSetLineWidth(ctx, 10);
// 3.顯示所繪制的東西
CGContextStrokePath(ctx);
}
- (void)drawRect:(CGRect)rect
{
drawImage();
}
void drawImage()
{
// 1.取得圖片
UIImage *image = [UIImage imageNamed:@"me"];
// 2.畫
// [image drawAtPoint:CGPointMake(50, 50)];
// [image drawInRect:CGRectMake(0, 0, 150, 150)];
[image drawaspatternInRect:CGRectMake(0, 0, 200, 200)];
// 3.畫文字
NSString *str = @"為xxx所畫";
[str drawInRect:CGRectMake(0, 180, 100, 30) withAttributes:nil];
}
void drawText()
{
// 1.獲得上下文
CGContextRef ctx = UIGraphicsGetCurrentContext();
// 2.畫矩形
CGRect cubeRect = CGRectMake(50, 50, 100, 100);
CGContextAddRect(ctx, cubeRect);
// 3.顯示所繪制的東西
CGContextFillPath(ctx);
// 4.畫文字
NSString *str = @"哈哈哈哈Good morning hello hi hi hi hi";
// [str drawAtPoint:CGPointZero withAttributes:nil];
NSMutableDictionary *attrs = [NSMutableDictionary dictionary];
// NSForegroundColorAttributeName : 文字顏色
// NSFontAttributeName : 字體
attrs[NSForegroundColorAttributeName] = [UIColor redColor];
attrs[NSFontAttributeName] = [UIFont systemFontOfSize:50];
[str drawInRect:cubeRect withAttributes:attrs];
}
