初识贝塞尔曲线
2017-01-08 本文已影响349人
coder小鹏
1.UIBezierPath简介
UIBezierPath类是Core Graphics框架关于path的一个封装。可以定义简单的形状,如椭圆或者矩形,或者有多个直线和曲线段组成的形状。
2.使用UIBezierPath绘图的优点
使用方便,易于阅读,便于管理
3.初识UIBezierPath中的常用的属性和方法
Drawing properties
@property(nonatomic) CGFloat lineWidth;//线宽
//终点连接类型
kCGLineCapButt,//斜角连接
kCGLineCapRound,//圆滑衔接
kCGLineCapSquare//斜角连接
@property(nonatomic) CGLineCap lineCapStyle;
//交叉点的类型
kCGLineJoinMiter
kCGLineJoinRound
kCGLineJoinBevel
@property(nonatomic) CGLineJoin lineJoinStyle;
@property(nonatomic) CGFloat miterLimit; // 两条线交汇处内角和外角之间的最大距离,需要交叉点类型为kCGLineJoinMiter是生效,最大限制为10,这个限制值有助于避免在连接线段志坚的尖峰
@property(nonatomic) CGFloat flatness;// 个人理解为绘线的精细程度,默认为0.6,数值越大,需要处理的时间越长
@property(nonatomic) BOOL usesEvenOddFillRule; // 决定是否使用even-odd或者non-zero规则
path construction
//设置画笔的起始点
- (void)moveToPoint:(CGPoint)point;
//从当前点到指定点绘制直线
- (void)addLineToPoint:(CGPoint)point;
//添加贝塞尔曲线
//endPoint终点 controlPoint1、controlPoint2控制点
- (void)addCurveToPoint:(CGPoint)endPoint controlPoint1:(CGPoint)controlPoint1 controlPoint2:(CGPoint)controlPoint2;
//endPoint终点 controlPoint控制点
- (void)addQuadCurveToPoint:(CGPoint)endPoint controlPoint:(CGPoint)controlPoint;
//添加弧线
center弧线圆心坐标 radius弧线半径 startAngle弧线起始角度 endAngle弧线结束角度 clockwise是否顺时针绘制
- (void)addArcWithCenter:(CGPoint)center radius:(CGFloat)radius startAngle:(CGFloat)startAngle endAngle:(CGFloat)endAngle clockwise:(BOOL)clockwise
//闭合路径,封闭未形成闭环的路径
- (void)closePath;
//移除所有的点,删除所有的subPath
- (void)removeAllPoints;
//追加bezierPath路径
- (void)appendPath:(UIBezierPath *)bezierPath;
// 创建并返回一个新的反转内容的当前路径曲线路径的对象。
- (UIBezierPath *)bezierPathByReversingPath
// 用指定的仿射变换矩阵变换路径的所有点
- (void)applyTransform:(CGAffineTransform)transform;
//填充
- (void)fill;
//路径绘制
- (void)stroke;
//在这以后的图形绘制超出当前路径范围则不可见
- (void)addClip;
4.画图示例代码
直线图
// 设置线的填充色
[[UIColor redColor] setStroke];
// 新建一个bezier对象
UIBezierPath *bezierPath = [UIBezierPath bezierPath];
// 设置线宽度
bezierPath.lineWidth = 10;
// 设置线两头样式
bezierPath.lineCapStyle = kCGLineCapRound;
// 设置起点、终点坐标
[bezierPath moveToPoint:CGPointMake(10, 10)];
[bezierPath addLineToPoint:CGPointMake(100, 100)];
// 开始绘制
[bezierPath stroke];
矩形图
// 设置线的填充色
[[UIColor redColor] setStroke];
// 新建一个bezier对象,此对象用于绘制矩形,需要传入绘制的矩形的Frame
UIBezierPath *bezierPath = [UIBezierPath bezierPathWithRect:CGRectMake(10, 10, 50, 50)];
// 设置线宽度
bezierPath.lineWidth = 10;
// 设置线两头样式
bezierPath.lineCapStyle = kCGLineCapRound;
// 开始绘制
[bezierPath stroke];
圆角矩形
// 设置线的填充色
[[UIColor redColor] setStroke];
// 新建一个bezier对象,此对象用于绘制一个圆角矩形
UIBezierPath *bezierPath = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(10, 10, 50, 50)cornerRadius:10];
// 设置线宽度
bezierPath.lineWidth = 10;
// 开始绘制
[bezierPath stroke];
// rect: 需要画的矩形的Frame
//corners: 哪些部位需要画成圆角
//cornerRadius: 圆角的Size
部分圆角矩形
// 设置线的填充色
[[UIColor redColor] setStroke];
// 新建一个bezier对象,此对象用于绘制一个部分圆角的矩形,左上、右下
UIBezierPath *bezierPath = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(10, 10, 50, 50) byRoundingCorners:UIRectCornerTopLeft | UIRectCornerBottomRight cornerRadii:CGSizeMake(10, 10)];
// 设置线宽度
bezierPath.lineWidth = 10;
// 开始绘制
[bezierPath stroke];
圆
// 设置线的填充色
[[UIColor redColor] setStroke];
// 新建一个bezier对象,此对象用于绘制内切圆,需要传入绘制内切圆的矩形的Frame
UIBezierPath *bezierPath = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(10, 10, 50, 50)];
// 设置线宽度
bezierPath.lineWidth = 10;
// 设置线两头样式
bezierPath.lineCapStyle = kCGLineCapRound;
// 开始绘制
[bezierPath stroke];
//center: 圆心坐标
//radius: 圆的半径
//startAngle: 绘制起始点角度
//endAngle: 绘制终点角度
//clockwise: 是否顺时针
圆弧
// 设置线的填充色
[[UIColor redColor] setStroke];
// 新建一个bezier对象,此对象用于绘制一个圆弧 UIBezierPath *bezierPath = [UIBezierPath bezierPathWithArcCenter:CGPointMake(150, 150) radius:110 startAngle:0 endAngle:M_PI_2 clockwise:NO]; // 设置线宽度
bezierPath.lineWidth = 10;
// 开始绘制
[bezierPath stroke];
二阶曲线
// 设置线的填充色
[[UIColor redColor] setStroke];
// 新建一个bezier对象
UIBezierPath *bezierPath = [UIBezierPath bezierPath];
// 设置线宽度
bezierPath.lineWidth = 10;
// 设置线两头样式
bezierPath.lineCapStyle = kCGLineCapRound;
// 设置起点、终点坐标
[bezierPath moveToPoint:CGPointMake(100, 100)];
[bezierPath addQuadCurveToPoint:CGPointMake(200, 200) controlPoint:CGPointMake(300, 0)];
// 开始绘制
[bezierPath stroke];
三阶曲线
// 设置线的填充色
[[UIColor redColor] setStroke];
// 新建一个bezier对象
UIBezierPath *bezierPath = [UIBezierPath bezierPath];
// 设置线宽度
bezierPath.lineWidth = 10;
// 设置线两头样式
bezierPath.lineCapStyle = kCGLineCapRound;
// 设置起点、终点坐标
[bezierPath moveToPoint:CGPointMake(100, 100)]; [bezierPath addCurveToPoint:CGPointMake(200, 200) controlPoint1:CGPointMake(150, 0) controlPoint2:CGPointMake(150, 300)];
// 开始绘制
[bezierPath stroke];
多阶曲线
// 设置线的填充色
[[UIColor redColor] setStroke];
// 新建一个bezier对象
UIBezierPath *bezierPath = [UIBezierPath bezierPath];
// 设置线宽度
bezierPath.lineWidth = 10;
// 设置线两头样式
bezierPath.lineCapStyle = kCGLineCapRound;
// 设置起点、终点坐标
[bezierPath moveToPoint:CGPointMake(100, 100)]; [bezierPath addCurveToPoint:CGPointMake(200, 200) controlPoint1:CGPointMake(150, 0) controlPoint2:CGPointMake(150, 300)];
// 创建第二条贝塞尔曲线
UIBezierPath *bezierPath2 = [UIBezierPath bezierPath]; // 设置起点、终点坐标
[bezierPath2 moveToPoint:CGPointMake(200, 200)]; [bezierPath2 addCurveToPoint:CGPointMake(290, 290) controlPoint1:CGPointMake(250, 0) controlPoint2:CGPointMake(250, 300)];
// 将第二条线,加到第一条线上面去
[bezierPath appendPath:bezierPath2];
// 开始绘制
[bezierPath stroke];