Schneiden Sie ein transparentes Loch in UIView

Dies ist meine Umsetzung (so wie ich benötigt eine view-mit transparenten Teile):

Header (.h) Datei:

//Subclasses UIview to draw transparent rects inside the view

#import <UIKit/UIKit.h>

@interface PartialTransparentView : UIView {
    NSArray *rectsArray;
    UIColor *backgroundColor;
}

- (id)initWithFrame:(CGRect)frame backgroundColor:(UIColor*)color andTransparentRects:(NSArray*)rects;

@end

Umsetzung (.m) Datei:

#import "PartialTransparentView.h"
#import <QuartzCore/QuartzCore.h>

@implementation PartialTransparentView

- (id)initWithFrame:(CGRect)frame backgroundColor:(UIColor*)color andTransparentRects:(NSArray*)rects
{
    backgroundColor = color;
    rectsArray = rects;
    self = [super initWithFrame:frame];
    if (self) {
        //Initialization code
        self.opaque = NO;
    }
    return self;
}

//Only override drawRect: if you perform custom drawing.
//An empty implementation adversely affects performance during animation.
- (void)drawRect:(CGRect)rect
{
    //Drawing code
    [backgroundColor setFill];
    UIRectFill(rect);

    //clear the background in the given rectangles
    for (NSValue *holeRectValue in rectsArray) {
        CGRect holeRect = [holeRectValue CGRectValue];
        CGRect holeRectIntersection = CGRectIntersection( holeRect, rect );
        [[UIColor clearColor] setFill];
        UIRectFill(holeRectIntersection);
    }

}


@end

Nun um das hinzufügen einer Ansicht mit teilweiser Transparenz, die Sie benötigen, zu importieren PartialTransparentView benutzerdefinierte UIView-Unterklasse, dann verwenden Sie es wie folgt:

NSArray *transparentRects = [[NSArray alloc] initWithObjects:[NSValue valueWithCGRect:CGRectMake(0, 50, 100, 20)],[NSValue valueWithCGRect:CGRectMake(0, 150, 10, 20)], nil];
PartialTransparentView *transparentView = [[PartialTransparentView alloc] initWithFrame:CGRectMake(0,0,200,400) backgroundColor:[UIColor colorWithWhite:1 alpha:0.75] andTransparentRects:rects];
[self.view addSubview:backgroundView];

Dadurch wird eine Sicht erstellen, die mit 2 transparenten rects.
Natürlich können Sie hinzufügen, wie viele rects, wie Sie möchten, oder verwenden Sie einfach eine.
Der obige code ist nur die Handhabung Rechtecke, so dass, wenn Sie möchten, verwenden Sie Kreise, Sie haben es zu ändern.

InformationsquelleAutor der Antwort Lefteris

Ich verwendet UIBezierPath zu handhaben, schneiden die transparente Loch.
Der folgende code wird in eine Unterklasse der UIView dass Sie möchten, zeichnen Sie ein transparent, Loch:

- (void)drawRect:(CGRect)rect {
    [super drawRect:rect];

    CGContextRef context = UIGraphicsGetCurrentContext();
    //Clear any existing drawing on this view
    //Remove this if the hole never changes on redraws of the UIView
    CGContextClearRect(context, self.bounds);

    //Create a path around the entire view
    UIBezierPath *clipPath = [UIBezierPath bezierPathWithRect:self.bounds];

    //Your transparent window. This is for reference, but set this either as a property of the class or some other way
    CGRect transparentFrame;
    //Add the transparent window
    UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:transparentFrame cornerRadius:5.0f];
    [clipPath appendPath:path];

    //NOTE: If you want to add more holes, simply create another UIBezierPath and call [clipPath appendPath:anotherPath];

    //This sets the algorithm used to determine what gets filled and what doesn't
    clipPath.usesEvenOddFillRule = YES;
    //Add the clipping to the graphics context
    [clipPath addClip];

    //set your color
    UIColor *tintColor = [UIColor blackColor];

    //(optional) set transparency alpha
    CGContextSetAlpha(context, 0.7f);
    //tell the color to be a fill color
    [tintColor setFill];
    //fill the path
    [clipPath fill];
}

InformationsquelleAutor der Antwort mikeho

@mosib die Antwort war eine große Hilfe für mich, bis ich wollte, mehr zu zeichnen als eine kreisrunde Ausschnitte aus meiner Sicht. Nach ein bisschen kämpfen, ich aktualisierte meine drawRect wie folgt aus (code in swift...leider schlechte Bearbeitung):

