美文网首页
圆滑曲线画法

圆滑曲线画法

作者: 好名难取 | 来源:发表于2017-04-20 11:06 被阅读0次

Catmull-Rom算法
根据四个点计算中间
前后两个点位辅助点

-(CGPoint)getPoint:(CGFloat)t p:(CGPoint)p p1:(CGPoint)p1 p2:(CGPoint)p2 p3:(CGPoint)p3{
    CGFloat t2 = t*t;
    CGFloat t3 = t2*t;
    
    CGFloat f = -0.5*t3 + t2 - 0.5*t;
    CGFloat f1 = 1.5*t3 + -2.5*t2 + 1.0;
    CGFloat f2 = -1.5*t3 + 2.0*t2 + 0.5*t;
    CGFloat f3 = 0.5*t3 - 0.5*t2;
    
    CGFloat x = p.x*f + p1.x*f1 + p2.x*f2 + p3.x*f3;
    CGFloat y = p.y*f + p1.y*f1 + p2.y*f2 + p3.y*f3;
    return CGPointMake(x,y);
    
}

pointArray:点的数组
pointCount:曲线之间由count-1个小点组成,当为0时显示为最初与最末两点的连线,1为原始折线
isSame:添加的辅助点跟初始点是否一致,不一致的只能用NO

#define P(p) [(NSValue *)[points objectAtIndex:p] CGPointValue]
- (void)getCurvePathWithPoint:(NSArray *)pointArray pointCount:(NSInteger)pointCount isSame:(BOOL)isSame{
    NSMutableArray *points = [pointArray mutableCopy];
    UIBezierPath *path = [UIBezierPath bezierPath];
    
    CAShapeLayer *layer = [CAShapeLayer layer];
    layer.strokeColor = [UIColor blackColor].CGColor;
    layer.fillColor = [UIColor clearColor].CGColor;
    
    //添加两个辅助点
    [points insertObject:[points firstObject] atIndex:0];
    [points addObject:[points lastObject]];
    
    //添加的点与初始的点是否一致
    if (isSame) {
        [path moveToPoint:P(0)];
    }else{
        [path moveToPoint:P(1)];
    }
    
    for (int i = 0; i < points.count-3; i++) {
        CGPoint p0 = P(i);
        CGPoint p1 = P(i+1);
        CGPoint p2 = P(i+2);
        CGPoint p3 = P(i+3);
        for (int j = 0 ; j < pointCount; j++) {
            CGFloat t = 1.0 * j / pointCount;
            CGPoint point = [self getPoint:t p:p0 p1:p1 p2:p2 p3:p3];
            [path addLineToPoint:point];
        }
    }
    //添加最后一个点
    [path addLineToPoint:P(points.count-1)];
    
    layer.path = path.CGPath;
    [self.view.layer addSublayer:layer];
}

画表格的测试

-(void)backgroundTable:(CGRect)frame{
    //下面距离20上面距离10,显示范围在frame内各减少20
    
    width = frame.size.width;
    height = frame.size.height;
    
    UIBezierPath *path = [[UIBezierPath alloc] init];
    [path moveToPoint:CGPointMake(20, 10)];
    [path addLineToPoint:CGPointMake(20, height-20)];
    [path addLineToPoint:CGPointMake(width-10, height-20)];
    
    [path moveToPoint:CGPointMake(16, 18)];
    [path addLineToPoint:CGPointMake(20, 10)];
    [path addLineToPoint:CGPointMake(24, 18)];
    
    [path moveToPoint:CGPointMake(width-18, height-16)];
    [path addLineToPoint:CGPointMake(width-10, height-20)];
    [path addLineToPoint:CGPointMake(width-18, height-24)];
    
    CAShapeLayer *layer = [CAShapeLayer layer];
    layer.strokeColor = [UIColor blackColor].CGColor;
    layer.fillColor = [UIColor clearColor].CGColor;
    layer.path = path.CGPath;
    [self.view.layer addSublayer:layer];
}


-(void)ContrastFigure{
    
    NSMutableArray *a = [_arr mutableCopy];
    NSMutableArray *points = [NSMutableArray array];
    for (int i = 0; i<a.count; i++) {
        CGPoint p = CGPointMake(20+i*((width-40)/a.count), 20 + (10-[[_arr objectAtIndex:i] floatValue])*(height-40)/10);
        [points addObject:[NSValue valueWithCGPoint:p]];
    }
    NSLog(@"%@",a);
    [self getCurvePathWithPoint:points pointCount:100 isSame:NO];
    
    UIBezierPath *path1 = [[UIBezierPath alloc] init];
    CAShapeLayer *layer1 = [CAShapeLayer layer];
    layer1.strokeColor = [UIColor redColor].CGColor;
    layer1.fillColor = [UIColor clearColor].CGColor;
    for (int i = 0; i < _arr.count; i++) {
        if (i == 0) {
            [path1 moveToPoint:CGPointMake(20+i*((width-40)/_arr.count),20+(10-[[_arr objectAtIndex:i] floatValue])*(height-40)/10)];
        }else{
            [path1 addLineToPoint:CGPointMake(20+i*(width-40)/_arr.count,20+(10-[[_arr objectAtIndex:i] floatValue])*(height-40)/10)];
        }
    }
    layer1.path = path1.CGPath;
    [self.view.layer addSublayer:layer1];
}

viewDidLoad调用

[self backgroundTable:CGRectMake(0, 0, self.view.frame.size.width, 200)];
    
    _arr = @[@0,@10,@3,@8,@6,@9,@1,@2,@1,@2];
    [self ContrastFigure];

    NSArray *arr = [NSArray arrayWithObjects:[NSValue valueWithCGPoint:CGPointMake(30, 350)],[NSValue valueWithCGPoint:CGPointMake(130, 250)],[NSValue valueWithCGPoint:CGPointMake(180, 250)],[NSValue valueWithCGPoint:CGPointMake(230, 450)],[NSValue valueWithCGPoint:CGPointMake(280, 400)], nil];
        [self getCurvePathWithPoint:arr pointCount:100 isSame:YES];

图片.png

相关文章

网友评论

      本文标题:圆滑曲线画法

      本文链接:https://www.haomeiwen.com/subject/qrnkzttx.html