UIBezierPath画曲线控制点的选取

这里写图片描述
如图,要画一条经过图中黄色点的平滑曲线,可以用UIBezierPath贝塞尔曲线来实现,UIBezierPath画曲线关键是控制点的选取。怎样实现图中曲线呢,给大家一个方法参考。

@implementation FingerPrintView
- (instancetype)initWithFrame:(CGRect)frame {
    if (self = [super initWithFrame:frame]) {
        [self addFingerPrintLine];
    }
    return self;
}

- (void)addFingerPrintLine {
    CGFloat centerX = CGRectGetWidth(self.frame)/2;
    CGFloat centerY = CGRectGetHeight(self.frame)/2;

    NSArray * xArray = [NSArray arrayWithObjects:@(0),@(centerX/2),@(centerX),@(1.5*centerX),@(1.8*centerX),@(centerX * 2), nil];
    NSArray * yArray = [NSArray arrayWithObjects:@(centerY),@(centerY/2),@(centerY),@(1.5*centerY),@(0.5*centerY),@(centerY), nil];
    for (int i = 0; i < xArray.count - 1; i ++) {
        NSInteger nextIndex = i + 1 ;   // 标记下一个Index

        CGFloat value_i = [xArray[i] floatValue];       // 当前点的值
        CGFloat value_next_i = [xArray[nextIndex] floatValue];      // 下一个点的值

        CGFloat point_i_Y = [yArray[i] floatValue];    // 当前点的 Y
        CGFloat point_next_i_Y = [yArray[nextIndex] floatValue]; // 下一个点的 Y

        // 控制点的横坐标都是一样的:取两点横坐标的平均值,纵坐标不同:控制点1的纵坐标是当前点的纵坐标,控制点2的纵坐标是下一个点的纵坐标。
        CGPoint controlPoint1 = CGPointMake((value_i + value_next_i)/ 2 , point_i_Y);
        CGPoint controlPoint2 = CGPointMake((value_i + value_next_i)/ 2, point_next_i_Y);


        CAShapeLayer *mouthLayer = [CAShapeLayer layer];
        UIBezierPath *mouthPath = [UIBezierPath bezierPath];
        [mouthPath moveToPoint:CGPointMake(value_i, point_i_Y)];
        [mouthPath addCurveToPoint:CGPointMake(value_next_i , point_next_i_Y) controlPoint1:controlPoint1 controlPoint2:controlPoint2];
        mouthLayer.path = mouthPath.CGPath;
        mouthLayer.lineWidth = 2;
        mouthLayer.fillColor = [UIColor clearColor].CGColor;
        mouthLayer.strokeColor = [UIColor redColor].CGColor;
        [self.layer addSublayer:mouthLayer];

        UIView * view = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 10, 10)];
        view.center = CGPointMake(value_i, point_i_Y);
        view.layer.cornerRadius = 5;
        view.backgroundColor = [UIColor yellowColor];
        [self addSubview:view];

    }
 }

这样无论有多少个点,都可以用平滑的曲线连接起来了。
如果有其他更好的办法,欢迎交流。

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值