iOS 绘制简单的条形图像 Mint 应用程序

Question

我想创建一个自定义单元格，就像 Mint 应用程序中的单元格一样，它的功能几乎相同。我如何使用赚取和花费的数据绘制这两个条形图？

谢谢，

我做到了这一点:

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

    UIColor * earningStartColor = [UIColor colorWithRed:15/255.0f green:227/255.0f blue:0/255.0f alpha:1.0f];
    UIColor * earningEndColor = [UIColor colorWithRed:15/255.0f green:188/255.0f blue:0/255.0f alpha:1.0f];

    CGRect earningRect = CGRectMake(5, 32, 60, 13);

    UIBezierPath *pathE = [UIBezierPath bezierPathWithRoundedRect:earningRect
                                                     cornerRadius:3.0];
    [pathE addClip];

    drawGlossAndGradient(context, earningRect, earningStartColor.CGColor, earningEndColor.CGColor);


    UIColor * spentStartColor = [UIColor colorWithRed:255/255.0f green:88/255.0f blue:67/255.0f alpha:1.0f];
    UIColor * spentEndColor = [UIColor colorWithRed:255/255.0f green:52/255.0f blue:49/255.0f alpha:1.0f];

    CGRect spentRect = CGRectMake(5, 52, 25, 13);    

    UIBezierPath *pathS = [UIBezierPath bezierPathWithRoundedRect:spentRect
                                                    cornerRadius:5.0];
    [pathS addClip];

    drawGlossAndGradient(context, spentRect, spentStartColor.CGColor, spentEndColor.CGColor);
}

但是，在 addClip 之后绘图停止，因此只显示一个条。如果我将 addClip 包裹在 CGContextSaveGState 和 CGContextRestoreGState 周围，只有第二个条角是圆角的。

我还尝试将 View 子类化并在 View 上绘制，然后作为 subview 添加到我的 tableviewcell 并使用 cornerRadius，但绘图实际上位于 View 后面，因此它显示为圆形 View (及其背景)后面的矩形条。我认为这应该比现在更容易。

Answer 1

你的错误是因为 [pathE addClip];

关于 addClip 方法，苹果文档说:

Important: If you need to remove the clipping region to perform subsequent drawing operations, you must save the current graphics state (using the CGContextSaveGState function) before calling this method. When you no longer need the clipping region, you can then restore the previous drawing properties and clipping region using the CGContextRestoreGState function.

所以应该保存addClip之前的图形状态，恢复addClip之后的图形状态

这可以帮助你:

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

    UIColor * earningStartColor = [UIColor colorWithRed:15/255.0f green:227/255.0f blue:0/255.0f alpha:1.0f];
    UIColor * earningEndColor = [UIColor colorWithRed:15/255.0f green:188/255.0f blue:0/255.0f alpha:1.0f];

    CGRect earningRect = CGRectMake(5, 32, 60, 13);

    UIBezierPath *pathE = [UIBezierPath bezierPathWithRoundedRect:earningRect
                                                     cornerRadius:3.0];
    CGContextSaveGState(context);
    [pathE addClip];

    drawGlossAndGradient(context, earningRect, earningStartColor.CGColor, earningEndColor.CGColor);
    CGContextRestoreGState(context);

    UIColor * spentStartColor = [UIColor colorWithRed:255/255.0f green:88/255.0f blue:67/255.0f alpha:1.0f];
    UIColor * spentEndColor = [UIColor colorWithRed:255/255.0f green:52/255.0f blue:49/255.0f alpha:1.0f];

    CGRect spentRect = CGRectMake(5, 52, 25, 13);

    UIBezierPath *pathS = [UIBezierPath bezierPathWithRoundedRect:spentRect
                                                     cornerRadius:5.0];
    [pathS addClip];

    drawGlossAndGradient(context, spentRect, spentStartColor.CGColor, spentEndColor.CGColor);
}

PS:我认为您可以将您的drawGlossAndGradient 发布到stackoverflow，这样其他人就可以轻松提供帮助，并且可能对搜索答案的其他人有所帮助。

然后我伪造了drawGlossAndGradient 方法

void drawGlossAndGradient(CGContextRef context, CGRect rect, CGColorRef startColor,
                          CGColorRef endColor) {
    CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
    CGFloat locations[] = {0.0, 1.0};

    NSArray *colors = [NSArray arrayWithObjects:(__bridge id) startColor, (__bridge id) endColor, nil];

    CGGradientRef gradient = CGGradientCreateWithColors(colorSpace,
                                                        (__bridge CFArrayRef) colors, locations);

    CGPoint startPoint = CGPointMake(CGRectGetMidX(rect), CGRectGetMinY(rect));
    CGPoint endPoint = CGPointMake(CGRectGetMidX(rect), CGRectGetMaxY(rect));

    CGContextAddRect(context, rect);
    CGContextClip(context);
    CGContextDrawLinearGradient(context, gradient, startPoint, endPoint, 0);

    CGGradientRelease(gradient);
    CGColorSpaceRelease(colorSpace);

}

效果是这样的: