2017-04-05 2 views
0

Je veux "couper un trou" dans la couche d'ombre d'un UIView un swift3, iOSSwift - Percement du trou dans la couche d'ombre

J'ai un récipient (UIView), qui a 2 enfants:

  • un UIImageView
  • un UIView au-dessus de cette image (« overlay »)

Je veux donner la superposition d'une ombre et découpez un rect intérieur de cette ombre, pour créer un effet de lueur aux bords de l'ImageVie w
Il est essentiel que la lueur est encadré, puisque l'image prend la largeur de l'écran
Mon code à ce jour:

let glowView = UIView(frame: CGRect(x: 0, y: 0, width: imageWidth, height: imageHeight)) 
glowView.layer.shadowPath = UIBezierPath(roundedRect: container.bounds, cornerRadius: 4.0).cgPath 
glowView.layer.shouldRasterize = true 
glowView.layer.rasterizationScale = UIScreen.main.scale 
glowView.layer.shadowOffset = CGSize(width: 1.0, height: 1.0) 
glowView.layer.shadowOpacity = 0.4 

container.addSubview(imageView) 
container.addSubview(glowView) 

Le résultat se présente comme suit en ce moment:

image

Maintenant, je voudrais découper la partie intérieure plus sombre, de sorte que seulement l'ombre sur les bords reste
Une idée de comment y parvenir?

+0

Ajouter la vue lueur avant que la vue de l'image. Cela devrait fonctionner –

+0

désolé, ne pas le mentionner, mais je ne peux pas le faire, parce que l'image prend toute la largeur et la lueur doit être insérée –

Répondre

0

Merci à Mihai Fratu's answer j'ai pu créer un UIBezierPath qui répond exactement à mes besoins
Je posterai mon code ici cas où quelqu'un a le même problème plus tard

let innerRadius: CGFloat = 32.0 * UIScreen.main.scale 
let shadowPath: UIBezierPath = UIBezierPath(roundedRect: self.view.bounds, cornerRadius: self.cornerRadius) 
//shadowPath.append(UIBezierPath(roundedRect: self.view.bounds.insetBy(dx: 8, dy: 8), cornerRadius: self.cornerRadius)) 
let shadowWidth: CGFloat = 8.0 // Do this as wide as you want 
var outterPath = UIBezierPath() 
// Start at the top left corner with an x offset of the cornerRadius 
outterPath.move(to: CGPoint(x: self.cornerRadius, y: 0)) 

// Draw a line to the top right corner 
outterPath.addLine(to: CGPoint(x: glowView.bounds.size.width - self.cornerRadius, y: 0)) 
//Draw the round top right corner 
outterPath.addArc(withCenter: CGPoint(x: glowView.bounds.size.width - self.cornerRadius, y: self.cornerRadius), radius: self.cornerRadius, startAngle: (3 * CGFloat.pi)/2, endAngle: 0, clockwise: true) 

// Draw a line to the bottom right corner 
outterPath.addLine(to: CGPoint(x: glowView.bounds.size.width, y: glowView.bounds.size.height - self.cornerRadius)) 
// Draw the round bottom right corner 
outterPath.addArc(withCenter: CGPoint(x: glowView.bounds.size.width - self.cornerRadius, y: glowView.bounds.size.height - self.cornerRadius), radius: self.cornerRadius, startAngle: 0, endAngle: CGFloat.pi/2, clockwise: true) 

// Draw a line to the bottom left corner 
outterPath.addLine(to: CGPoint(x: self.cornerRadius, y: glowView.bounds.size.height)) 
// Draw the round bottom left corner 
outterPath.addArc(withCenter: CGPoint(x: self.cornerRadius, y: glowView.bounds.size.height - self.cornerRadius), radius: self.cornerRadius, startAngle: CGFloat.pi/2, endAngle: CGFloat.pi, clockwise: true) 

// Draw a line to the top left corner 
outterPath.addLine(to: CGPoint(x: 0.0, y: self.cornerRadius)) 
// Draw the round top left corner 
outterPath.addArc(withCenter: CGPoint(x: self.cornerRadius, y: self.cornerRadius), radius: self.cornerRadius, startAngle: CGFloat.pi, endAngle: (3 * CGFloat.pi)/2, clockwise: true) 