override func drawRect(rect: CGRect)
{     
    backgroundColor.setFill()   
    UIRectFill(rect)

    let layer = CAShapeLayer()
    let path = CGPathCreateMutable()

    for aRect in self.rects
    {
        let holeEnclosingRect = aRect
        CGPathAddEllipseInRect(path, nil, holeEnclosingRect) //use CGPathAddRect() for rectangular hole
        /*
        //Draws only one circular hole
        let holeRectIntersection = CGRectIntersection(holeRect, rect)
        let context = UIGraphicsGetCurrentContext()

        if( CGRectIntersectsRect(holeRectIntersection, rect))
        {
        CGContextBeginPath(context);
        CGContextAddEllipseInRect(context, holeRectIntersection)
        //CGContextDrawPath(context, kCGPathFillStroke)
        CGContextClip(context)
        //CGContextClearRect(context, holeRectIntersection)
        CGContextSetFillColorWithColor(context, UIColor.clearColor().CGColor)
        CGContextFillRect(context, holeRectIntersection)
        CGContextClearRect(context, holeRectIntersection)
        }*/
    }
    CGPathAddRect(path, nil, self.bounds)
    layer.path = path
    layer.fillRule = kCAFillRuleEvenOdd
    self.layer.mask = layer

}

InformationsquelleAutor der Antwort Bushra Shahid

Diese Implementierung unterstützt Rechtecke und Kreise, geschrieben von swift:
PartialTransparentMaskView

class PartialTransparentMaskView: UIView{
    var transparentRects: Array<CGRect>?
    var transparentCircles: Array<CGRect>?
    weak var targetView: UIView?

    init(frame: CGRect, backgroundColor: UIColor?, transparentRects: Array<CGRect>?, transparentCircles: Array<CGRect>?, targetView: UIView?) {
        super.init(frame: frame)

        if((backgroundColor) != nil){
            self.backgroundColor = backgroundColor
        }

        self.transparentRects = transparentRects
        self.transparentCircles = transparentCircles
        self.targetView = targetView
        self.opaque = false
    }

    required init(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    override func drawRect(rect: CGRect) {
        backgroundColor?.setFill()
        UIRectFill(rect)

        //clear the background in the given rectangles
        if let rects = transparentRects {
            for aRect in rects {

                var holeRectIntersection = CGRectIntersection( aRect, rect )

                UIColor.clearColor().setFill();
                UIRectFill(holeRectIntersection);
            }
        }

        if let circles = transparentCircles {
            for aRect in circles {

                var holeRectIntersection = aRect

                let context = UIGraphicsGetCurrentContext();

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

InformationsquelleAutor der Antwort dichen

Wenn Sie etwas wollen schnell und effektiv, ich habe eine Bibliothek (TAOverlayView) CocoaPods, können Sie beim erstellen von überlagerungen mit Rechteckiger/Runder Löcher, so dass die Interaktion des Nutzers mit Blick auf die hinter der Auflage. Ich benutzte es, um dieses tutorial für unsere apps:

Können Sie den hintergrund ändern, durch festlegen der backgroundColor von der überlagerung mit so etwas wie UIColor(red: 0, green: 0, blue: 0, alpha: 0.85) je nach Ihrer Farbe und Deckkraft benötigt.

InformationsquelleAutor der Antwort Nick Yap

Gut werde ich haben zu beantworten, da verpasste der Author und füllte eine Antwort in form 🙂
Ich wirklich möchte, Carsten mehr Informationen über den besten Weg, das zu tun, was er vorschlägt.

Könnten Sie

+ (UIColor *)colorWithPatternImage:(UIImage *)image

erstellen eine hintergrund-Farbe' - Bild von beliebiger Komplexität. Ein Bild kann entweder programmgesteuert erstellt, wenn Sie sind vertraut mit der Erstellung von Klassen oder statisch, wenn Sie die windows-Rahmen sind vordefiniert.

InformationsquelleAutor der Antwort A-Live

in diesem code erstellen Sie mehr als Kreis

- (void)drawRect:(CGRect)rect {

    //Drawing code
    UIColor *bgcolor=[UIColor colorWithRed:0.85 green:0.85 blue:0.85 alpha:1.0f];//Grey

    [bgcolor setFill];
    UIRectFill(rect);

    if(!self.initialLoad){//If the view has been loaded from next time we will try to clear area where required..

        //clear the background in the given rectangles
        for (NSValue *holeRectValue in _rectArray) {
            CGContextRef context = UIGraphicsGetCurrentContext();

            CGRect holeRect = [holeRectValue CGRectValue];

            [[UIColor clearColor] setFill];

            CGRect holeRectIntersection = CGRectIntersection( holeRect, rect );

            CGContextSetFillColorWithColor( context, [UIColor clearColor].CGColor );
            CGContextSetBlendMode(context, kCGBlendModeClear);

            CGContextFillEllipseInRect( context, holeRectIntersection );

        }
    }

    self.initialLoad=NO;
}

InformationsquelleAutor der Antwort IOS

Tun es die andere Weise herum! Die Ansichten, die Sie möchten, um zu sehen, durch das "Loch" in einer separaten view auf die richtige Größe. Dann setzen Sie "clipsToBounds" JA, und diese Ansicht auf die Oberseite. Die Ansicht mit den "transparenten" Rahmen ist in der untersten. "clipsToBounds" bedeutet alles, was außerhalb der box/Loch abgeschnitten.

Dann könnten Sie zu tun haben, wie Berührungen behandelt werden. Aber das ist eine andere Frage. Vielleicht Einstellung userInteractionEnabled auf die nach Ansichten ist genug.

InformationsquelleAutor der Antwort Carsten