1、自定义view的步骤
新建一个类,继承自UIView
实现- (void)drawRect:(CGRect)rect方法,然后在这个方法中
取得跟当前view相关联的图形上下文
绘制相应的图形内容
利用图形上下文将绘制的所有内容渲染显示到view上面
2、Quartz2D绘图的代码步骤
获得图形上下文
CGContextRef ctx = UIGraphicsGetCurrentContext();拼接路径(下面代码是搞一条线段)
CGContextMoveToPoint(ctx, 10, 10);
CGContextAddLineToPoint(ctx, 100, 100);绘制路径
CGContextStrokePath(ctx); // CGContextFillPath(ctx);
3、常用拼接路径函数
新建一个起点
void CGContextMoveToPoint(CGContextRef c, CGFloat x, CGFloat y);添加新的线段到某个点
void CGContextAddLineToPoint(CGContextRef c, CGFloat x, 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, int clockwise);
4、常用绘制路径函数
Mode参数决定绘制的模式
void CGContextDrawPath(CGContextRef c, CGPathDrawingMode mode)绘制空心路径
void CGContextStrokePath(CGContextRef c)绘制实心路径
void CGContextFillPath(CGContextRef c)提示:一般以CGContextDraw、CGContextStroke、CGContextFill开头的函数,都是用来绘制路径的
5、图形上下文栈的操作
将当前的上下文copy一份,保存到栈顶(那个栈叫做”图形上下文栈”)
void CGContextSaveGState(CGContextRef c)将栈顶的上下文出栈,替换掉当前的上下文
void CGContextRestoreGState(CGContextRef c)
6、代码实例
- (void)drawRect:(CGRect)rect
{
// Drawing code
// 1.获得图形上下文
CGContextRef ctxR = UIGraphicsGetCurrentContext();
// 2.拼接图形(路径)
// 设置线段宽度
CGContextSetLineWidth(ctxR, 10);
// 设置线段头尾部的样式
/**
kCGLineCapButt,
kCGLineCapRound, //圆角
kCGLineCapSquare
*/
CGContextSetLineCap(ctxR, kCGLineCapRound);
// 设置线段转折点的样式
/**
kCGLineJoinMiter,
kCGLineJoinRound, //圆角
kCGLineJoinBevel
*/
CGContextSetLineJoin(ctxR, kCGLineJoinRound);
/** 第1根线段 **/
// 设置颜色
CGContextSetRGBStrokeColor(ctxR, 1, 0, 0, 1);
// 设置一个起点
CGContextMoveToPoint(ctxR, 10, 10);
// 添加一条线段到(100, 100)
CGContextAddLineToPoint(ctxR, 100, 100);
// 渲染一次
CGContextStrokePath(ctxR);
/** 第2根线段 **/
// 设置颜色
CGContextSetRGBStrokeColor(ctxR, 0, 0, 1, 1);
// 设置一个起点
CGContextMoveToPoint(ctxR, 200, 190);
// 添加一条线段到(150, 40)
CGContextAddLineToPoint(ctxR, 150, 40);
CGContextAddLineToPoint(ctxR, 120, 60);
// 3.渲染显示到view上面
CGContextStrokePath(ctxR);
}
- (void)drawRect:(CGRect)rect
{
drawForRect();
}
/**
* 画四边形
*/
void drawForRect()
{
// 1.获得上下文
CGContextRef ctxR = UIGraphicsGetCurrentContext();
// 2.画矩形
CGContextAddRect(ctxR, CGRectMake(10, 10, 150, 100));
// set : 同时设置为实心和空心颜色
// setStroke : 设置空心颜色
// setFill : 设置实心颜色
[[UIColor whiteColor] set];
// CGContextSetRGBFillColor(ctxR, 0, 0, 1, 1);
// 3.绘制图形
CGContextFillPath(ctxR);
}
/**
* 画三角形
*/
void drawTriangle()
{
// 1.获得上下文
CGContextRef ctxR = UIGraphicsGetCurrentContext();
// 2.画三角形
CGContextMoveToPoint(ctxR, 0, 0);
CGContextAddLineToPoint(ctxR, 100, 100);
CGContextAddLineToPoint(ctxR, 150, 80);
// 关闭路径(连接起点和最后一个点)
CGContextClosePath(ctxR);
//
CGContextSetRGBStrokeColor(ctxR, 0, 1, 0, 1);
// 3.绘制图形
CGContextStrokePath(ctxR);
}
- (void)drawRect:(CGRect)rect
{
// 1.获得上下文
CGContextRef ctxR = UIGraphicsGetCurrentContext();
// 2.画1/4圆
CGContextMoveToPoint(ctxR, 100, 100);
CGContextAddLineToPoint(ctxR, 100, 150);
CGContextAddArc(ctxR, 100, 100, 50, -M_PI_2, M_PI, 1);
CGContextClosePath(ctxR);
[[UIColor redColor] set];
// 3.显示所绘制的东西
CGContextFillPath(ctxR);
}
/**
* 画圆弧
*/
void drawArc()
{
// 1.获得上下文
CGContextRef ctxR = UIGraphicsGetCurrentContext();
// 2.画圆弧
// x\y : 圆心
// radius : 半径
// startAngle : 开始角度
// endAngle : 结束角度
// clockwise : 圆弧的伸展方向(0:顺时针, 1:逆时针)
CGContextAddArc(ctxR, 100, 100, 50, M_PI_2, M_PI, 0);
// 3.显示所绘制的东西
CGContextFillPath(ctxR);
}
/**
* 画圆
*/
void drawCircle()
{
// 1.获得上下文
CGContextRef ctxR = UIGraphicsGetCurrentContext();
// 2.画圆
CGContextAddEllipseInRect(ctxR, CGRectMake(50, 10, 100, 100));
CGContextSetLineWidth(ctxR, 10);
// 3.显示所绘制的东西
CGContextStrokePath(ctxR);
}
- (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 ctxR = UIGraphicsGetCurrentContext();
// 2.画矩形
CGRect cubeRect = CGRectMake(50, 50, 100, 100);
CGContextAddRect(ctxR, cubeRect);
// 3.显示所绘制的东西
CGContextFillPath(ctxR);
// 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];
}