ios - UIBezierPath 添加了产生幻影三角形的弧段

Question

我正在编写一个方法来创建一个 UIImageView，它包含一个透明的 UIImage，在左上角或右上角有一个圆角(如果我添加这个图像到 UIView 使用与 View 后面的颜色相同的颜色，它会产生圆角的错觉 - 我知道 CALayer 的圆角但我没有使用它是有原因的)。

如果角类型为 UIRectCornerTopLeft，下面的代码将按预期工作。 UIRectCornerTopRight 案例在图像的右上角绘制了圆角位，但出于某种原因，它还添加了一个“幻影”填充三角形，其顶点从左上角延伸到左下角右下角，然后回到左上角。我不知道这个幻影三角形是从哪里来的，因为我没有在任何地方指定左下角。

请帮忙，我要疯了。这是代码:

+ (UIImageView *)roundedCornerImageOfWidth:(CGFloat)width withCornerBackgroundColor:(UIColor *)cornerColor forCorner:(UIRectCorner)corner {

    CGRect rect = CGRectMake(0, 0, width, width);
    UIGraphicsBeginImageContextWithOptions(CGSizeMake(width, width), NO, 0.0);
    CGContextRef context = UIGraphicsGetCurrentContext();

    // fill image with transparent background
    CGContextSetFillColorWithColor(context, [UIColor clearColor].CGColor);
    CGContextFillRect(context, rect);

    // set the color for solid corner
    CGContextSetFillColorWithColor(context, [cornerColor CGColor]);

    UIBezierPath *maskPath = [UIBezierPath bezierPath];


    switch (corner) {
        case UIRectCornerTopLeft:
        {
            CGPoint pt;
            pt = CGPointMake(0, width); // lower left
            [maskPath moveToPoint:pt];
            pt = CGPointMake(0, 0); // upper left
            [maskPath addLineToPoint:pt];
            pt = CGPointMake(width, 0); // upper right
            [maskPath addLineToPoint:pt];
            // arc back to lower left
            [maskPath addArcWithCenter:CGPointMake(width, width) radius:width startAngle:0 endAngle:-2 * M_PI clockwise:NO];
        }
            break;

        case UIRectCornerTopRight:
        {
            CGPoint pt;
            pt = CGPointMake(0, 0); // upper left
            [maskPath moveToPoint:pt];
            // arc down to lower right
            [maskPath addArcWithCenter:CGPointMake(0, width) radius:width startAngle:0 endAngle:2 * M_PI clockwise:YES];
            pt = CGPointMake(width, 0); // upper right
            [maskPath addLineToPoint:pt];
            pt = CGPointMake(0, 0); // upper left
            [maskPath addLineToPoint:pt];
        }
            break;

        default:
            break;
    }

    [maskPath closePath];
    [maskPath fill];

    UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();

    UIImageView *imageView = [[UIImageView alloc] initWithImage:image];
    imageView.backgroundColor = [UIColor clearColor];
    imageView.frame = CGRectMake(0, 0, width, width);

    return imageView;
}

Answer 1

起始角使用 3/2 PI，结束角使用 2 PI

您可以引用 UIBezierPath 文档了解如何指定角度。在第一个解决方案中，3/2 PI 实际上是指直线向上的角度，因此圆弧从顶部开始，2 PI(相当于 0，但这里不是因为我们需要指定方向，即顺时针/counter-clockwise) 是由向右的线创建的角度(以度为单位，这是 360 度(我将再次指出它与 0 度在同一位置)，因此您的圆弧在相交点结束以那个角度。