Tengo una vista simple (lado izquierdo de la imagen) y necesito crear algún tipo de superposición (lado derecho de la imagen) para esta vista. Esta superposición debería tener algo de opacidad, por lo que la vista que se encuentra debajo todavía es parcialmente visible. Lo más importante es que esta superposición debe tener un orificio circular en el medio para que no se superponga al centro de la vista (vea la imagen a continuación).
Puedo crear fácilmente un círculo como este:
int radius = 20; //whatever
CAShapeLayer *circle = [CAShapeLayer layer];
circle.path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(0, 0,radius,radius) cornerRadius:radius].CGPath;
circle.position = CGPointMake(CGRectGetMidX(view.frame)-radius,
CGRectGetMidY(view.frame)-radius);
circle.fillColor = [UIColor clearColor].CGColor;
Y una superposición rectangular "completa" como esta:
CAShapeLayer *shadow = [CAShapeLayer layer];
shadow.path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(0, 0, view.bounds.size.width, view.bounds.size.height) cornerRadius:0].CGPath;
shadow.position = CGPointMake(0, 0);
shadow.fillColor = [UIColor grayColor].CGColor;
shadow.lineWidth = 0;
shadow.opacity = 0.5;
[view.layer addSublayer:shadow];
Pero no tengo idea de cómo puedo combinar estas dos capas para que creen el efecto que quiero. ¿Nadie? Lo he intentado todo ... ¡Muchas gracias por la ayuda!
ios
objective-c
calayer
quartz-core
animal_chin
fuente
fuente
moveToPoint
, luego agrega el rect redondeado. Consulte la documentación para conocer los métodos ofrecidos porUIBezierPath
.Respuestas:
Pude resolver esto con la sugerencia de Jon Steinmetz. Si a alguien le importa, aquí está la solución final:
Swift 3.x:
Swift 4.2 y 5:
fuente
Para crear este efecto, encontré más fácil crear una vista completa superponiendo la pantalla, luego restando partes de la pantalla usando capas y UIBezierPaths. Para una implementación Swift:
Probé el código anterior y aquí está el resultado:
Agregué una biblioteca a CocoaPods que abstrae gran parte del código anterior y le permite crear fácilmente superposiciones con orificios rectangulares / circulares, lo que permite al usuario interactuar con las vistas detrás de la superposición. Lo usé para crear este tutorial para una de nuestras aplicaciones:
La biblioteca se llama TAOverlayView y es de código abierto bajo Apache 2.0. ¡Espero que le sea útil!
fuente
Solución aceptada Compatible con Swift 3.0
fuente
Adopté un enfoque similar al de animal_chin, pero soy más visual, así que configuré la mayor parte en Interface Builder usando salidas y diseño automático.
Aquí está mi solución en Swift
fuente
Compatible con Code Swift 2.0
A partir de la respuesta de @animal_inch, codifico una pequeña clase de utilidad, espero que aprecie:
Luego, en cualquier lugar de su código:
fuente