// Move to the inner start point and add the paths counterclockwise to prevent the filling of the inner area 
outterPath.move(to: CGPoint(x: shadowWidth + innerRadius, y: shadowWidth)) 
// Draw the inner top left corner 
outterPath.addArc(withCenter: CGPoint(x: shadowWidth + innerRadius, y: shadowWidth + innerRadius), radius: innerRadius, startAngle: (3 * CGFloat.pi)/2, endAngle: CGFloat.pi, clockwise: false) 

// Draw a line to the inner bottom left corner 
outterPath.addLine(to: CGPoint(x: shadowWidth, y: glowView.bounds.size.height - innerRadius - shadowWidth)) 
// Draw the inner bottom left corner 
outterPath.addArc(withCenter: CGPoint(x: shadowWidth + innerRadius, y: glowView.bounds.size.height - innerRadius - shadowWidth), radius: innerRadius, startAngle: CGFloat.pi, endAngle: CGFloat.pi/2, clockwise: false) 

// Draw a line to the inner bottom right corner 
outterPath.addLine(to: CGPoint(x: glowView.bounds.size.width - innerRadius - shadowWidth, y: glowView.bounds.size.height - shadowWidth)) 
// Draw the inner bottom right corner 
outterPath.addArc(withCenter: CGPoint(x: glowView.bounds.size.width - innerRadius - shadowWidth, y: glowView.bounds.size.height - innerRadius - shadowWidth), radius: innerRadius, startAngle: CGFloat.pi/2, endAngle: 0, clockwise: false) 

// Draw a line to the inner top right corner 
outterPath.addLine(to: CGPoint(x: glowView.bounds.size.width - shadowWidth, y: shadowWidth + innerRadius)) 
// Draw the inner top right corner 
outterPath.addArc(withCenter: CGPoint(x: glowView.bounds.size.width - innerRadius - shadowWidth, y: shadowWidth + innerRadius), radius: innerRadius, startAngle: 0, endAngle: (3 * CGFloat.pi)/2, clockwise: false) 

// Draw a line to the inner top left corner 
outterPath.addLine(to: CGPoint(x: shadowWidth + innerRadius, y: shadowWidth)) 
outterPath.close() 
1

Essayez d'utiliser cela comme comme chemin d'ombre:

let shadowWidth = 2.0 // Do this as wide as you want 
var outterPath = UIBezierPath() 
outterPath.move(to: CGPoint(x: shadowWidth, y: 0)) 
outterPath.addLine(to: CGPoint(x: glowView.bounds.size.width, y: 0)) 
outterPath.addLine(to: CGPoint(x: glowView.bounds.size.width, y: glowView.bounds.size.height)) 
outterPath.addLine(to: CGPoint(x: 0.0, y: glowView.bounds.size.height)) 
outterPath.addLine(to: CGPoint(x: 0.0, y: 0.0)) 
outterPath.addLine(to: CGPoint(x: shadowWidth, y: 0.0)) 
outterPath.addLine(to: CGPoint(x: shadowWidth, y: glowView.bounds.size.height - shadowWidth)) 
outterPath.addLine(to: CGPoint(x: glowView.bounds.size.width - shadowWidth, y: glowView.bounds.size.height - shadowWidth)) 
outterPath.addLine(to: CGPoint(x: glowView.bounds.size.width - shadowWidth, y: shadowWidth)) 
outterPath.addLine(to: CGPoint(x: shadowWidth, y: shadowWidth)) 
outterPath.close() 

Cela ne crée pas un rectangle arrondi, mais avec un peu de modifications au code ci-dessus, vous devriez être en mesure d'ajouter ceux qui sont trop.

+0

rien n'a changé malheureusement –

+0

J'ai mis à jour ma réponse –

+1

Merci, c'était une très bonne base pour mon approche! Je vais faire une réponse et référencer votre réponse là-bas! –