Couper transparent trou dans UIView

C'est mon œuvre (comme je n'ai eu besoin d'un point de vue avec des parties transparentes):

En-tête (.h) fichier:

//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

De mise en œuvre (.m) file:

#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

Maintenant pour ajouter une vue partielle de la transparence, vous devez importer le PartialTransparentView personnalisé UIView sous-classe, puis l'utiliser comme suit:

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

Cela va créer une vue avec 2 rectangles transparents.
Bien sûr, vous pouvez ajouter autant de rectangles que vous le souhaitez, ou tout simplement d'en utiliser un.
Le code ci-dessus est seulement la manipulation des rectangles, donc si vous souhaitez utiliser les cercles, vous devrez le modifier.

J'ai utilisé UIBezierPath pour gérer le découpage de la transparence trou.
Le code suivant va dans une sous-classe de la UIView que vous voulez dessiner un transparent, trou:

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

@mosib la réponse a été d'une grande utilité pour moi jusqu'à ce que je voulais dessiner plus d'une circulaire de découpes dans mon point de vue. Après un peu de mal, j'ai mis à jour mon drawRect comme ceci (code swift...désolé mauvaise édition):

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

}

Cette application prend en charge les Rectangles et les Cercles, écrit en 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);
}
}
}
}
}

Si vous voulez quelque chose de rapide et efficace, j'ai ajouté une bibliothèque (TAOverlayView) à CocoaPods qui vous permet de créer des superpositions avec rectangulaire/circulaire de trous, permettant à l'utilisateur d'interagir avec vue derrière la superposition. Je l'ai utilisé pour créer ce tutoriel pour l'un de nos apps:

Vous pouvez changer l'arrière-plan par la mise en au backgroundColor de la superposition avec quelque chose comme UIColor(red: 0, green: 0, blue: 0, alpha: 0.85), en fonction de votre couleur et de l'opacité des besoins.

Eh bien, je vais répondre comme raté le commentaire et rempli un formulaire de réponse 🙂
J'ai vraiment aimerais Carsten à fournir plus d'informations sur la meilleure façon de faire ce qu'il propose.

Vous pouvez utiliser

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

pour créer un arrière-plan de la "couleur" de l'image de n'importe quelle complexité. Une image peut être créée par programmation si vous êtes familier avec les cours de dessin ou de manière statique si les fenêtres windows sont prédéfinis.

dans ce code créer plus de cercle

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

Vous pouvez atteindre cet objectif en donnant le point de vue de la couche d'une frontière.

class HollowSquareView: UIView {
override func awakeFromNib() {
super.awakeFromNib()
self.backgroundColor = UIColor.clear
self.layer.masksToBounds = true
self.layer.borderColor = UIColor.black.cgColor
self.layer.borderWidth = 10.0
}
}

Cela vous donnera un cadre carré de la largeur de la 10 et la transparence de la base.

Vous pouvez également définir la couche cornerRadius à la moitié de la vue sur la largeur et cela vous donnera un cercle creux.

Le faire dans l'autre sens! Le lieu de ces points de vue que vous aimeriez voir à travers le "trou" dans une vue séparée de la bonne taille. Ensuite, réglez "clipsToBounds" sur " OUI " et placez-la vue sur le dessus. La vue avec la "transparence" est la undermost ensuite. "clipsToBounds" signifie tout, à l'extérieur de la boîte/le trou est coupé.

Alors vous pourriez avoir à traiter comment les touches sont traitées. Mais c'est une autre question. Peut-être mettre en userInteractionEnabled sur la selon les points de vue est assez.