核心图形：抚摸时圆形路径之间的间隙

Question

我正在使用 Core Graphics 在 iphone 上制作一个圆角矩形浮动对话框。当沿同心圆角矩形路径应用笔划时，笔划之间的间隙总是出现在角落中。这些相同的笔画并排放置在直线段上。

代码的相关摘录（无关代码已删除）：

-(void)drawRect:(CGRect)rect {
    CGRect borderRect = CGRectInset(rect, 1.0, 1.0);
    UIBezierPath *borderPath = [UIBezierPath bezierPathWithRoundedRect:borderRect cornerRadius:6.0];
    [...]
    CGContextSetStrokeColorWithColor(context, bevelStrokeColor);
    CGContextSetLineWidth(context, 2.0);
    CGContextAddPath(context, borderPath.CGPath);
    CGContextStrokePath(context);
    [...]
    CGRect inlayRect = CGRectInset(rect, inlayPathInset, inlayPathInset);
    UIBezierPath *inlayPath = [UIBezierPath bezierPathWithRoundedRect:inlayRect cornerRadius:6.0];
    [...]
    CGContextSetStrokeColorWithColor(context, inlayStrokeColor);
    CGContextSetLineWidth(context, 2.0);
    CGContextAddPath(context, inlayPath.CGPath);
    CGContextStrokePath(context);
    [...]
}

这是一张图片：

我尝试了上面发布的代码的不同版本。我已经手动创建了路径，使用 UIBezierPath 实例方法来创建和绘制，并且我已经通过视图的图层以及其他一些想法以各种组合设置了cornerRadius。他们中的一些人改善了这些问题，但并没有得到消除。

如果我只使用边框，我不会介意，但我也将实施一些同心圆角矩形，这个差距将是一个问题。

编辑：更正了转录时出现的代码拼写错误。

Answer 1

在这种情况下，您的第二个角半径也必须与您的 inlaypathinset 相减。内半径必须更小，否则圆段不完全同心。

如果在同心旁边，您还希望两个圆角矩形都接触，则插图需要是两个线宽的平均值。

Answer 2

如果lineWidth 对所有笔划都相同，则将innerCornerRadius 设置为(outerCornerRadius - lineWidth) 似乎会产生所需的效果；这是一个特例。如果您不相信以下内容，我鼓励您进行测试。支配这一点的真正关系似乎如下：

l_i = 线宽内

l_o = 外线宽

r_i = 内圆角半径

r_o = 外圆角半径

l_i/2 + r_i = r_o - l_o/2

因此： r_i = r_o - (l_i/2 + l_o/2)

如果 l_i = l_o = l 那么： r_i = r_o - l

/*
 The following should be inserted into a UIView subclass that has a size of ~280, ~200.

 lineWidthInner/2 + radiusInner = radiusOuter - lineWidthOuter/2
 radiusInner = radiusOuter - (lineWidthOuter + lineWidthInner)/2

 That is to say that the inner corner radius is equal to the outer corner radius 
     minus the average of the lineWidth's.


 innerInsetMargin = outerInsetMargin + (lineWidthOuter + lineWidthInner)/2

 The amount a line must be inset (insetMargin) is the previous line's insetMargin + the 
     average of the previous and current lineWidth's.  In the case in which the 
     outermost line's outer edge touches the bound of rect, the insetMargin is equal 
     to the sum of all previous lineWidth's plus half of the current lineWidth.

 Shutting off anti-aliasing is required to prevent alpha-blending of the non-rectilinear 
     parts of the line with the background.  I am not sure how to gracefully sidestep this.
     Insights into this would be appreciated.
*/
-(void)drawRect:(CGRect)rect {
    CGContextRef context = UIGraphicsGetCurrentContext();

    CGContextSetFillColorWithColor(context, UIColor.blackColor.CGColor);
    CGContextFillRect(context, rect);
    CGContextSetShouldAntialias(context,NO);

    NSArray *colors = [NSArray arrayWithObjects:
                       (id)UIColor.greenColor.CGColor, 
                       (id)UIColor.lightGrayColor.CGColor, 
                       (id)UIColor.yellowColor.CGColor,
                       (id)UIColor.blueColor.CGColor,
                       (id)UIColor.redColor.CGColor, nil];

    //Change lineWidth, lineWidthIncrement, or currentCornerRadius as you see fit
    CGFloat lineWidthIncrement = 1.0;
    CGFloat lineWidth = 10.0;
    CGFloat currentCornerRadius = 100.0;
    CGFloat insetMargin = lineWidth/2;

    do {
        CGContextSaveGState(context);
        CGContextSetStrokeColorWithColor(context, (CGColorRef)[colors objectAtIndex:(lcv % colors.count)]);
        CGContextSetLineWidth(context, lineWidth);
        CGContextAddPath(context, [UIBezierPath bezierPathWithRoundedRect:CGRectInset(rect, insetMargin, insetMargin) cornerRadius:currentCornerRadius].CGPath);
        CGContextStrokePath(context);
        CGContextRestoreGState(context);

        lineWidth += lineWidthIncrement;
        currentCornerRadius -= 0.5 * (lineWidth + (lineWidth - lineWidthIncrement));//-0.5*(lwi+lwo)
        insetMargin += 0.5 * (lineWidth + (lineWidth - lineWidthIncrement));

    } while(currentCornerRadius>0);

}