在核心图形中绘制圆角矩形 [英] Drawing rounded rect in core graphics

问题描述

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

I want to replicate the event markers of the default iPad calendar, which look like this:

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

I'm trying to use coregraphics for this, painting a path of a rounded rect. This is the result I could come up with:

正如你所看到的，iPad的版本在圆角处看起来更平滑。我尝试使用更大的线宽，如下所示：

As you can see, iPad's version looks much smoother on the rounded corners. I tried to use a bigger line width, which looks like this:

我的代码看起来像这样（从这个网站得到）：

My code looks like this (got it from this website):

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);

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

Can anyone help me to bring the results closer to the original? Should I use a different technique to paint the rounded rect, or are there any parameters I can change to make it look smoother? I already tried using a UIBezierPath, but it basically looked the same. Any tips?

[edit]基于 CGRectInset 的解决方案如下所示：

[edit] The CGRectInset-based solution looks like this:

推荐答案

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

Your problem is that the stroke is applied on the center of the path and half of it gets cropped/masked to the bounds of your view since it draws outside of your view. If you inset your drawing one point in every direction you will have the result you are looking for. If you increase the width of the stroke you will need to inset the drawing further (by half the width of the stroke (i.e a 4 points wide stroke should be inset 2 points).

这可以通过更改来轻松修复

This can easily be fixed by changing

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);

这篇关于在核心图形中绘制圆角矩形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！