Question

我正在尝试为我自己的目的自定义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路径非常不熟悉。是什么让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)];

Answer 1

我认为您需要的是path而不是CAShapeLayer的动画strokeEnd。我一直在测试您共享的repo中的代码，并进行了一些更改以便为_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;

UIBezierPath在上一个路径上绘制？

1 个答案: