Question

我想创建一个遮罩路径，其最终输出将是一个凹面的角落。

我使用UIBezierPath方法创建了-bezierPathWithRoundedRect:byRoundingCorners:cornerRadii:并指定只需要对一个角进行舍入（在此示例中为，UIRectCornerBottomLeft ）我认为通过扭转这条道路，我应该得到最初会被削减的东西为此，我正在尝试-bezierPathByReversingPath，但它似乎没有任何区别（有或没有，因为我得到正常的bezier路径而不是反向的）

这是我到目前为止所尝试的：

UIView *vwTest = [[UIView alloc] init];
[vwTest setFrame:CGRectMake(100.0f, 100.0f, 100.0f, 100.0f)];
[vwTest setBackgroundColor:[UIColor redColor]];
[self.view addSubview:vwTest];

UIBezierPath *maskPath = [UIBezierPath bezierPathWithRoundedRect:vwTest.bounds
                                               byRoundingCorners:UIRectCornerBottomLeft
                                                     cornerRadii:CGSizeMake(50.0f, 50.0f)];

//get reverse path but doesn't seem to work as I think it should
maskPath = [maskPath bezierPathByReversingPath]; 

CAShapeLayer *maskLayer = [CAShapeLayer layer];
[maskLayer setFrame:vwTest.bounds];
[maskLayer setPath:maskPath.CGPath];

[vwTest.layer setMask:maskLayer];
[vwTest.layer setMasksToBounds:YES];
[vwTest setNeedsDisplay];

根据下面的图片，我想要实现的是显示UIView的红色部分并消除该区域的其余部分。

maskPath Idea

暂时，我在subview上做subit，并将一个子视图的颜色与主视图的背景颜色同步（很糟糕，但至少我得到了所需的输出）：

[self.view setBackgroundColor:[UIColor lightGrayColor]];

UIView *vwTest = [[UIView alloc] init];
[vwTest setFrame:CGRectMake(100.0f, 100.0f, 100.0f, 100.0f)];
[vwTest setBackgroundColor:[UIColor redColor]];
[self.view addSubview:vwTest];

UIView *vwPatch = [[UIView alloc] init];
[vwPatch setFrame:vwTest.bounds];
[vwPatch setBackgroundColor:vwTest.superview.backgroundColor];
[vwTest addSubview:vwPatch];

UIBezierPath *maskPath = [UIBezierPath bezierPathWithRoundedRect:vwPatch.bounds
                                               byRoundingCorners:UIRectCornerBottomLeft
                                                     cornerRadii:CGSizeMake(50.0f, 50.0f)];
CAShapeLayer *maskLayer = [CAShapeLayer layer];
[maskLayer setFrame:vwPatch.bounds];
[maskLayer setPath:maskPath.CGPath];

[vwPatch.layer setMask:maskLayer];
[vwPatch.layer setMasksToBounds:YES];
[vwPatch setNeedsDisplay];

有人，请指出我正确的方向。

Answer 1

通过查看问题中的代码，我假设您希望左下角（当您使用UIRectCornerBottomLeft时）是凹的半径为30.您不能使用{ {3}}正如所有这一切确实颠倒了路径，它也在文档中说：

在渲染时，反转路径不一定会改变路径的外观。

修改
现在已经在问题中添加了图像，OP需要形状的反转：

CAShapeLayer *mask = [CAShapeLayer layer]; mask.frame = view.layer.bounds; UIBezierPath *path = [UIBezierPath bezierPath]; CGFloat radius = 50; CGRect rect = mask.bounds; [path moveToPoint:CGPointMake(CGRectGetMinX(rect), CGRectGetMaxY(rect))]; [path addLineToPoint:CGPointMake(CGRectGetMinX(rect), CGRectGetMaxY(rect) - radius)]; [path addArcWithCenter:CGPointMake(CGRectGetMinX(rect) + radius, CGRectGetMaxY(rect) - radius) radius:radius startAngle:M_PI endAngle:M_PI_2 clockwise:NO]; [path closePath]; mask.path = path.CGPath; view.layer.mask = mask;

然后路径的形状是问题中OPs图像的红色位。

发布图片前的答案 - 可能会用于其他人

以下代码将生成此形状：

CGFloat cornerRadius = 30; CGRect rect = CGRectMake(0, 0, 200, 100); UIBezierPath *path = [UIBezierPath bezierPath]; // Draw the complete sides [path moveToPoint:rect.origin]; [path addLineToPoint:CGPointMake(CGRectGetMaxX(rect), CGRectGetMinY(rect))]; [path addLineToPoint:CGPointMake(CGRectGetMaxX(rect), CGRectGetMaxY(rect))]; // Stop short for the start of the arc [path addLineToPoint:CGPointMake(CGRectGetMinX(rect) + cornerRadius, CGRectGetMaxY(rect))]; // Concave arc [path addArcWithCenter:CGPointMake(CGRectGetMinX(rect), CGRectGetMaxY(rect)) radius:cornerRadius startAngle:0 endAngle:M_PI_2 * 3 clockwise:NO]; // Complete the path [path closePath];

更新：有用的类别

UIBezierPath上的类别，因此您可以选择哪些角（UIRectCorner s的位掩码）和半径。

<强> UIBezierPath + RDHConcaveCorners.h

@interface UIBezierPath (RDHConcaveCorners) +(instancetype)bezierPathWithRoundedRect:(CGRect)rect byConcaveRoundingCorners:(UIRectCorner)corners cornerRadius:(CGFloat)radius; @end

<强> UIBezierPath + RDHConcaveCorners.m

@implementation UIBezierPath (RDHConcaveCorners) +(instancetype)bezierPathWithRoundedRect:(CGRect)rect byConcaveRoundingCorners:(UIRectCorner)corners cornerRadius:(CGFloat)cornerRadius { CGFloat halfWidth = CGRectGetWidth(rect) / 2; CGFloat halfHeight = CGRectGetHeight(rect) / 2; if (cornerRadius > halfWidth || cornerRadius > halfHeight) { cornerRadius = MIN(halfWidth, halfHeight); } UIBezierPath *path = [self bezierPath]; CGPoint topLeft = CGPointMake(CGRectGetMinX(rect), CGRectGetMinY(rect)); if (corners & UIRectCornerTopLeft) { [path moveToPoint:CGPointMake(topLeft.x, topLeft.y + cornerRadius)]; [path addArcWithCenter:topLeft radius:cornerRadius startAngle:M_PI_2 endAngle:0 clockwise:NO]; } else { [path moveToPoint:topLeft]; } CGPoint topRight = CGPointMake(CGRectGetMaxX(rect), CGRectGetMinY(rect)); if (corners & UIRectCornerTopRight) { [path addLineToPoint:CGPointMake(topRight.x - cornerRadius, topRight.y)]; [path addArcWithCenter:topRight radius:cornerRadius startAngle:M_PI endAngle:M_PI_2 clockwise:NO]; } else { [path addLineToPoint:topRight]; } CGPoint bottomRight = CGPointMake(CGRectGetMaxX(rect), CGRectGetMaxY(rect)); if (corners & UIRectCornerBottomRight) { [path addLineToPoint:CGPointMake(bottomRight.x, bottomRight.y - cornerRadius)]; [path addArcWithCenter:bottomRight radius:cornerRadius startAngle:M_PI_2 * 3 endAngle:M_PI clockwise:NO]; } else { [path addLineToPoint:bottomRight]; } CGPoint bottomLeft = CGPointMake(CGRectGetMinX(rect), CGRectGetMaxY(rect)); if (corners & UIRectCornerBottomLeft) { [path addLineToPoint:CGPointMake(bottomLeft.x + cornerRadius, bottomLeft.y)]; [path addArcWithCenter:bottomLeft radius:cornerRadius startAngle:0 endAngle:M_PI_2 * 3 clockwise:NO]; } else { [path addLineToPoint:bottomLeft]; } // Complete the path [path closePath]; return path; } @end

反转UIBezierPath用于单侧拐角

1 个答案:

更新：有用的类别