ios - 在核心图形中绘制圆角矩形

Question

我想复制默认 iPad 日历的事件标记，如下所示：

我正在尝试为此使用 coregraphics，绘制圆角矩形的路径。这是我能想到的结果：

如您所见，iPad 的版本在圆角上看起来更加平滑。我尝试使用更大的线宽，如下所示：

我的代码如下所示（从这个网站获得）：

UIColor* fillColor= [self.color colorByMultiplyingByRed:1 green:1 blue:1 alpha:0.2];

CGContextSetLineWidth(ctx, 1.0);
CGContextSetStrokeColorWithColor(ctx, self.color.CGColor);
CGContextSetFillColorWithColor(ctx, fillColor.CGColor);

CGRect rrect = self.bounds;

CGFloat radius = 30.0;
CGFloat width = CGRectGetWidth(rrect);
CGFloat height = CGRectGetHeight(rrect);

if (radius > width/2.0)
   radius = width/2.0;

if (radius > height/2.0)
   radius = height/2.0;    

CGFloat minx = CGRectGetMinX(rrect);
CGFloat midx = CGRectGetMidX(rrect);
CGFloat maxx = CGRectGetMaxX(rrect);
CGFloat miny = CGRectGetMinY(rrect);
CGFloat midy = CGRectGetMidY(rrect);
CGFloat maxy = CGRectGetMaxY(rrect);
CGContextMoveToPoint(ctx, minx, midy);
CGContextAddArcToPoint(ctx, minx, miny, midx, miny, radius);
CGContextAddArcToPoint(ctx, maxx, miny, maxx, midy, radius);

CGContextAddArcToPoint(ctx, maxx, maxy, midx, maxy, radius);
CGContextAddArcToPoint(ctx, minx, maxy, minx, midy, radius);
CGContextClosePath(ctx);
CGContextDrawPath(ctx, kCGPathFillStroke);

// draw circle on left side

CGRect target= CGRectMake(rect.origin.x + 4.0, 
                          rect.origin.y + 3.0, 
                          7.0, 7.0);

CGContextSetFillColorWithColor(ctx, self.color.CGColor);
CGContextSetAlpha(ctx, 0.4);
CGContextFillEllipseInRect(ctx, target);

CGContextSetAlpha(ctx, 0.9);
CGContextSetStrokeColorWithColor(ctx, self.color.CGColor);
CGContextStrokeEllipseInRect(ctx, target);

任何人都可以帮助我使结果更接近原始结果吗？我应该使用不同的技术来绘制圆角矩形，还是可以更改任何参数以使其看起来更平滑？我已经尝试过使用 a UIBezierPath，但它看起来基本相同。有小费吗？

[编辑]CGRectInset基于 - 的解决方案如下所示：

Answer 1

您的问题是描边应用在路径的中心，其中一半被裁剪/遮蔽到视图的边界，因为它在视图之外绘制。如果您在每个方向上插入一个点，您将获得您正在寻找的结果。如果您增加笔画的宽度，您将需要进一步插入绘图（笔画宽度的一半（即 4 点宽的笔画应插入 2 点）。

这可以通过更改轻松解决

CGRect rrect = self.bounds;

进入

// Inset x and y by half the stroke width (1 point for 2 point stroke) 
CGRect rrect = CGRectInset(self.bounds, 1, 1);

Answer 2

这是因为笔划以路径为中心，这意味着它的一半在矩形内部，另一半在外部。

要解决此问题，请将您的笔画宽度加倍并在笔画之前剪辑到路径。结果是一个内部笔划，它将完全在矩形内。

请注意，在 Quartz 中剪切到当前路径将重置当前路径，因此您应该将路径创建为 CGPath，以便您可以添加、剪切、再次添加和描边。