底部的圆角 CoreGraphics iOS

Posted 2023-03-12

【中文标题】底部的圆角 CoreGraphics iOS

【英文标题】：Rounded Corners at bottom CoreGraphics iOS

【发布时间】：2013-04-13 19:19:02

【问题描述】：

绘制

底部左右边框。 底部圆角 剪辑到边框 用实际颜色填充颜色，这可能在 .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];

【参考方案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。

【讨论】：

您可能需要缩放内部矩形的cornerRadius 以使四舍五入看起来正确

jverrijt 谢谢。 @Paul.s 你能检查我的代码以了解内半径的缩放。伙计们还有一件事“添加”按钮不会被剪掉