0

我想在 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 周围，则只有第二个条形角是圆角的。

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

4

3 回答 3

3

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

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

重要提示：如果需要移除裁剪区域进行后续的绘制操作，必须在调用该方法之前保存当前的图形状态（使用CGContextSaveGState函数）。当您不再需要剪切区域时，您可以使用 CGContextRestoreGState 函数恢复之前的绘图属性和剪切区域。

所以你应该保存之前的图形状态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);

}

效果如下：

在此处输入图像描述

于 2013-04-20T10:33:01.327 回答
2

这不过是UIView带有渐变和圆角的。这对你来说绰绰有余。

圆角：

#import <QuartzCore/QuartzCore.h>
...

view.layer.cornerRadius = 5;
view.layer.masksToBounds = YES;

取自这里。

于 2013-04-19T19:36:05.493 回答
1

如果您想节省一些编码，请查看Core Plot，这是一个用于绘制和动画图形的 Mac/iOS 框架。

于 2013-04-20T00:05:28.073 回答