UIBezierPath 贝塞尔曲线的几种基本用法

<h5>闲来无事总结了一下贝塞尔曲线的几种基本用法。
包括：直线、曲线、连续曲线、连续折线、圆弧、空心圆、实心圆、椭圆、矩形、圆角矩形、背景渐变色、圆弧渐变色。</h5>

</br>
</br>
<h3>所有效果如下图：</h3>

效果图.png

</br>
<h3>下面是这些效果的代码：</h3>
<h4>1、线</h4>

- (void)stroke1{
    
    // 直线
    [[UIColor redColor] set];
    UIBezierPath *path = [UIBezierPath bezierPath];
    [path moveToPoint:CGPointMake(100, 50)];
    [path addLineToPoint:CGPointMake(200, 50)];
    path.lineWidth = 10.0f;
    [path stroke];
    

    // 曲线
    [[UIColor purpleColor] set];
    UIBezierPath *path2 = [UIBezierPath bezierPath];
    path2.lineWidth = 5.0f;
    [path2 moveToPoint:CGPointMake(50, 100)];
    [path2 addQuadCurveToPoint:CGPointMake(100, 100) controlPoint:CGPointMake(75, 200)];
    [path2 stroke];
    
    
    // 连续曲线
    [[UIColor orangeColor] set];
    UIBezierPath *path3 = [UIBezierPath bezierPath];
    path3.lineWidth = 3.0f;
    [path3 moveToPoint:CGPointMake(150, 150)];
    [path3 addCurveToPoint:CGPointMake(300, 150) controlPoint1:CGPointMake(200, 200) controlPoint2:CGPointMake(250, 100)];
    [path3 stroke];
    

    // 连续折线
    [[UIColor blueColor] set];
    UIBezierPath *path4 = [UIBezierPath bezierPath];
    path4.lineWidth = 5.0f;
    [path4 moveToPoint:CGPointMake(50, 200)];
    [path4 addLineToPoint:CGPointMake(100, 300)];
    [path4 addLineToPoint:CGPointMake(150, 200)];
    [path4 addLineToPoint:CGPointMake(200, 250)];
//    [path4 closePath]; // 连接起始点
    path4.lineCapStyle = kCGLineCapRound; // 两端样式
    path4.lineJoinStyle = kCGLineCapSquare; // 拐角处样式
    [path4 stroke];
    

    // 圆弧
    [[UIColor blackColor] set];
    UIBezierPath *path5 = [UIBezierPath bezierPathWithArcCenter:CGPointMake(280, 220) radius:50 startAngle:-M_PI_4 endAngle:M_PI clockwise:YES];
    path5.lineWidth = 4.0f;
    [path5 stroke];
}

<h4>2、面</h4>

- (void)stroke2{
    
    // 空心圆
    [[UIColor darkGrayColor] set];
    // 这个frame代表的是圆外矩形的大小
    UIBezierPath *path1 = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(20, 300, 80, 80)];
    path1.lineWidth = 5.0f;
    [path1 stroke];
    
    
    // 实心圆
    [[UIColor cyanColor] set];
    UIBezierPath *path2 = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(55, 335, 10, 10)];
//    [[UIColor redColor] setFill]; // 设置填充颜色，要放在填充之前
    [path2 fill]; // 填充封闭区域，这样就画出了实心圆
    [path2 stroke];
    
    // 实心圆还可以用上面画圆弧的方式画
    
    
    // 椭圆
    [[UIColor magentaColor] set];
    UIBezierPath *path3 = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(120, 300, 120, 80)];
    path3.lineWidth = 5.0f;
    [path3 stroke];
    

    // 矩形
    [[UIColor brownColor] set];
    UIBezierPath *path4 = [UIBezierPath bezierPathWithRect:CGRectMake(260, 300, 60, 100)];
    path4.lineWidth = 3.0f;
    [path4 stroke];


    // 圆角矩形
    [[UIColor brownColor] set];
    UIBezierPath *path5 = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(200, 400, 150, 80) cornerRadius:40];
    path5.lineWidth = 3.0f;
    [path5 stroke];
}

<h4>3、渐变色</h4>

- (void)stroke3{
    
    // 背景的渐变色 CAGradientLayer用于生成渐变图层
    CAGradientLayer *gradientLayer2 = [CAGradientLayer layer];
    gradientLayer2.frame = CGRectMake(50, 400, 100, 200);
    gradientLayer2.colors = @[(__bridge id)[UIColor purpleColor].CGColor, (__bridge id)[UIColor yellowColor].CGColor, (__bridge id)[UIColor magentaColor].CGColor];
    gradientLayer2.locations = @[@0.2, @0.5, @0.8]; // 渐变色的位置分段
    // 起始点决定颜色渐变的方向，x,y的值跟锚点的值所表示的位置相同。
    gradientLayer2.startPoint = CGPointMake(0, 0);
    gradientLayer2.endPoint = CGPointMake(0.0, 1.0);
    [self.layer addSublayer:gradientLayer2];
    
    
    // 弧线的渐变色
    [[UIColor yellowColor] set];
    UIBezierPath *path1 = [UIBezierPath bezierPathWithArcCenter:CGPointMake(90, 90) radius:80 startAngle:-210/180.0*M_PI endAngle:30/180.0*M_PI clockwise:YES];
    CAShapeLayer *shapeLayer1 = [CAShapeLayer layer];
    shapeLayer1.frame = CGRectMake(0, 0, 180, 180); // 这个frame要是相对于下面渐变图层
    shapeLayer1.path = path1.CGPath;
    shapeLayer1.lineWidth = 15.0f;
    shapeLayer1.strokeColor = [UIColor redColor].CGColor;
    shapeLayer1.fillColor = [UIColor clearColor].CGColor;  // 填充色要设为clearColor否则弧线内也会有渐变色
    shapeLayer1.lineCap = kCALineCapRound; // 弧线两端的样式
    
    // 渐变图层
    CAGradientLayer *gradientLayer1 = [CAGradientLayer layer];
    gradientLayer1.frame = CGRectMake(180, 480, 180, 180);
    gradientLayer1.colors = @[(__bridge id)[UIColor purpleColor].CGColor, (__bridge id)[UIColor yellowColor].CGColor, (__bridge id)[UIColor magentaColor].CGColor];
    [gradientLayer1 setLocations:@[@0.0,@0.4,@1.0]];
    [gradientLayer1 setStartPoint:CGPointMake(0, 0)];
    [gradientLayer1 setEndPoint:CGPointMake(1, 0)];
    
    // 用shapLayer1来截取渐变层遮罩
    [gradientLayer1 setMask:shapeLayer1];
    [self.layer addSublayer:gradientLayer1];

    
    
    //下面方法可以以动画的形式划线
//    CABasicAnimation *pathAnimation=[CABasicAnimation animationWithKeyPath:@"strokeEnd"];
//    pathAnimation.duration = 1.0;
//    pathAnimation.timingFunction=[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
//    pathAnimation.fromValue=[NSNumber numberWithFloat:0.0f];
//    pathAnimation.toValue=[NSNumber numberWithFloat:1.0f];
//    pathAnimation.autoreverses=NO;
//    shapeLayer1.path=path1.CGPath;
//    [shapeLayer1 addAnimation:pathAnimation forKey:@"strokeEndAnimation"];
    

}

</br>
</br>
</br>
<h5>没事还是要写点东西来充实自己的。今天刚好读了一篇文章，在此记录一下读后的心得“运气是量变到质变的一个节点，我们不应期待运气，而是要创造运气”。</h5>