本系列文章为自己学习BezierPath的过程记录,有些知识是百度出来的,这里算个总结。
1: 画直线,也叫做一阶曲线。
- (void)drawRect:(CGRect)rect
{
// 设置线的填充色
[[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];
}
效果图:
屏幕快照 2015-12-30 14.10.31.png
2: 二阶曲线
二阶曲线,是指有一个公共切点(不知道怎么形容)曲线
网上扣了一张图,B这个点,就是所谓的公共切点
- (void)drawRect:(CGRect)rect
{
// 设置线的填充色
[[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];
}
这里的公共切点,就是右上角那个点啦。
3: 三阶曲线
三阶曲线,与二阶曲线类似,系统都有提供内置的方法,只是多了一个公共切点而已。
屏幕快照 2015-12-30 14.19.50.png- (void)drawRect:(CGRect)rect
{
// 设置线的填充色
[[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];
}
屏幕快照 2015-12-30 14.21.28.png
4: 多阶曲线
系统最多只给出了三阶曲线的绘制方法,这时有的人就要说了,产品要做一个4阶、5阶的曲线,怎么搞?
查一下API,你会发现一个appendPath的方法,不用说,看名字就知道什么意思了吧。
- (void)drawRect:(CGRect)rect
{
// 设置线的填充色
[[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];
}
屏幕快照 2015-12-30 14.33.38.png
网友评论