如图,要画一条经过图中黄色点的平滑曲线,可以用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];
}
}
这样无论有多少个点,都可以用平滑的曲线连接起来了。
如果有其他更好的办法,欢迎交流。