在覆盖 UIView 的右下角创建四分之一透明孔

Posted 2023-03-13

【中文标题】在覆盖 UIView 的右下角创建四分之一透明孔

【英文标题】：create quarter transparent hole at right bottom on overlay UIView

【发布时间】：2015-11-25 18:46:40

【问题描述】：

您好，我想在覆盖 UIView 的右下角创建一个四分之一透明的孔。

我可以使用下面的代码来解决它。但它看起来不正确，因为我在视野之外创建了一个矩形。

我尝试过的：

@implementation PartialTransparentView

- (id)initWithBottomRightCornerRadiusForView:(UIView *)view   withRadius:(CGFloat)radius

[self commonInitWithRect:CGRectMake(view.frame.size.width - radius,  view.frame.size.height - radius, radius*2, radius*2)];
self = [super initWithFrame:CGRectMake(0, 0, 5000, 5000)];//**it does not look right to me**
if (self) 
    // Initialization code
    self.opaque = NO;

return self;


-(void)commonInitWithRect:(CGRect)rect
    backgroundColor = [UIColor colorWithWhite:1 alpha:0.75];
    rectToBeSurrounded = rect;

- (void)drawRect:(CGRect)rect 

    [backgroundColor setFill];
    UIRectFill(rect);



        CGFloat x = rectToBeSurrounded.origin.x;
        CGFloat y = rectToBeSurrounded.origin.y;

        CGFloat width = rectToBeSurrounded.size.width;
        CGFloat height = rectToBeSurrounded.size.height;

        //create outer square
        CGFloat outerX = (x - width/2);
        CGFloat outerY = y - height/2;
        CGFloat outerWidth = 2*width;
        CGFloat outerHeight = outerWidth;
        //create outer square

        CGRect outerRect = CGRectMake(outerX, outerY, outerWidth, outerHeight);

        CGRect holeRectIntersection = CGRectIntersection( outerRect, rect );

        CGContextRef context = UIGraphicsGetCurrentContext();

        if( CGRectIntersectsRect( holeRectIntersection, rect ) )
        
            CGContextAddEllipseInRect(context, holeRectIntersection);
            CGContextClip(context);
            CGContextClearRect(context, holeRectIntersection);
            CGContextSetFillColorWithColor( context, [UIColor clearColor].CGColor );
            CGContextFillRect( context, holeRectIntersection);
        

现在我将上面的代码用作：

PartialTransparentView *transparentView = [[PartialTransparentView alloc] initWithBottomRightCornerRadiusForView:self.view withRadius:50];
[self.view addSubview:transparentView];

结果如预期：

我知道如果我必须实现相同的目标但在视图的左上角，我的解决方案将会中断。 我正在寻找的只是提供圆的中心 (x, y) 和半径并获得所需的结果。

谢谢 基于T先生

UIView *transparentView = [[UIView alloc] initWithFrame:self.view.frame];
    [transparentView setBackgroundColor:[UIColor colorWithWhite:1 alpha:0.75]];
    [self.view addSubview:transparentView];

    circleView *acircleView = [[circleView alloc] initWithFrame:CGRectMake(50, 50, 60, 60)];
    [acircleView setBackgroundColor:[UIColor grayColor]];
    [transparentView addSubview:acircleView];

和circleView.m

- (void)drawRect:(CGRect)rect 
    // Drawing code
    //// Oval Drawing
    UIBezierPath* ovalPath = [UIBezierPath bezierPathWithOvalInRect: CGRectMake(50, 50, 60, 60)];
    [UIColor.grayColor setFill];
    [ovalPath fill];

输出：

【问题讨论】：

你需要一种方法来传递参数来绘制 Rect 方法吗？你问的是这个吗？

基本上我的 drawRect 依赖于 rectToBeSurrounded 变量。至于创建一个圆圈，我必须创建一个正方形。我能够在 commonInitWithRect 中初始化/填充这个 var

你不要简单地用贝塞尔路径画一个圆圈，然后根据需要在叠加层上移动它吗？

5000、5000 的视图宽度高度看起来不错。我做错了什么，所以我必须接受 5000、5000。如果我不接受 5000，则不需要 5000 的结果

让我提供一种方法来完成您的任务

【参考方案1】：

我的建议是在您的视图控制器上添加透明的view 作为单独的view。这可以在storyboard 上完成，这样您就可以设置背景颜色和alpha 值以提供透明效果！！！

现在再创建一个view来制作圆圈并将其添加到透明view，然后根据需要将这个view移动到透明view上！！！

使用bezier path创建圈子：

circleView.m

 - (void)drawRect:(CGRect)frame 
    //// Oval Drawing
    UIBezierPath* ovalPath = [UIBezierPath bezierPathWithOvalInRect: CGRectMake(CGRectGetMinX(frame), CGRectGetMinY(frame), 60, 60)];
    [UIColor.grayColor setFill];
    [ovalPath fill];

出于测试目的，我在我的 IB 上创建了一个圆形视图，并在我的视图控制器中创建了一个插座属性。

这里是截图。

现在要移动圆圈，我可以在任何需要的地方更改圆圈的框架view。

例如，如果我想将它移到左上角，我只需这样做：

-(void)moveCircleViewwithX:(float) x withY:(float) y

    _cView.frame=CGRectMake(x, y, _cView.frame.size.width, _cView.frame.size.height);

结果将是：

更新

把transparentView的drawRect方法如下：

CGContextRef ctx = UIGraphicsGetCurrentContext();
CGRect transparentPart = self.seeRect;           //this is the rect of the circle view
CGContextAddEllipseInRect(ctx,transparentPart);  //make the circle shape
CGContextClip(ctx);
CGContextClearRect(ctx, transparentPart);

在您的视图控制器中：

当您想要应用蒙版时，即圆形和透明层的透明：

-(void)applyMask

    [_cView setCircleColor:[UIColor clearColor]];   //circle view bezier path color
    [_cView setNeedsDisplay];
    [_tView setSeeRect:_cView.frame];    //set the transparency cut on transparency view
    [_tView setNeedsDisplay];

一旦你这样做了，你会得到透明视图！！！

你可以通过调用来移动圆圈

      [self moveCircleViewwithX:-30 withY:10];   //top left corner

您可以通过简单地调用来应用透明蒙版：

      [self applyMask];

所以，调用applyMask 方法后的最终结果将是：

【讨论】：

确定您的插座尺寸？它应该是 60x60

如果要增加圆的大小，也可以在draw rect方法中增加

你甚至可以在没有插座的情况下做到这一点！！！我用插座来简单解释！！！！您可以通过添加 uiview 并使其背景颜色透明来以编程方式添加透明视图

您打算将圆圈移动到整个视图还是仅移动到视图的四个角？

你可以让圆圈透明，但是圆圈后面还有另一个视图是透明的，如果你让圆圈透明，它会显示它的后面视图！！！！应该有办法屏蔽层，我会尽快更新我的答案，！！！