iOS——Quartz2D(二维图形绘制)

一、Quartz2D 基本概念和在iOS开发中的价值

1.1 Quartz2D 基本概念

1.2 Quartz2D在iOS开发中的价值

二、UIBezierPath 和 Core Graphics

2.1 UIBezierPath

// 重写drawRect方法
- (void)drawRect:(CGRect)rect
{
// 创建图形相应的UIBezierPath对象
UIBezierPath* Path = [UIBezierPath bezierPathWithRect:CGRectMake(20, 20, 100, 50)];
// 设置一些修饰属性

// 设置线条宽度
[path setLineWidth:10];
//设置线头的样式：三种样式，kCGLineCapButt, kCGLineCapRound, kCGLineCapSquare
[Path.lineCapStyle = kCGLineCapRound];
//设置线条连接点的样式：kCGLineJoinMiter, kCGLineJoinRound,kCGLineJoinBevel
[Path.lineJoinStyle = kCGLineCapRound];
// 设置描边的颜色
[[UIColor redColor] setStroke];
[[UIColor whiteColor] setFill];

// 渲染，绘制(描边)
[Path stroke];
//绘制(内部填充)
[path fill];

}

2.2 Core Graphics

drawRect：

UIGraphicsBeginImageContextWithOptions

UIGraphicsGetImageFromCurrentImageContext

UIGraphicsEndImageContext

2.3 绘图上下文相关函数

UIGraphicsGetCurrentContext()

CGContextSaveGState()

CGContextRestoreGState()

CGContextMoveToPoint()

CGContextAddLineToPoint()

CGContextAddRect()

CGContextAddEllipseInRect()

CGContextAddQuadCurveToPoint()

CGContextAddCurveToPoint()

CGContextAddArc()

CGContextSetLineDash()

CGContextAddPath()

CGContextClosePath()

CGContextSetLineWidth()

CGContextSetStrokeColorWithColor()

CGContextSetStrokeColor()

CGContextSetRGBStrokeColor()

CGContextSetFillColor()

CGContextSetFillColorWithColor()

CGContextSetRGBFillColor()

CGContextSetAlaha()

CGContextSetShouldAntialias()

CGContextSetLineCap()

CGContextSetLineJoin()

CGContextSetShadow()

CGContextSetShadowWithColor()

CGContextFillRect()

CGContextStrokePath()

CGContextFillPath()

CGContextEOFillPath()

CGContextDrawPath()

三、使用Core Graphics绘图

CGContextRef ctx = UIGraphicsGetCurrentContext();

//直线
// 创建一条路径对象
UIBezierPath *path = [UIBezierPath bezierPath];
// 将画笔移动到某个点
[path moveToPoint:CGPointMake(20, 50)];
// 绘制一条直线到某个点
[path addLineToPoint:CGPointMake(300, 50)];
[path addLineToPoint:CGPointMake(160, 200)];
// [path addLineToPoint:CGPointMake(20, 50)];
// 闭合路径
[path closePath];

// 画矩形
// UIBezierPath *path = [UIBezierPath bezierPathWithRect:rect];

// 圆角矩形
// UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:rect cornerRadius:20];

// 内切的椭圆、圆形
UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:rect];

#pragma mark - 画弧线
- (void)drawArc {
CGPoint center = self.center;
/**
Center: 圆心
radius: 半径
startAngle: 起始弧度
endAngle: 终点弧度
clockwise:是否顺时针
**/
UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:center radius:150 startAngle:0 endAngle: M_PI_2 clockwise:YES];

path.lineWidth = 5;
[path addLineToPoint:center];
[path closePath];

[[UIColor redColor] setStroke];
[[UIColor whiteColor] setFill];

[path stroke];
[path fill];
}

[path moveToPoint:beginPoint];
//一个控制点的贝塞尔曲线
[path addQuadCurveToPoint:endPoint controlPoint:controlPoint];

CGPoint beginPoint_1 = CGPointMake(50, 300);
CGPoint endPoint_1 = CGPointMake(150, 300);
CGPoint controlPoint_1 = CGPointMake(75, 400);
CGPoint controlPoint_2 = CGPointMake(125, 200);

[path moveToPoint:beginPoint_1];
//两个控制点的贝塞尔曲线
[path addCurveToPoint:endPoint_1 controlPoint1:controlPoint_1 controlPoint2:controlPoint_2];

//拼接两条路径
UIBezierPath *subPath = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(170, 300, 200, 200)];
[path appendPath:subPath];

//移除所有的路径
// [path removeAllPoints];

[path stroke];
}

// 画波线
- (void)drawBezierPaths {

UIBezierPath *path = [UIBezierPath bezierPath];
[[UIColor redColor] setStroke];
path.lineWidth = 3;

// 当前视图的宽高
CGFloat screenWidth = CGRectGetWidth(self.bounds);
CGFloat screenHeight = CGRectGetHeight(self.bounds);
// 每一个曲线的宽度
CGFloat width = screenWidth / 10;

for (int i = 0; i < 10; i++) {
// 控制点的Y坐标
CGFloat controlPoint_Y = 0;
if (i % 2 == 0) {
controlPoint_Y = screenHeight / 2 - 100;
} else {
controlPoint_Y = screenHeight / 2 + 100;
}

CGPoint beginPoint = CGPointMake(i * width, screenHeight / 2);
CGPoint endPoint = CGPointMake(beginPoint.x + width, screenHeight / 2);
CGPoint controlPoint = CGPointMake((width / 2)+ (i * width), controlPoint_Y);

[path moveToPoint:beginPoint];
[path addQuadCurveToPoint:endPoint controlPoint:controlPoint];
}

[path stroke];
}

四、总结

Core Graphics

UIBezierPath

圆角矩形，

Core Graphics

UIKit