在绘图核心显卡圆角的矩形(Drawing rounded rect in core graphics

2019-06-24 09:07发布

我想复制默认的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);

谁能帮我带来的结果更接近原始? 我应该使用不同的技术来绘制圆角的矩形,还是有我可以改变,使其看起来更加平滑任何参数? 我已经尝试过使用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:

这是因为行程的路径,这意味着它的一半是你的矩形内,另一半在外面上居中。

为了解决这个问题,加倍您的行程宽度和夹的路径抚摸之前。 其结果是内行程,这将是完全的矩形范围内。

需要注意的是剪裁到石英当前路径将重置当前路径,所以你应该创建路径作为CGPath这样您就可以将其添加剪辑,将其再次添加它,和中风它。



文章来源: Drawing rounded rect in core graphics