美文网首页
圆滑曲线画法

圆滑曲线画法

作者: 好名难取 | 来源:发表于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