ios - UIBezierPath是在上一条路径之上绘制吗？

我正在尝试自定义EChart，Github上用于条形图的库，用于我自己的目的。在此文件中：https://github.com/zhuhuihuihui/EChart/blob/master/EChart/EColumn.m

我正在尝试修改setGrade:方法，以便与其从图形底部向上重新绘制整个条形，而不仅仅是在条形顶部上绘制至图形中的下一个所需Y位置。我在下面添加了一个GIF，以显示我遇到的问题。

这是绘制此条的代码（以及下面的CABasicAnimation）：

-(void)setGrade:(float)grade {
    _grade = grade;
    UIBezierPath *progressline = [UIBezierPath bezierPath];

    [progressline moveToPoint:CGPointMake(self.frame.size.width/2.0, self.frame.size.height)];
    [progressline addLineToPoint:CGPointMake(self.frame.size.width/2.0, (1 - grade) * self.frame.size.height)];
    _chartLine.path = progressline.CGPath;
    _chartLine.strokeEnd = 1.0;

    CABasicAnimation *pathAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
    pathAnimation.duration = 1.0;
    pathAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    pathAnimation.fromValue = [NSNumber numberWithFloat:0.0f];
    pathAnimation.toValue = [NSNumber numberWithFloat:1.0f];
    [_chartLine addAnimation:pathAnimation forKey:@"strokeEndAnimation"];
}

从EColumnChart.m（https://github.com/zhuhuihuihui/EChart/blob/master/EChart/EColumnChart.m）调用此代码
这是相关的部分，第一部分是第一次进行初始化，第二部分是我自定义以更新值，调用setGrade:方法

        if (nil == eColumn) {
            eColumn = [[EColumn alloc] initWithFrame:CGRectMake(widthOfTheColumnShouldBe * 0.5 + (i * widthOfTheColumnShouldBe * 1.5), 0, widthOfTheColumnShouldBe, self.frame.size.height)];
            eColumn.shouldAnimate = NO;
            eColumn.backgroundColor = [UIColor clearColor];
            eColumn.grade = eColumnDataModel.value / _fullValueOfTheGraph;
            eColumn.eColumnDataModel = eColumnDataModel;
            [eColumn setDelegate:self];
            [self addSubview:eColumn];
        } else {
            eColumn.shouldAnimate = YES;
            eColumn.grade = eColumnDataModel.value / _fullValueOfTheGraph;
        }
        [_eColumns setObject:eColumn forKey:[NSNumber numberWithInteger:currentIndex ]];

_fullValueOfTheGraph具有自己的算法，可以确定应绘制多远的图形。 eColumnDataModel.value只是我给它的整数，它是条形列的Y值。

我对贝塞尔曲线不太熟悉。使bezier路径成为ivar并以某种方式跟踪顶部位置的诀窍是吗？



更新：
我试图在setGrade：方法的开始部分使用此代码，但是它只会在最后一次更新和当前更新之间产生一些细微的差别。我添加了prevGrade ivar，这是用于更新栏的最后一个成绩。它很接近，但是好像我需要组合贝塞尔曲线路径才能获得完整的条形。有任何想法吗？

         UIBezierPath *_progressline = [UIBezierPath bezierPath];
         if (_prevGrade != 0.0f) {
         if (grade < _prevGrade) { //Bar graph going down
         [_progressline moveToPoint:CGPointMake(self.frame.size.width/2.0, (1 + _prevGrade) * self.frame.size.height)];
         } else { //Bar graph going up
         [_progressline moveToPoint:CGPointMake(self.frame.size.width/2.0, (1 - _prevGrade) * self.frame.size.height)];
         }
         } else {
         [_progressline moveToPoint:CGPointMake(self.frame.size.width/2.0, self.frame.size.height)];
         }
         [_progressline addLineToPoint:CGPointMake(self.frame.size.width/2.0, (1 - grade) * self.frame.size.height)];

最佳答案

我认为您需要为path而不是CAShapeLayer设置strokeEnd动画。我一直在测试您共享的存储库中的代码，并进行了一些更改以使_chartLine动画化。

这是setGrade:方法的代码

-(void)setGrade:(float)grade
{
    _grade = grade;

    if(_chartLine.path == nil)
    {
        UIBezierPath *_progressline = [UIBezierPath bezierPath];
        if (_prevGrade != 0.0f) {
            if (grade < _prevGrade) { //Bar graph going down
                [_progressline moveToPoint:CGPointMake(self.frame.size.width/2.0, (1 + _prevGrade) * self.frame.size.height)];
            } else { //Bar graph going up
                [_progressline moveToPoint:CGPointMake(self.frame.size.width/2.0, (1 - _prevGrade) * self.frame.size.height)];
            }
        } else {
            [_progressline moveToPoint:CGPointMake(self.frame.size.width/2.0, self.frame.size.height)];
        }
        [_progressline addLineToPoint:CGPointMake(self.frame.size.width/2.0, (1 - grade) * self.frame.size.height)];

        _chartLine.path = _progressline.CGPath;
        _chartLine.strokeEnd = 1.0;
    }else
    {

        CAKeyframeAnimation *morph = [CAKeyframeAnimation animationWithKeyPath:@"path"];
        morph.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];
        morph.values = [self getPathValuesForAnimation:_chartLine startGrade:_prevGrade neededGrade:_grade];
        morph.duration = 1;
        morph.removedOnCompletion = YES;
        morph.fillMode = kCAFillModeForwards;
        morph.delegate = self;
        [_chartLine addAnimation:morph forKey:@"pathAnimation"];
        _chartLine.path = (__bridge CGPathRef _Nullable)((id)[morph.values lastObject]);
    }

    _prevGrade = grade;
}


//this method return values for path animation

-(NSArray*)getPathValuesForAnimation:(CAShapeLayer*)layer startGrade:(float)currentGrade neededGrade:(float)neededGrade
{

    NSMutableArray * values = [NSMutableArray array];
    if(_prevGrade != 0.0f)
        [values addObject:(id)layer.path];

    UIBezierPath * finalPath = [UIBezierPath bezierPath];

    [finalPath moveToPoint:CGPointMake(self.frame.size.width/2.0, self.frame.size.height)];
    [finalPath addLineToPoint:CGPointMake(self.frame.size.width/2.0,(1 - neededGrade)*self.frame.size.height)];

    [values addObject:(id)[finalPath CGPath]];

    return values;
}

希望这对您有所帮助，对我来说很棒

这就是它的工作方式（（我的gif导出器不好，所以您看到的所有故障都是我的gif导出器的问题）

这是与_chartLine.lineCap = kCALineCapButt;



这是_chartLine.lineCap = kCALineCapRound;