Masque une UIView avec une découpe cercle

J'ai créé un UIView avec une semi-transparent fond noir à siéger au sein de mon application principale. Ce que je vise ici est de créer une découpe cercle de la forme quelque part dans cette UIView où le semi-transparent fond noir n'est pas vu, ce qui donne l'effet d'un masque noir sur l'ensemble de l'image à l'exception de la zone circulaire (c'est pour souligner un bouton dans cette zone).

J'ai réussi à utiliser CAShapeLayer pour créer un masque circulaire, mais cela a eu l'effet inverse (c'est à dire le reste de la vue est dégagée, et à l'INTÉRIEUR du cercle est le semi-transparent noir. Ce que j'aimerais c'est tout, à l'extérieur du cercle de garder le semi-transparent noir, alors que l'intérieur soit bien clair. Voici le code que j'ai utilisé, comment pourrais-je aller sur le faire fonctionner dans l'autre sens? Mon blackMask est semi-transparent noir vue, et mon buttonCircle est le cercle, je voudrais être tenus à l'écart.

Peut-être j'ai besoin d'inverser le chemin, en quelque sorte?

CAShapeLayer *maskLayer = [[CAShapeLayer alloc] init];
CGRect maskRect = buttonCircle.frame;
CGPathRef path = CGPathCreateWithEllipseInRect(maskRect, NULL);
maskLayer.path = path;
CGPathRelease(path);
blackMask.layer.mask = maskLayer;

EDIT: Essayez-le maintenant, ne voyant aucun masque tout avec celui-ci:

UIView *circularMaskView = [[UIView alloc] initWithFrame:buttonCircle.frame];
circularMaskView.backgroundColor = [UIColor greenColor];
CAShapeLayer *maskLayer = [[CAShapeLayer alloc] init];

CGPathRef path = CGPathCreateWithEllipseInRect(buttonCircle.frame, NULL);
maskLayer.path = path;
CGPathRelease(path);

circularMaskView.layer.mask = maskLayer;

[blackMask addSubview:circularMaskView];

essayez d'ajouter un supplément de vue arrière de votre bouton (même image) et de l'ajouter en tant que sous-vue de blackMask
Cela ne fonctionne pas, le bouton lui-même n'est pas un cercle. Je veux juste dessiner un cercle autour d'elle.
je veux dire créer un nouveau point de vue, de définir la couleur d'arrière-plan à somevalue(non transparent).ensemble cadre de ce nouveau point de vue même que buttonCircle.cadre. appliquer le masque à cette nouvelle Vue (path =buttonCircle.de limites) et de l'ajouter en tant que sous-vue de blackMask.
Créer un chemin inverse de comme this?
Cela ne semble pas fonctionner avec [UIColor clearColor]. Je peux faire un masque vert ou quelque chose qui est la bonne couleur, la position, etc., mais si j'ai mis la couleur claire, il ne fonctionne pas. J'ai vérifié opaque sur le nouveau point de vue.

OriginalL'auteur Luke | 2014-01-20

18

Donc, voici ce que j'ai fait. J'ai créé un custom UIView sous-classe appelée BlackoutView, comme suit:

BlackoutView.h
```
#import <UIKit/UIKit.h>

@interface BlackoutView : UIView

@property (nonatomic, retain) UIColor *fillColor;
@property (nonatomic, retain) NSArray *framesToCutOut;

@end
```
BlackoutView.m
```
#import "BlackoutView.h"

@implementation BlackoutView

- (void)drawRect:(CGRect)rect
{
    [self.fillColor setFill];
    UIRectFill(rect);

    CGContextRef context = UIGraphicsGetCurrentContext();
    CGContextSetBlendMode(context, kCGBlendModeDestinationOut);

    for (NSValue *value in self.framesToCutOut) {
        CGRect pathRect = [value CGRectValue];
        UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:pathRect];
        [path fill];
    }

    CGContextSetBlendMode(context, kCGBlendModeNormal);
}

@end
```
J'ai ensuite instancier comme d'habitude, et de définir les propriétés de la couleur du masque que je veux utiliser, et les vues à couper le masque:
```
[blackMask setFillColor:[UIColor colorWithWhite:0.0f alpha:0.8f]];
[blackMask setFramesToCutOut:@[[NSValue valueWithCGRect:buttonCircleA.frame],
                               [NSValue valueWithCGRect:buttonCircleB.frame]]];
```
Ce pourrait être amélioré en ce qui me permet de couper d'autres formes d'ailleurs ovales, mais c'est très bien pour mes besoins, ici et pourrait être facilement adapté à le faire plus tard. Espérons que cela aide les autres!

Super utile! Pouvez-vous expliquer pourquoi vous définissez la fillColor à l'intérieur de BlackoutView.m? Je n'étais pas toute transparence et en enlevant les 2 premières lignes résolu le problème pour moi.
Aussi, avez-vous besoin d'ajouter CGContextRelease(context); à la fin de drawRect:rect
(passons sur le fait, il a fait de mauvaises choses)
J'en ai essayé beaucoup de solutions, mais cela m'a vraiment aidé! Merci beaucoup 🙂
Je viens de mettre la couleur d'arrière-plan à l'aide de la norme backgroundColor et enlevé le fillColor propriété et les deux premières lignes dans drawRect. Réglage de la fillColor encore abouti à un solide de couleur noire. Je suis en train de travailler sur iOS8, cependant, je ne suis pas sûr que cela n'a rien à faire avec elle.

OriginalL'auteur Luke

Si Vous utilisez une Image en Noir pour le masque, puis

-(void)maskWithImage:(UIImage*)maskImage toImageView:(UIImageView*)imgView{

    CALayer *aMaskLayer=[CALayer layer];
    aMaskLayer.contents=(id)maskImage.CGImage;

    imgView.layer.mask=aMaskLayer;


}

Si vous avez Personnalisé ShapeLayer de masque

-(void)maskWithShapeLayer:(CALayer*)layer toImageView:(UIImageView*)imgView{
    //Layer should be filled with Black color to mask those part of Image
    imgView.layer.mask=layer;
}

Si Vous voulez faire de l'ImageView Masque avec le Cercle

-(void)maskWithCircle:(UIImageView*)imgView{

    CAShapeLayer *aCircle=[CAShapeLayer layer];
    aCircle.path=[UIBezierPath bezierPathWithRoundedRect:imgView.bounds cornerRadius:imgView.frame.size.height/2].CGPath; //Considering the ImageView is square in Shape

    aCircle.fillColor=[UIColor blackColor].CGColor;
    imgView.layer.mask=aCircle;

}

OriginalL'auteur Mrug

Voici ma conversion de la accepté de répondre à dans Swift:

public class OverlayView: UIView {
let fillColor: UIColor = UIColor.grayColor()
public var framesToCutOut: Array<NSValue> = [NSValue]()

override public func drawRect(rect: CGRect) {
    super.drawRect(rect)

    fillColor.setFill()
    UIRectFill(rect)

    if let context: CGContextRef = UIGraphicsGetCurrentContext() {
        CGContextSetBlendMode(context, .DestinationOut)

        for value in framesToCutOut {
            let pathRect: CGRect = value.CGRectValue()
            let path: UIBezierPath = UIBezierPath(ovalInRect: pathRect)
            path.fill()
        }

        CGContextSetBlendMode(context, .Normal)
    }
}

Pas besoin de mettre CGRects dans NSValues si vous appelez ce code swift avec d'autres code swift -- juste faire frameToCutOut un tableau [CGRect]

OriginalL'auteur tommys

Vous devez vous connecter pour publier un commentaire.