首先了解贝塞尔曲线的初始化方法都有那些,可以根据不同的需求来初始化;其次设置贝塞尔曲线的绘制路线;最后把贝塞尔曲线设置为layer的path,把layer添加到相应的view就能显示出你要绘制的贝塞尔曲线。
也可以直接在继承于UIView的子类中重写drawRect方法来绘制图形,此处是绘制到layer,之后再添加到view上。
一、贝塞尔曲线初始化方法
/// 1.初始化贝塞尔曲线 -- 无形状
bezierPath = [UIBezierPath bezierPath];
/// 2.绘制矩形的贝塞尔曲线 -- Rect为矩形的frame
bezierPath = [UIBezierPath bezierPathWithRect:CGRectMake(100, 10, 50, 50)];
/// 3.绘制圆形(椭圆)曲线 w = h 就是圆
bezierPath = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(100, 80, 80, 50)];
/// 4.绘制圆角的贝塞尔曲线 -- 四个角都是圆角 cornerRadius -- 圆角半径
bezierPath = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(100, 160, 50, 50) cornerRadius:5];
/// 5.绘制可选择圆角方位的矩形贝塞尔曲线
/// roundCorner - 哪个部位圆角(注意:在OC中是位枚举,在swift中是数组)
/// cornerRadii - 圆角的CGSize
bezierPath = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(100, 240, 50, 50) byRoundingCorners:UIRectCornerBottomLeft | UIRectCornerBottomRight cornerRadii:CGSizeMake(5, 5)];
/// 6.根据CGPathRef 绘制线
CGMutablePathRef path = CGPathCreateMutable();
/// 起点
CGPathMoveToPoint(path, NULL, 100, 89);
/// 画直线到某一点 (需要结合起点MoveToPoint) 此方法确定了终点
CGPathAddLineToPoint(path, NULL, 200, 200);
/// 画圆弧 (需要结合起点MoveToPoint) 此方法确定终点
CGPathAddArcToPoint(path, NULL, 100, 100, 200, 200, 50);
/// 画圆
CGPathAddArc(path, NULL, 100, 100, 50, 0, M_PI * 2, YES);
/// 画矩形
CGPathAddRect(path, NULL, CGRectMake(300, 300, 100, 100));
bezierPath = [UIBezierPath bezierPathWithCGPath:path];
/// 不在ARC管理范围内,需要手动释放 (带有ref的一般都是C的方法,需要手动释放内存)
CGPathRelease(path);
/// 7.绘制圆弧曲线
/// ArcCenter -- 圆心坐标
/// startAngle--起始点角度
/// endAngle--终点角度
/// radius - 圆的半径
/// clockwise -- 是否顺时针
bezierPath = [UIBezierPath bezierPathWithArcCenter:CGPointMake(200, 320) radius:50 startAngle:0 endAngle:M_PI * 2 clockwise:NO];
二、绘制贝塞尔曲线
/// 设置贝塞尔曲线 起点
[bezierPath moveToPoint:CGPointMake(200, 320)];
/// 添加直线到该点
[bezierPath addLineToPoint:CGPointMake(300, 320)]; /// 水平直线
[bezierPath addLineToPoint:CGPointMake(300, 200)]; /// 垂直竖线
[bezierPath addLineToPoint:CGPointMake(200, 320)]; /// 回到起始点的斜线
/// 绘制二次贝塞尔曲线 QuadCurveToPoint -- 终点 controlPoint -- 控制点
// [bezierPath addQuadCurveToPoint:CGPointMake(100, 320) controlPoint:CGPointMake(150, 50)];
/// 绘制三次贝塞尔曲线 -- 会从上一条beizerPath的终点作为起点开始绘制
/// CurveToPoint -- 终点 controlPoint1 -- 第一个控制曲线的点 controlPoint2 -- 第二个控制曲线的点
[bezierPath addCurveToPoint:CGPointMake(350, 320) controlPoint1:CGPointMake(50, 100) controlPoint2:CGPointMake(300, 150)];
/// 添加圆弧(圆) radius -- 半径 startAngle -- 起始弧度 endAngle -- 终点弧度
[bezierPath addArcWithCenter:CGPointMake(200, 400) radius:50 startAngle:0 endAngle:M_PI * 2 clockwise:YES];
/// 端点类型
bezierPath.lineCapStyle = kCGLineCapButt;
/// 线条链接类型
bezierPath.lineJoinStyle = kCGLineJoinMiter;
// Used when lineJoinStyle is kCGLineJoinMiter -- 线条最大宽度限度
bezierPath.miterLimit = 150;
// CGFloat dash[] = {20, 1};
// [bezierPath setLineDash:dash count:2 phase:0];
bezierPath.lineWidth = 1;
/// 填充贝塞尔曲线内部
// [bezierPath fill];
/// 设置填充颜色 --- drawRect中使用(此处无效)
[[UIColor yellowColor] set];
/// 移除所有曲线点
// [bezierPath removeAllPoints];
/// 闭合曲线
// [bezierPath closePath];
/// 绘制贝塞尔曲线边框
[bezierPath stroke];
借用个图来展示控制点controlPoint的意思
贝塞尔曲线1.jpeg
贝塞尔曲线2.jpeg
三、将绘制曲线的路径添加到layer上
/// 创建layer --- 注意:layer与贝塞尔曲线相同的属性同时设置,最终以layer的属性设置形式为准
CAShapeLayer *shapeLayer = [CAShapeLayer layer];
/// 设置layer的填充颜色 -- 会覆盖贝塞尔曲线设置的填充颜色,最终显示为无色
shapeLayer.fillColor = [UIColor clearColor].CGColor;
/// 设置曲线的绘制路线颜色
shapeLayer.strokeColor = [UIColor redColor].CGColor;
/// 将曲线的路径添加到layer上
shapeLayer.path = bezierPath.CGPath;
/// 将layer添加到view上
[self.view.layer addSublayer:shapeLayer];
以上就是贝塞尔曲线的基本使用,希望对您有帮助。
网友评论