ios - Utilice Bezier Path como Clipping Mask

objective-c animation

Question

Me pregunto si es posible recortar una vista a una ruta Bezier. Lo que quiero decir es que quiero poder ver la vista solo en la región dentro del camino cerrado de Bezier. La razón de esto es que tengo el contorno de una forma irregular, y quiero rellenar la forma gradualmente con un color sólido de arriba a abajo. Si pudiera hacerlo para que una determinada vista solo sea visible dentro de la ruta, entonces podría simplemente crear una UIView del color que quiero y luego cambiar la coordenada y de su marco a mi gusto, completando efectivamente la forma. Si alguien tiene mejores ideas sobre cómo implementar esto, sería muy apreciado. Para el registro, el relleno de la forma coincidirá con el valor y del dedo del usuario, por lo que no puede ser una animación continua. Gracias.

Actualización (mucho tiempo después):

Intenté tu respuesta, Rob, y funciona genial, excepto por una cosa. Mi intención era mover la vista enmascarada mientras la máscara permanece en el mismo lugar en la pantalla. Esto es para que pueda dar la impresión de que la máscara está "rellenando" la máscara. El problema es que con el código que he escrito en función de su respuesta, cuando muevo la vista, la máscara se mueve con ella. Entiendo que eso es de esperar porque todo lo que hice fue agregarlo como la máscara de la vista, por lo que es lógico pensar que se moverá si la cosa a la que está atada se mueve. Traté de agregar la máscara como una subcapa de la supervista para que permanezca así, pero eso tuvo resultados muy extraños. Aquí está mi código:

self.test = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 200, 200)];
self.test.backgroundColor = [UIColor greenColor];

[self.view addSubview:self.test];

UIBezierPath *myClippingPath = [UIBezierPath bezierPath];
[myClippingPath moveToPoint:CGPointMake(100, 100)];
[myClippingPath addCurveToPoint:CGPointMake(200, 200) controlPoint1:CGPointMake(self.screenWidth, 0) controlPoint2:CGPointMake(self.screenWidth, 50)];
[myClippingPath closePath];


CAShapeLayer *mask = [CAShapeLayer layer];
mask.path = myClippingPath.CGPath;

self.test.layer.mask = mask;

CGRect firstFrame = self.test.frame;
firstFrame.origin.x += 100;
[UIView animateWithDuration:3 animations:^{
    self.test.frame = firstFrame;
}];

Gracias por la ayuda ya.

Answer 1

Solo un ejemplo de la solución de Rob, hay un UIWebView sentado como una subvista de un UIView llamado smoothView. smoothView usa bezierPathWithRoundedRect para hacer un fondo gris redondeado (aviso a la derecha). eso funciona bien

pero si smoothView tiene solo subvistas de clip normales, obtienes esto ...

si haces lo que dice Rob, obtienes las esquinas redondeadas en smoothView y todas las subvistas ...

Buena cosa.

Answer 2

Puede hacerlo fácilmente configurando la máscara de capa de su vista en un CAShapeLayer .

UIBezierPath *myClippingPath = ...

CAShapeLayer *mask = [CAShapeLayer layer];
mask.path = myClippingPath.CGPath;

myView.layer.mask = mask;

Deberá agregar el marco QuartzCore a su objetivo si aún no lo ha hecho.

En Swift ...

let yourCarefullyDrawnPath = UIBezierPath( .. blah blah
let maskForYourPath = CAShapeLayer()
maskForYourPath.path = carefullyRoundedBox.CGPath
layer.mask = maskForYourPath