在UIView中,所有的绘制界面操作,都必须在drawRect:方法中进行操作.
- (void)drawRect:(CGRect)rect {
// [self drawLine];
// [self drawLine2];
// [self drawRectangle];
// [self drawCircle];
// [self drawCurve];
// [self drawImage];
// [self drawText];
}
绘制直线
第一种方法
- (void)drawLine {
//1 获取当前的绘制图形上下文
CGContextRef context = UIGraphicsGetCurrentContext();
//2 创建并且设置路径 可变路径
CGMutablePathRef path = CGPathCreateMutable();
//设置路径上的点
//路径的起始点
//path 需要添加起始点的可变路径
//transform 坐标系变化
CGPathMoveToPoint(path, NULL, 50, 50);
//向路径中添加点
CGPathAddLineToPoint(path, NULL, 100, 100);
CGPathAddLineToPoint(path, NULL, 200, 100);
CGPathAddLineToPoint(path, NULL, 100, 200);
CGPathAddLineToPoint(path, NULL, 150, 50);
CGPathAddLineToPoint(path, NULL, 50, 150);
//封闭路径 将路径的终点和起始点链接
CGPathCloseSubpath(path);
//3 设置绘制属性 （线条颜色，线条粗细）
//设置线段颜色
CGContextSetStrokeColorWithColor(context, [UIColor redColor].CGColor);
//设置图形的填充颜色
CGContextSetFillColorWithColor(context, [UIColor greenColor].CGColor);
//设置线条宽度
CGContextSetLineWidth(context, 5);
//设置线段连接点的样式
CGContextSetLineJoin(context, kCGLineJoinRound);
//4 绘制路径
//将创建好的路径 添加到上下文中
CGContextAddPath(context, path);
//在图形上下文中绘制已添加路径
//mode 绘制模式
CGContextDrawPath(context, kCGPathFillStroke);
//在CG框架中 所有使用到了create函数创建的变量，都需要手动销毁
CGPathRelease(path);
}
一开始用的时候感觉这些方法挺难记的,因为是C语言的一套接口,在OC里面也不好直接查看方法.后来发现context的方法基本都是CGContext开头的,path的方法都是CGPath开头的...
第二种方法
- (void)drawLine2 {
//第二种绘制线段的方法， 不需要使用路径
CGContextRef context = UIGraphicsGetCurrentContext();
//创建多个点 并且放入到数组中
CGPoint point1 = CGPointMake(100, 100);
CGPoint point2 = CGPointMake(150, 150);
CGPoint point3 = CGPointMake(200, 150);
CGPoint point4 = CGPointMake(150, 100);
CGPoint point5 = CGPointMake(200, 100);
CGPoint points[5] = {point1, point2, point3, point4, point5};
//向上下文中添加线段
CGContextAddLines(context, points, 5);
CGContextSetLineWidth(context, 3);
CGContextSetStrokeColorWithColor(context, [UIColor redColor].CGColor);
//设置填充颜色 在UIKit框架中，对某些功能进行了简单封装
//直接调用UIKit中的接口也能够完成一部分的绘制操作
[[UIColor yellowColor] setFill];
CGContextDrawPath(context, kCGPathEOFillStroke);
}
绘制矩形
- (void)drawRectangle {
//创建一个矩形区域
CGRect rect = CGRectMake(50, 50, 100, 50);
//将rect添加到图形上下文中
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextAddRect(context, rect);
//设定颜色
[[UIColor redColor] setFill];
[[UIColor yellowColor] setStroke];
CGContextSetLineWidth(context, 3);
CGContextDrawPath(context, kCGPathFillStroke);
}
绘制圆形
- (void)drawCircle {
//获取当前的上下文
CGContextRef context = UIGraphicsGetCurrentContext();
//添加一个圆形路径倒上下文中
/**
* context 图形上下文
* x,y 圆心坐标点
* radius 半径
* angle 开始和结束的角度 0度在x轴正方向，角度沿顺时针方向增大
* clockwise 画的方向 0表示顺时针画圆，1表示逆时针画
*/
CGContextAddArc(context, 100, 100, 50, 0, M_PI_2, 0);
[[UIColor orangeColor] setStroke];
[[UIColor purpleColor] setFill];
CGContextSetLineWidth(context, 5);
//绘制线条
CGContextDrawPath(context, kCGPathFillStroke);
}
这里说明一下,CGContextAddArc这个函数到底是怎么画圆形的好像比较难理解,这里说说我的理解.X的正方向是0度,然后角度沿着顺时针变大.在上面的例子中CGContextAddArc(context, 100, 100, 50, 0, M_PI_2, 0),起始角度是0°也就是x正轴方向,然后结束角度是M_PI_2,也就是90°的位置,图形是起始位置向结束位置画的,clockwise是0也就是逆时针,所以最后画出来的图形是一个90的圆弧
绘制曲线
- (void)drawCurve {
CGContextRef context = UIGraphicsGetCurrentContext();
//设定曲线的起点
CGContextMoveToPoint(context, 200, 100);
//添加一条曲线到上下文
// CGContextAddQuadCurveToPoint(context, 200, 500, 300, 100);
// CGContextSetStrokeColorWithColor(context, [UIColor redColor].CGColor);
// //绘制线条
// CGContextDrawPath(context, kCGPathStroke);
//
//绘制贝赛尔曲线
CGContextAddCurveToPoint(context, 100, 300, 300, 100, 200, 500);
CGContextSetStrokeColorWithColor(context, [UIColor redColor].CGColor);
CGContextDrawPath(context, kCGPathStroke);
}
绘制图形
- (void)drawImage {
//读取图片
UIImage *image = [UIImage imageNamed:@"001"];
//方式一
//将图片绘制到某一个位置，图片的大小不变
[image drawAtPoint:CGPointMake(100, 100)];
//方式二
[image drawInRect:CGRectMake(100, 200, 200, 200) blendMode:kCGBlendModeDifference alpha:1];
}
绘制文本
- (void)drawText {
//创建字符串对象
NSString *text = @"Hello World !";
/*
文字颜色
字体以及大小
*/
UIFont *textFont = [UIFont boldSystemFontOfSize:18];
UIColor *textColor = [UIColor greenColor];
//构建参数字典
NSDictionary *attr = @{NSFontAttributeName : textFont,
NSForegroundColorAttributeName : textColor};
//绘制文字
[text drawInRect:CGRectMake(100, 100, 200, 100) withAttributes:attr];
}
