ios - CoreGraphics iOS 底部的圆角

Question

画画

• 底部的边框，左边和右边。
• 底部圆角
• 剪到边框
• 用实际颜色填充颜色，这可能在 .xib 文件中设置，但在下面的代码中我将颜色设置为清除颜色。

对于上面的内容和下面列出的代码，我得到以下输出。

可以在下图中找到所需输出的粗略概念。

-(id) initWithCoder:(NSCoder *)aDecoder{
    self=[super initWithCoder:aDecoder];
    if(self){
        self.clipsToBounds=YES;
        self.backgroundColor=[UIColor clearColor];
    }
    return self;
}

- (void)drawRect:(CGRect)rect
{
    // Drawing code

    CGFloat margin=2.0;
    CGRect outerRect=CGRectInset(rect, margin, margin);
    CGMutablePathRef path=createRoundedRectForRect(outerRect, 10.0);

    CGFloat margin1=1.0;
    CGRect innerRect=CGRectInset(outerRect, margin1, margin1);
    CGMutablePathRef innerPath=createRoundedRectForRect(innerRect, 5.0);
    CGContextRef context=UIGraphicsGetCurrentContext();
    CGContextSaveGState(context);

    CGContextAddPath(context, path);
    CGContextAddPath(context, innerPath);
    CGContextClip(context);

    CGContextSetFillColorWithColor(context, [UIColor blueColor].CGColor
                                    );
    CGContextStrokeRect(context, rect);

    CGContextSetFillColorWithColor(context, [UIColor redColor].CGColor
                                   );
    CGContextFillRect(context, innerRect);

    CGContextRestoreGState(context);
}



CGMutablePathRef createRoundedRectForRect (CGRect rect, CGFloat radius){
    CGMutablePathRef path=CGPathCreateMutable();
    CGPathMoveToPoint(path, NULL, CGRectGetMaxX(rect), CGRectGetMinY(rect));

    CGPathAddArcToPoint(path, NULL, CGRectGetMaxX(rect), CGRectGetMaxY(rect), CGRectGetMinX(rect), CGRectGetMaxY(rect), radius);

    CGPathAddArcToPoint(path, NULL, CGRectGetMinX(rect), CGRectGetMaxY(rect), CGRectGetMinX(rect), CGRectGetMinY(rect), radius);

    CGPathAddLineToPoint(path, NULL, CGRectGetMinX(rect),CGRectGetMinY(rect));

    return path;
}

第 2 部分，更改

下面的这些更改为我提供了以下输出，其中“添加”按钮仍然重叠并且没有剪裁到边框。

输出几乎是预期的，如下图所示。

- (void)drawRect:(CGRect)rect
{
    CGSize radii=CGSizeMake(10.0, 10.0);
    UIBezierPath *path=[UIBezierPath bezierPathWithRoundedRect:rect byRoundingCorners:UIRectCornerBottomLeft|UIRectCornerBottomRight cornerRadii:radii];
    [[UIColor blackColor] setFill];
    [path fill];

    CGFloat margin=4.0;
    CGRect innerRect=CGRectMake(rect.origin.x+margin, 0, rect.size.width-(2*margin), rect.size.height-margin);

    //Scaling InnerRadii
    CGSize radii2=CGSizeMake(radii.width-margin, radii.height-margin);
    UIBezierPath *innerPath=[UIBezierPath bezierPathWithRoundedRect:innerRect byRoundingCorners:UIRectCornerBottomRight|UIRectCornerBottomLeft cornerRadii:radii2];

    [[UIColor redColor] setFill];
    [innerPath fill];

}

Answer 1

下面是我的做法。我会创建一个底部圆角的外部矩形。然后，我将复制此矩形并更改其尺寸，使其稍微变小，并将其覆盖在第一个矩形的顶部。

- (void) drawRect:(CGRect)rect
{
    UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:rect
       byRoundingCorners:UIRectCornerBottomLeft | UIRectCornerBottomRight cornerRadii:CGSizeMake(10.0f, 10.0f)];

    [[UIColor blackColor] setFill];
    [path fill];

    CGRect innerRect = CGRectInset(rect, 4.0f, 2.0f);
    innerRect.origin.y -= 2.0f;

    UIBezierPath *innerPath = [UIBezierPath bezierPathWithRoundedRect:innerRect
        byRoundingCorners:UIRectCornerBottomLeft | UIRectCornerBottomRight cornerRadii:CGSizeMake(8.0f, 8.0f)];

    [[UIColor redColor] setFill];
    [innerPath fill];
}

这会产生以下输出:

编辑:按照 Paul.s 的建议缩放 cornerRadii。