一个24小时天气折线图(仿墨迹天气)

前一阵看了墨迹天气的24小时折线图，感觉很有意思。尤其是里面View跟着手指的滑动一起实时运动，效果体验很好。 就尝试写了一下，先看一下最终的效果图：

写这个折线图，让曲线可滑动难点不大。直接在UIScrollView上面绘制就好了，主要是这个圆角View的运动轨迹计算。 计算运动轨迹，无非就是计算x和y轴的坐标。下面说下我的计算思路

1.运动坐标分为x和y坐标。我们先来计算x的运动坐标。通过比例关系，很容易得出以下公式

-(void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    CGSize size = scrollView.contentSize;
    CGFloat x = (_dataArray.count - 1) * self.lineSpace * scrollView.contentOffset.x / (size.width - scrollView.width) + self.leftMargin;
}

其中dataArray为数据源数组, lineSpace为每个点之间的距离,leftMargin为曲线的外边距。
2.由于曲线本身就是有无数个直线所组成。我们可以通过直线的方法来处理计算曲线上点的坐标。在求出实时运动轨迹的x点坐标后，下来我们来计算y坐标:

• 计算贝塞尔曲线这个点的前后两点的在位置数组位置的下标
• 得到两点后，问题就变得很简单了。直线方程求解
• 求出斜率， 通过点斜式计算得出。点斜式公式：y-y1 = k(x - x1)

-(CGFloat)getLableyAxisWithX:(CGFloat)xAxis;
{
    CGPoint startPoint,endPoint;
    NSInteger index;
    CGFloat sum = self.leftMargin;
    for (index = 0; index < _dataArray.count; index++)
    {
        sum += self.lineSpace;
        if (xAxis < sum)
        {
            startPoint = CGPointMake(_modelPostionArray[index].xPosition, _modelPostionArray[index].yPosition);
            _currentIndex = index;
            break;
        }
    }
    endPoint = CGPointMake(_modelPostionArray[index+1].xPosition, _modelPostionArray[index+1].yPosition);
    CGFloat k = (endPoint.y - startPoint.y) / (endPoint.x -startPoint.x);
    CGFloat y = k *(xAxis - startPoint.x) + startPoint.y;
    return y;
}

3.关于这个圆角箭头的View，我们也是通过贝塞尔曲线绘制得出
，圆角计算一下四个圆角的相应角度即可。�

-(void)addCirLayer
{
    self.lineLayer = [CAShapeLayer layer];
    self.lineLayer.strokeColor = [UIColor clearColor].CGColor;
    self.lineLayer.fillColor = [[UIColor whiteColor] CGColor];
    self.lineLayer.lineWidth = 1;
    self.lineLayer.contentsScale = [UIScreen mainScreen].scale;
    [self.layer addSublayer:self.lineLayer];
    
    CGSize size = self.size;
    UIBezierPath *path = [UIBezierPath bezierPath];
    double offsetH = size.height - RADIUS*2 - AllowSize.height;
    double offsetW = (size.width - RADIUS*2)/2;
    CGPoint point = CGPointMake(RADIUS, 0);
    [path moveToPoint:point];
    point.x += size.width - RADIUS*2;
    point.y += RADIUS;
    [path addArcWithCenter:point radius:RADIUS startAngle:M_PI*3/2 endAngle:0 clockwise:YES];
    point.x += RADIUS;
    point.y += offsetH;
    [path addLineToPoint:point];
    point.x -= RADIUS;
    [path addArcWithCenter:point radius:RADIUS startAngle:0 endAngle:M_PI/2 clockwise:YES];
    point.y += RADIUS;
    point.x -= offsetW;
    [path addLineToPoint:point];
    point.x -= AllowSize.width/2;
    point.y += AllowSize.height;
    [path addLineToPoint:point];
    point.x -= AllowSize.width/2;
    point.y -= AllowSize.height;
    [path addLineToPoint:point];
    point.x-= offsetW;
    [path addLineToPoint:point];
    point.y -= RADIUS;
    [path addArcWithCenter:point radius:RADIUS startAngle:M_PI/2 endAngle:M_PI clockwise:YES];
    point.x -= RADIUS;
    point.y -= offsetH;
    [path addLineToPoint:point];
    point.x += RADIUS;
    [path addArcWithCenter:point radius:RADIUS startAngle:M_PI endAngle:M_PI*3/2 clockwise:YES];
    [path closePath];
    self.lineLayer.path = path.CGPath;
}

4.关于光滑贝塞尔曲线的绘制
1.可以通过数学插值计算得出;
2.也可以通过计算两个控制点绘制得出。这里的绘制方法借鉴的是一位网上一位大牛的方法，其选择的是第二种方法。

-(void)addCurveToPoint:(CGPoint)endPoint controlPoint1:(CGPoint)controlPoint1 controlPoint2:(CGPoint)controlPoint2

写到最后

1.Github地址点我下载
2.如果觉得还不错，给个小星星吧(O(∩_∩)O~~)
3.如果有更好的思路，欢迎给我留言