OC笔记-贝塞尔曲线的应用

最新推荐文章于 2022-12-15 14:19:48 发布

MrKiki

最新推荐文章于 2022-12-15 14:19:48 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏： ios

本文链接：https://blog.youkuaiyun.com/xmfsimida/article/details/50759907

ios 专栏收录该内容

7 篇文章

订阅专栏

这篇博客介绍了如何使用UIBezierPath在iOS中绘制不同形状，包括矩形、圆角矩形、圆、曲线和多控制点曲线。通过示例代码展示了如何创建CAShapeLayer并应用贝塞尔曲线路径，实现动态效果，如平滑的动画过渡。

// 画矩形
- (void)drawJX {
    UIBezierPath *path = [UIBezierPath bezierPathWithRect: CGRectMake(110, 100, 150, 100)];
    CAShapeLayer *layer = [CAShapeLayer layer];
    layer.path = path.CGPath;
    layer.fillColor = [UIColor blackColor].CGColor; // storke空心, fill实心
    [self.view.layer addSublayer: layer];
}

//  圆角图形
- (void)drawYJ {
    UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(110, 100, 150, 100) cornerRadius:50];
    CAShapeLayer *layer = [CAShapeLayer layer];
    layer.path = path.CGPath;
    layer.fillColor = [UIColor clearColor].CGColor; // 填充色
    layer.strokeColor = [UIColor blackColor].CGColor;   //  边框颜色
    [self.view.layer  addSublayer: layer];
}

//  画圆
- (void)drawYuan {
    CGFloat radius = 60.0f;
    CGFloat startAngle = 0.0f;
    CGFloat endAngle = M_PI * 2;
    UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:self.view.center radius:radius startAngle:startAngle endAngle:endAngle clockwise:YES];
    CAShapeLayer *layer = [CAShapeLayer layer];
    layer.path = path.CGPath;
    layer.fillColor = [UIColor clearColor].CGColor;
    layer.strokeColor = [UIColor blackColor].CGColor;
    
    [self.view.layer addSublayer: layer];
    
}


//     画曲线
- (void)drawQX {
    CGPoint startPoint = CGPointMake(50, 300); // 初始点
    CGPoint endPoint = CGPointMake(300, 300);   //  结束点
    CGPoint controlPoint = CGPointMake(175, 125); // 控制点
    
    CALayer *layer1 = [CALayer layer];
    layer1.frame = CGRectMake(startPoint.x, startPoint.y, 5, 5);
    layer1.backgroundColor = [UIColor redColor].CGColor;
    
    CALayer *layer2 = [CALayer layer];
    layer2.frame = CGRectMake(endPoint.x, endPoint.y, 5, 5);
    layer2.backgroundColor = [UIColor redColor].CGColor;
    
    CALayer *layer3 = [CALayer layer];
    layer3.frame = CGRectMake(controlPoint.x, controlPoint.y, 5, 5);
    layer3.backgroundColor = [UIColor redColor].CGColor;
    
    UIBezierPath *path = [UIBezierPath bezierPath];
    CAShapeLayer *layer = [CAShapeLayer layer];
    
    [path moveToPoint: startPoint];
    [path addQuadCurveToPoint:endPoint controlPoint:controlPoint];
    
    layer.path = path.CGPath;
    layer.fillColor = [UIColor clearColor].CGColor;
    layer.strokeColor = [UIColor blackColor].CGColor;
    layer.strokeStart   = 0.5f;
    layer.strokeEnd     = 0.5f;
    
    //  动画
    CABasicAnimation *startBA = [CABasicAnimation animationWithKeyPath:@"strokeStart"];
    startBA.fromValue = @0.5;
    [startBA setToValue: @0];
    startBA.duration = 2;
    [layer addAnimation:startBA forKey:@""];
    
    
    CABasicAnimation *endBA = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
    endBA.fromValue = @0.5;
    [endBA setToValue: @1];
    endBA.duration = 2;
    [layer addAnimation:endBA forKey:@""];
    
    
    [self.view.layer addSublayer: layer];
    [self.view.layer addSublayer: layer1];
    [self.view.layer addSublayer: layer2];
    [self.view.layer addSublayer: layer3];
    
}

// 多控制点曲线
- (void)drawDQX {
    CGPoint startPoint = CGPointMake(50, 300); // 初始点
    CGPoint endPoint = CGPointMake(300, 300);   //  结束点
    CGPoint controlPoint = CGPointMake(135, 125); // 控制点42.5
    CGPoint controlPoint2 = CGPointMake(177.5, 425);

    
    CAShapeLayer *layer = [CAShapeLayer layer];
    
    UIBezierPath *path = [UIBezierPath bezierPath];
    [path moveToPoint: startPoint];
    [path addCurveToPoint:endPoint controlPoint1:controlPoint controlPoint2:controlPoint2];
    
    layer.path = path.CGPath;
    layer.fillColor = [UIColor clearColor].CGColor;
    layer.strokeColor = [UIColor blackColor].CGColor;
    
    [self.view.layer addSublayer: layer];
}

// 单曲边矩形
- (void)drawJXD {
    CGSize finalSize = CGSizeMake(CGRectGetWidth(self.view.frame), 400);
    CGFloat layerHeight = finalSize.height * 0.2;
    
    
    CAShapeLayer *layer = [CAShapeLayer layer];
    UIBezierPath *path = [UIBezierPath bezierPath];
    [path moveToPoint: CGPointMake(0, finalSize.height - layerHeight)];
    [path addLineToPoint: CGPointMake(0, finalSize.height - 1)];
    [path addLineToPoint: CGPointMake(finalSize.width, finalSize.height - 1)];
    [path addLineToPoint:CGPointMake(finalSize.width, finalSize.height - layerHeight)];
    [path addQuadCurveToPoint:CGPointMake(0, finalSize.height - layerHeight) controlPoint:CGPointMake(finalSize.width / 2, (finalSize.height - layerHeight) - 40)];
    layer.path = path.CGPath;
    layer.fillColor = [UIColor blackColor].CGColor;
    [self.view.layer addSublayer: layer];
}