ios - 使用 Coregraphics 一次绘制多个 Guage 图表

我只使用 CORE GRAPHICS 制作图表。我已经成功完成了折线图、条形图和单线图的绘制。

现在我的要求是

但是当我在上下文中绘制时，我只得到一个这样的图表

我已经获取了数组中图表的百分比并使用 for 循环，我一直在绘制数组中的所有百分比，但我得到的最终结果只是一个量表是数组中的最后一个对象。

我使用这些 link 绘制了这些图表

稍微改一下代码和画图这样

我用来绘制量规图的代码是

首先我从我的 Viewcontroller 调用 guagegraph(UIView 的子类)

percentageArray 包含每个量表的百分比

percentageArray = [[NSArray alloc] initWithObjects"80", @"76", @"92", @"49", nil];
for (int i = 0; i < percentageArray.count; i++)
    {
        [guageGraph setPercent:[percentageArray[i] intValue] withIndex:i];
    }

然后在guagegraph下面的方法

- (void)setPercentint)percent withIndexint)i
{
CGFloat floatPercent = percent / 100.0;
floatPercent = MIN(1, MAX(0, floatPercent));
percentLayer.percent = floatPercent;
percentLayer.i = i;
[self setNeedsLayout];
[percentLayer setNeedsDisplay];
}

然后调用 percentLayer 类(CALayer 的子类)并绘制上下文

-(void)drawInContextCGContextRef)ctx
{
[self DrawRight:ctx];
[self DrawLeft:ctx];

}
-(void)DrawRightCGContextRef)ctx
{
CGPoint center = CGPointMake(self.frame.size.width / 2, 160);

CGFloat delta = -toRadians(270 * percent);


CGContextSetFillColorWithColor(ctx, [UIColor orangeColor].CGColor);

CGContextSetLineWidth(ctx, 1);

CGContextSetLineCap(ctx, kCGLineCapRound);

CGContextSetAllowsAntialiasing(ctx, YES);

CGMutablePathRef path = CGPathCreateMutable();

CGPathAddRelativeArc(path, NULL, center.x, center.y, 135 - 5 - (15 * i), (3 * M_PI / 4), -delta);
CGPathAddRelativeArc(path, NULL, center.x, center.y, 150 - 5 - (15 * i), (3 * M_PI / 4) - delta, delta);
CGPathAddLineToPoint(path, NULL, center.x, center.y);

CGContextAddPath(ctx, path);
CGContextFillPath(ctx);
}

-(void)DrawLeftCGContextRef)ctx
{
CGPoint center = CGPointMake(self.frame.size.width / 2, 160);
CGFloat delta = toRadians(270 * (1 - percent));


CGContextSetFillColorWithColor(ctx, [UIColor groupTableViewBackgroundColor].CGColor);

CGContextSetLineWidth(ctx, 1);

CGContextSetLineCap(ctx, kCGLineCapRound);

CGContextSetAllowsAntialiasing(ctx, YES);

CGMutablePathRef path = CGPathCreateMutable();

CGPathAddRelativeArc(path, NULL, center.x, center.y, 135 - 5 - (15 * i), (M_PI / 4), -delta);
CGPathAddRelativeArc(path, NULL, center.x, center.y, 150 - 5 - (15 * i), (M_PI / 4) - delta, delta);
CGPathAddLineToPoint(path, NULL, center.x, center.y);

CGContextAddPath(ctx, path);
CGContextFillPath(ctx);
}

drawRight 方法是绘制橙色的，draw left 方法是绘制grouptableviewbackground 的颜色。

循环开始时，绘制第一个百分比图，当第二个循环开始时，第一个绘制的图表被当前循环百分比覆盖并绘制第二个图表，这样只显示最后一个图表

感谢任何帮助。

---

Best Answer-推荐答案

我相信你的问题就在这里 ->

 percentageArray = [[NSArray alloc] initWithObjects"80", @"76", @"92", @"49", nil];
 for (int i = 0; i < percentageArray.count; i++)
{
    [guageGraph setPercent:[percentageArray[i] intValue] withIndex:i];
}

我觉得您应该将它们添加到数组中。并在绘制完所有对象后显示它们。

编辑

第一 让你的 precentLayer 类显示不同的颜色仪表。所以将这段代码添加到 -(void)drawRight

CGFloat hue = ( arc4random() % 256 / 256.0 );  //  0.0 to 1.0
CGFloat saturation = ( arc4random() % 128 / 256.0 ) + 0.5;  //  0.5 to 1.0, away from white
CGFloat brightness = ( arc4random() % 128 / 256.0 ) + 0.5;  //  0.5 to 1.0, away from black
UIColor *randomColor = [UIColor colorWithHue:hue saturation:saturation brightness:brightness alpha:1];

//update this line
CGContextSetFillColorWithColor(ctx, randomColor.CGColor);

如果不是这样，看看它们是否只是相互重叠......

================================================ ==============================

那么因为只有一个 View ，试试这样的。

percentageArray = [[NSArray alloc] initWithObjects"80", @"76", @"92", @"49", nil];

for (int i = 0; i < percentageArray.count; i++) {

    UIView *percentGauge =[self setPercent:[percentageArray[i] intValue] withIndex:i];

    //make background clear so we can see the guage behind it
    percentGauge.backgroundColor = [UIColor clearColor];
}

并让 -(void)setPercent: withIndex: 返回一个 UIView 所以....

- (UIView *)setPercentint)percent withIndexint)i {
    CGFloat floatPercent = percent / 100.0;
    floatPercent = MIN(1, MAX(0, floatPercent));
    percentLayer.percent = floatPercent;
    percentLayer.i = i;
    [self setNeedsLayout];
    [percentLayer setNeedsDisplay];


    return self;
}

如果这没有任何帮助，您可以将您正在使用的文件上传到 Dropbox，我可以试一试。

关于ios - 使用 Coregraphics 一次绘制多个 Guage 图表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26629360/