Swift - Comment créer une vue avec une forme recadrée en elle

Je suis en train d'essayer d'atteindre le résultat montré dans l'image en utilisant swift 1.2 et xcode 6.

Fondamentalement, je veux créer une vue avec une forme de coupe en elle pour être en mesure de voir le point de vue ci-dessous pour faire un tutoriel pour mon application.
Je sais comment créer une forme circulaire, mais je ne sais pas comment le couper en vue.
J'ai besoin d'un exemple complet sur comment faire s'il vous plaît.
Merci d'avance

vous devez créer un masque sur la superposition blanc, puis définissez ses alpha autour de 0.5 et le travail est assez bien fait.
Merci pour la réponse, mais je n'ai pas de problèmes à propos d'alpha à montrer ce qui est en dessous de la vue. Le réel problème est que je ne sais pas comment créer un masque (ou superposition) de vue (comme le recadrée cercle sur le point de vue)
hey corps, j'ai trouvé ce tutoriel qui doit être utile pour vous: Créer un CALayer masque par la combinaison de multiples chemins d'accès

OriginalL'auteur LamBronx | 2015-04-15

3

La meilleure façon de le faire serait de créer une image png avec une partie transparente blanche autour de l'extérieur et clairement un cercle au milieu. L'empilement des 2 images vues sur le dessus les uns des autres, avec le masquage de l'image sur le dessus, et de définir sa "opaque" drapeau de faux.

Vous pourriez aussi le faire par la création d'un CAShapeLayer et de le configurer pour utiliser une couleur blanche translucide, puis installez une forme qui est le carré de la coupe du trou de forme. Vous auriez pu installer que la couche de forme sur le dessus de votre affichage de l'image de la couche.

Les plus polyvalents façon de le faire serait de créer une sous-classe personnalisée de UIImageView et avoir de la méthode init de votre sous-classe de créer et d'installer la couche de forme. Je viens de créer un résumé d'hier, qui illustre la création d'une sous-classe personnalisée de UIImageView. Voici le lien: ImageViewWithGradient gist

Que le gist crée un calque de dégradé. Il serait facile de l'adapter pour créer un calque de forme au lieu de cela, et si vous avez modifié le layoutSubviews méthode vous pouvez le faire adapter la vue et le chemin d'accès si l'affichage de l'image est redimensionnée.

EDIT:

Ok, j'ai pris l'étape supplémentaire de la création d'une aire de jeux qui crée un recadrage de l'image vue. Vous pouvez la trouver à ImageViewWithMask sur github

L'image qui en résulte pour mon terrain de jeu ressemble à ceci:

Ma méthode crée un calque de forme qui se superpose à un blanc translucide apparition sur le dessus de l'affichage de l'image. L'autre affiche de la réponse de crée un calque de masque qui rend l'affichage de l'image en partie transparent, ce qui montre le contenu sous. Si le contenu sous l'affichage de l'image sont d'un blanc pur, l'effet est le même. Il ya une valeur dans les deux approches.

OriginalL'auteur Duncan C

Même s'il n'y est une réponse, je voudrais partager ma façon:

//Let's say that you have an outlet to the image view called imageView
//Create the white view 
let whiteView = UIView(frame: imageView.bounds) 
let maskLayer = CAShapeLayer() //create the mask layer

//Set the radius to 1/3 of the screen width
let radius : CGFloat = imageView.bounds.width/3 

//Create a path with the rectangle in it.
let path = UIBezierPath(rect: imageView.bounds)
//Put a circle path in the middle
path.addArcWithCenter(imageView.center, radius: radius, startAngle: 0.0, endAngle: CGFloat(2*M_PI), clockwise: true)

//Give the mask layer the path you just draw
maskLayer.path = path.CGPath
//Fill rule set to exclude intersected paths
maskLayer.fillRule = kCAFillRuleEvenOdd

//By now the mask is a rectangle with a circle cut out of it. Set the mask to the view and clip.
whiteView.layer.mask = maskLayer
whiteView.clipsToBounds = true

whiteView.alpha = 0.8
whiteView.backgroundColor = UIColor.whiteColor()

//If you are in a VC add to the VC's view (over the image)
view.addSubview(whiteView)    
// Annnnnd you're done.

Génial! Fonctionne comme un charme.

OriginalL'auteur Dănuț Mihai Florian

4

