前一阵看了墨迹天气的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.如果有更好的思路，欢迎给我简书留言�
