利用貝塞爾曲線畫一段連續曲線

bezierDemo2.png

bezierDemo1.png

image.png

如果我們根據幾個點畫一條連續的曲線, 我們使用的方法是

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

這個方法是由一個結束點和兩個控制點作為參數, 畫上一個點到這個結束點之間的一段曲線

首先求出控制點是畫各個曲線的必須條件, 下面這個方法是求得控制點的方法, 需要我們傳入4個點, 求出控制點1和控制點2

- (void)getControlPointx0:(CGFloat)x0 andy0:(CGFloat)y0

x1:(CGFloat)x1 andy1:(CGFloat)y1

x2:(CGFloat)x2 andy2:(CGFloat)y2

x3:(CGFloat)x3 andy3:(CGFloat)y3

path:(UIBezierPath*) path{

CGFloat smooth_value =0.6;

CGFloat ctrl1_x;

CGFloat ctrl1_y;

CGFloat ctrl2_x;

CGFloat ctrl2_y;

CGFloat xc1 = (x0 + x1) /2.0;

CGFloat yc1 = (y0 + y1) /2.0;

CGFloat xc2 = (x1 + x2) /2.0;

CGFloat yc2 = (y1 + y2) /2.0;

CGFloat xc3 = (x2 + x3) /2.0;

CGFloat yc3 = (y2 + y3) /2.0;

CGFloat len1 = sqrt((x1-x0) * (x1-x0) + (y1-y0) * (y1-y0));

CGFloat len2 = sqrt((x2-x1) * (x2-x1) + (y2-y1) * (y2-y1));

CGFloat len3 = sqrt((x3-x2) * (x3-x2) + (y3-y2) * (y3-y2));

CGFloat k1 = len1 / (len1 + len2);

CGFloat k2 = len2 / (len2 + len3);

CGFloat xm1 = xc1 + (xc2 - xc1) * k1;

CGFloat ym1 = yc1 + (yc2 - yc1) * k1;

CGFloat xm2 = xc2 + (xc3 - xc2) * k2;

CGFloat ym2 = yc2 + (yc3 - yc2) * k2;

ctrl1_x = xm1 + (xc2 - xm1) * smooth_value + x1 - xm1;

ctrl1_y = ym1 + (yc2 - ym1) * smooth_value + y1 - ym1;

ctrl2_x = xm2 + (xc2 - xm2) * smooth_value + x2 - xm2;

ctrl2_y = ym2 + (yc2 - ym2) * smooth_value + y2 - ym2;

[path addCurveToPoint:CGPointMake(x2, y2) controlPoint1:CGPointMake(ctrl1_x, ctrl1_y) controlPoint2:CGPointMake(ctrl2_x, ctrl2_y)];

}

比如我們要畫出周二到周三之間的曲線, 我們需要傳入周一, 周二, 周三, 周四, 4個點的坐標, 求得周二, 周三之間的兩個控制點, 然后畫出周二, 周三之間的曲線, 以此類推, 畫出每一段曲線

但是會發現, 只有周一到周日7個點是不夠畫出6段曲線的, 所以我們需要在首尾各添加一個點(firstPoint, endPoint如下圖所示)來求出周一周二間的曲線和周六周日間的曲線

image.png

下面結合代碼進行說明

找出周一到周日對應點的x, y坐標

//初始化一個隨機y的level

_pointYArray = @[@(1), @(4), @(1), @(5), @(2), @(3), @(5)];

//確定在view中的x, y準確的frame值

[_pointYArray enumerateObjectsUsingBlock:^(NSNumber * _Nonnull obj, NSUInteger idx, BOOL * _Nonnull stop) {

NSInteger objInter = 1;

if ([obj respondsToSelector:@selector(integerValue)]) {

objInter = [obj integerValue];

}

if ([obj respondsToSelector:@selector(integerValue)]) {

objInter = [obj integerValue];

if (objInter < 1) {

objInter = 1;

} else if (objInter > 5) {

objInter = 5;

}

}

CGPoint point = CGPointMake(_xAxisSpacing * idx + _axisToViewPadding + 30, CGRectGetHeight(self.frame) - _axisToViewPadding - (objInter - 1) * _yAxisSpacing - 11);

NSValue *value = [NSValue valueWithCGPoint:CGPointMake(point.x, point.y)];

[_pointsArray addObject:value];

}];

2.添加首尾兩個點, 用于求出周一到周二和周六到周日之間控制點的坐標點

NSValue *firstPointValue = [NSValue valueWithCGPoint:CGPointMake(_axisToViewPadding, (CGRectGetHeight(self.frame) - _axisToViewPadding) / 2)];

[_pointsArray insertObject:firstPointValue atIndex:0];

NSValue *endPointValue = [NSValue valueWithCGPoint:CGPointMake(CGRectGetWidth(self.frame), (CGRectGetHeight(self.frame) - _axisToViewPadding) / 2)];

[_pointsArray addObject:endPointValue];

3.畫曲線, 先將起點移動到周一坐標處, 根據firstPoint, 周一, 周二, 周三坐標畫出周一到周二的曲線, 然后循環畫出每一段曲線

/** 折線路徑 */

UIBezierPath *path = [UIBezierPath bezierPath];

for (NSInteger i = 0; i < 6; i++) {

CGPoint p1 = [[_pointsArray objectAtIndex:i] CGPointValue];

CGPoint p2 = [[_pointsArray objectAtIndex:i+1] CGPointValue];

CGPoint p3 = [[_pointsArray objectAtIndex:i+2] CGPointValue];

CGPoint p4 = [[_pointsArray objectAtIndex:i+3] CGPointValue];

if (i == 0) {

[path moveToPoint:p2];

}

[self getControlPointx0:p1.x andy0:p1.y x1:p2.x andy1:p2.y x2:p3.x andy2:p3.y x3:p4.x andy3:p4.y path:path];

}

4.添加CAShapeLayer顯示path

/** 將折線添加到折線圖層上，并設置相關的屬性 */

_bezierLineLayer = [CAShapeLayer layer];

_bezierLineLayer.path = path.CGPath;

_bezierLineLayer.strokeColor = [UIColor redColor].CGColor;

_bezierLineLayer.fillColor = [[UIColor clearColor] CGColor];

// 默認設置路徑寬度為0，使其在起始狀態下不顯示

_bezierLineLayer.lineWidth = 3;

_bezierLineLayer.lineCap = kCALineCapRound;

_bezierLineLayer.lineJoin = kCALineJoinRound;

[self.layer addSublayer:_bezierLineLayer];

總結

畫連續曲線要用到這個三次貝塞爾曲線的方法, 其他的畫曲線的方法畫出的均是不平滑的, 而畫曲線要求我們得出每一段之間控制曲線的兩個控制點, 由四個點確定控制點的坐標, 求控制點方法中的smooth_value =0.6, 是用來控制曲線銳度的, 網上大多數提供的數值為0.6

總結

以上是生活随笔為你收集整理的ios 画线平滑_iOS 画贝塞尔曲线 连续曲线 平滑曲线 曲线图表的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。