1.
获得图形上下文
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];
}