Voici un exemple de code pour savoir comment vous pouvez faire un Masque circulaire pour une UIView:
```
let sampleView = UIView(frame: UIScreen.mainScreen().bounds)
let maskLayer = CALayer()
maskLayer.frame = sampleView.bounds
let circleLayer = CAShapeLayer()
//assume the circle's radius is 100
circleLayer.frame = CGRectMake(sampleView.center.x - 100, sampleView.center.y - 100, 200, 200)
let circlePath = UIBezierPath(ovalInRect: CGRectMake(0, 0, 200, 200))
circleLayer.path = circlePath.CGPath
circleLayer.fillColor = UIColor.blackColor().CGColor
maskLayer.addSublayer(circleLayer)

sampleView.layer.mask = maskLayer
```
Voici ce que j'ai fait dans la cour de récréation:

Ce code ne fonctionnera pas, sauf si vous définissez la règle de remplissage sur votre circleLayer à kCAFillRuleEvenOdd. (Réglage de la règle de remplissage sur le tracé de bézier ne fonctionne pas car apparemment CGPath ne supporte pas les règles de remplissage comme les courbes de bézier).
Merci beaucoup pour la réponse, mais j'ai encore du mal. J'ai utilisé votre code, mais tout ce qu'elle fait, c'est de faire le sampleView une vue circulaire. J'ai mis ton code dans le viewDidLoad de mon ViewController mais cela ne fonctionne pas comme l'image que vous avez posté votre réponse. Je ne sais pas si je suis (probablement) manque quelque chose mais j'ai vraiment du mal sur ce point et je suis vraiment reconnaissant de toute aide. Merci beaucoup encore une fois.
Oui, vous avez raison~, je dois définir kCAFillRuleEvenOdd pour faire la couche de soustraction. Mais ici, j'utilise 2 imageView faire une composition. Je pense que c'est la même, qu'en pensez-vous?
L'effet est le même. Votre technique, l'image est en partie transparent et de révéler la couche sous elle. Le mien met un blanc opaque en superposition sur l'image. Les deux approches ont de la valeur.
oui....de ma faute

OriginalL'auteur duan

    //assume you create a UIImageView and content image before execute this code
  let sampleMask = UIView()
    sampleMask.frame = self.view.frame
    sampleMask.backgroundColor =  UIColor.black.withAlphaComponent(0.6)
    //assume you work in UIViewcontroller
    self.view.addSubview(sampleMask)
    let maskLayer = CALayer()
    maskLayer.frame = sampleMask.bounds
    let circleLayer = CAShapeLayer()
    //assume the circle's radius is 150
    circleLayer.frame = CGRect(x:0 , y:0,width: sampleMask.frame.size.width,height: sampleMask.frame.size.height)
    let finalPath = UIBezierPath(roundedRect: CGRect(x:0 , y:0,width: sampleMask.frame.size.width,height: sampleMask.frame.size.height), cornerRadius: 0)
    let circlePath = UIBezierPath(ovalIn: CGRect(x:sampleMask.center.x - 150, y:sampleMask.center.y - 150, width: 300, height: 300))
    finalPath.append(circlePath.reversing())
    circleLayer.path = finalPath.cgPath
    circleLayer.borderColor = UIColor.white.withAlphaComponent(1).cgColor
     circleLayer.borderWidth = 1
    maskLayer.addSublayer(circleLayer)

    sampleMask.layer.mask = maskLayer

Swift - Comment créer une vue avec une forme recadrée en elle

OriginalL'auteur Raul Quispe

class MakeTransparentHoleOnOverlayView: UIView {

    @IBOutlet weak var transparentHoleView: UIView!

    //MARK: - Drawing

    override func draw(_ rect: CGRect) {
        super.draw(rect)

        if self.transparentHoleView != nil {
            //Ensures to use the current background color to set the filling color
            self.backgroundColor?.setFill()
            UIRectFill(rect)

            let layer = CAShapeLayer()
            let path = CGMutablePath()

            //Make hole in view's overlay
            //NOTE: Here, instead of using the transparentHoleView UIView we could use a specific CFRect location instead...
            path.addRect(transparentHoleView.frame)
            path.addRect(bounds)

            layer.path = path
            layer.fillRule = kCAFillRuleEvenOdd
            self.layer.mask = layer
        }
    }

    override func layoutSubviews () {
        super.layoutSubviews()
    }

    //MARK: - Initialization

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
    }

    override init(frame: CGRect) {
        super.init(frame: frame)
    }
}

OriginalL'auteur mazorati

Vous devez vous connecter pour publier un commentaire.

EDIT: