如何实现用core-plot库开发的饼图动画？

Question

在iPhone应用程序Roambi中，所显示的饼图可以以动画形式与用户一起旋转，就像旋转圆盘一样。我们可以用它做很多事情。

有人提到Roambi应用程序是使用core-plot库开发的：

What library use Roambi app iPhone to draw chart?

如何操作使用Core plot开发的饼图？

Answer 1

快速浏览一下Core Plot源代码，就会发现CPPieChart的继承如下所示：

CPPieChart：CPPlot：CPAnnotationHostLayer：CPLayer：CALayer

所以你可以看到，最后，CPPieChart只是一个重子类化的CALayer。我在这里可能是完全错误的，但没有任何迹象表明它不能像任何其他CALayer一样具有动画效果。尝试使用以下代码将图层旋转360度：

CABasicAnimation *rotation = [CABasicAnimation animationWithKeyPath:@"transform"];
CATransform3D transform = CATransform3DMakeRotation(DegreesToRadians(360), 0, 0, 1);
rotation.toValue = [NSValue valueWithCATransform3D:transform];
rotation.duration = 10.0f;
[pieChart addAnimation:rotation forKey:@"rotation"];

如果你能让它工作，那么只需从加速度计中读取数值并将其转换为旋转角度即可。

Answer 2

对于简单的饼图，即使有前面提到的动画，Core Plot也不是必需的。如果您只需要Core Plot解决方案，请忽略此答案。然而，这里有一个简单的解决方案，它不需要外部包，甚至不需要任何框架。

创建一个名为PieChartView的UIView。在PieChartView.h中：

#import <UIKit/UIKit.h>

@interface PieChartView : UIView {
    float zeroAngle;
    NSMutableArray *valueArray;
    NSMutableArray *colorArray;
}
@property (nonatomic) float zeroAngle;
@property (nonatomic, retain) NSMutableArray *valueArray;
@property (nonatomic, retain) NSMutableArray *colorArray;
@end

然后在PieChartView.m中实现：

#import "PieChartView.h"

@implementation PieChartView
@synthesize zeroAngle;
@synthesize valueArray, colorArray;

- (id)initWithFrame:(CGRect)frame {
    if ((self = [super initWithFrame:frame])) {
    }
    return self;
}


- (void)drawRect:(CGRect)rect {
    CGContextRef context = UIGraphicsGetCurrentContext();

    // DETERMINE NUMBER OF WEDGES OF PIE
    int wedges = [valueArray count];
    if (wedges > [colorArray count]) {
        NSLog(@"INSUFFICENT COLORS FOR PIE CHART: Please add %d additional colors.",wedges-[colorArray count]);
        for (int i=[colorArray count] ; i<wedges ; ++i) {
            [colorArray addObject:[UIColor whiteColor]];
        }
    }

    // DETERMINE TOTAL VOLUME OF PIE
    float sum = 0.0;
    for (int i=0; i<wedges ; ++i) {
        sum += [[valueArray objectAtIndex:i] floatValue];
    }
    float frac = 2.0*M_PI/sum;

    // DETERMINE CENTER AND MAXIMUM RADIUS OF INSCRIBED CIRCLE
    int center_x = rect.size.width/2.0;
    int center_y = rect.size.height/2.0;
    int radius = (center_x > center_y ? center_x : center_y);

    // DRAW WEDGES CLOCKWISE FROM POSITIVE X-AXIS
    float startAngle=zeroAngle;
    float endAngle=zeroAngle;
    for (int i=0; i<wedges; ++i) {
        startAngle = endAngle;
        endAngle += [[valueArray objectAtIndex:i] floatValue]*frac;
        [[colorArray objectAtIndex:i] setFill];
        CGContextMoveToPoint(context, center_x, center_y);
        CGContextAddArc(context, center_x, center_y, radius, startAngle, endAngle, 0);
        CGContextClosePath(context);
        CGContextFillPath(context);
    }
}

- (void)dealloc {
    [valueArray release];
    [colorArray release];
    [super dealloc];
}
@end

现在，您可以以任何希望实现所需动画的方式将浮点zeroAngle绑定到加速度计。

Answer 3

我不知道CorePlot，它可能在不久的将来会对我有一些用处，所以我只是看了一下。CorePlot很有趣，而且很活跃。

关于CorePlot的动画：

1. CorePlot文档提到了一个Animation system，，但它没有实现yet...
2. Even如果基于Core Animation，这并不意味着CorePlot图形将很容易动画化。

Interesting reading on the topic on google groups.

下面是你的选择(按照我的偏好)：

Roambi does.

• Implement Core Animation)

• Do

1. 寻找另一个绘图库来处理动画，比如Roambi，你的动画是基于CorePlot的(意思是很好地理解这个框架，自己动手做所有的事情，这取决于你想要什么，同样，可能并不是很难……但还是需要Core Animation技能。

我怀疑Roambi使用CorePlot，但如果他们使用，他们使用它作为基础，在内部代码中有大量的定制……