在覆盖UIView上的右下角创建四分之一透明孔 [英] create quarter transparent hole at right bottom on overlay UIView

问题描述

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

Hi i want to create a quarter transparent hole at right bottom on overlay UIView.

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

i am able to solve it using below code. But it does not look right as i am creating a rectangle outside the bond of view.

我尝试过：

@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);
        }
}

现在我使用上面的代码：

Now i am using above code as :

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

按预期结果：

我知道如果我必须在视图的左上角执行相同的操作，我的解决方案将会中断。
我正在寻找的只是提供圆心的中心（x，y）和半径并获得所需的结果。

i know my solution will break if i have to acheive same thing but on top left of view. what i am looking for just provide center (x, y) and radius for circle and get desired results.

谢谢
基于Mr.T

Thanks Basd on Mr.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

and circleView.m

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

输出：

推荐答案

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

My suggestions is to add the transparent view as a separate view on your view controller. This can be either done on storyboard,so that you can set the background color and the alpha value to give the transparent effect!!!

现在创建另一个视图来制作圆圈并将其添加到透明查看，并根据您的需要在透明视图上移动此视图！ !!

Now create another view to make the circle and add it to transparent view, , and move this view on the transparent view according to your need!!!

使用 bezier路径创建圆圈：

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上创建了一个圆形视图并创建了一个我的视图控制器中的outlet属性。

For testing purpose, I have created a circle view on my IB and created an outlet property in my view controller.

HEre是屏幕截图。

HEre is the screenshot.

现在移动圆圈，我只需更改圆圈的框架 view ，无论在哪里我需要。

Now to move the circle, I can simply change the frame of the circle view, wherever I need.

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

For example, If I want to move it to top left, I simply do:

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

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


}

结果将是：

更新

将下面的transparentView的drawRect方法放入：

Put the following the drawRect method of transparentView:

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);

并在您的视图控制器中：

and in your view controller:

当你想要应用遮罩时，即透明圆圈和透明层：

when you want to apply the mask i.e the transparent for both circle and for the transparent layer:

-(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];


}

一旦你这样做，你会得到透明度视图!!!

Once you do this, you will get the transparency view!!!

您只需拨打

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

您可以通过简单地调用：

and you can apply the transparency mask by simply calling:

      [self applyMask];

因此，调用 applyMask后的最终结果方法将是：

< img src =https://i.stack.imgur.com/XwLFT.pngalt =在此处输入图像说明>

这篇关于在覆盖UIView上的右下角创建四分之一透明孔的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！