ios - ¿Por qué dar a addArcWithCenter un inicio Un ángulo de 0 grados lo hace comenzar a 90 grados?

objective-c geometry

Question

Estoy creando un CAShapeLayer para usar como una máscara para la capa de UIView . Estoy usando un UIBezierPath para dibujar la capa de forma. Está funcionando bien, excepto que estoy obteniendo algunos resultados extraños cuando dibujo. La geometría no se comporta como se espera. Estoy tratando de dibujar una simple "rebanada de pastel" en la esquina superior derecha:

#define degreesToRadians(x) ((x) * M_PI / 180.0)

...

// "layer" refer''s to the UIView''s root layer

CAShapeLayer *maskLayer = [CAShapeLayer layer];

maskLayer.frame =
    layer.presentationLayer ? 
    ((CAGradientLayer *)layer.presentationLayer).bounds : layer.bounds;
maskLayer.fillRule = kCAFillRuleEvenOdd;
maskLayer.needsDisplayOnBoundsChange = YES;

CGFloat maskLayerWidth = maskLayer.bounds.size.width;
CGFloat maskLayerHeight = maskLayer.bounds.size.height;
CGPoint maskLayerCenter = 
    CGPointMake(maskLayerWidth/2,maskLayerHeight/2);

UIBezierPath *path = [UIBezierPath bezierPath];

[path moveToPoint:maskLayerCenter];

[path addArcWithCenter:maskLayerCenter radius:(maskLayerWidth/2)
startAngle:degreesToRadians(0) endAngle:degreesToRadians(90) clockwise:YES];

[path closePath];


maskLayer.path = path.CGPath;

layer.mask = maskLayer;

El resultado final es que una porción circular se dibuja en la esquina inferior derecha. El primer punto del arco se dibuja a los 90 grados, luego a 180. ¿Por qué hace esto aunque estoy usando ángulos de 0 y 90 grados?

Answer 1

Eche un vistazo a la Figura 1 en bezierPathWithArcCenter:radius:startAngle:endAngle:clockwise: documentación: Para un "sector circular" en la esquina superior derecha, debe usar los parámetros

startAngle:degreesToRadians(-90) endAngle:0 clockwise:YES

(La razón es que el sistema de coordenadas predeterminado en iOS tiene un eje x que apunta a la derecha y un eje y que apunta hacia abajo).

Answer 2

Esta imagen viene directamente de la documentación .

Y hay una discusión de cómo funciona (dado el sistema de coordenadas predeterminado)

Discusión
Este método agrega el arco especificado que comienza en el punto actual. El arco creado se encuentra en el perímetro del círculo especificado. Cuando se dibuja en el sistema de coordenadas predeterminado, los ángulos de inicio y final se basan en el círculo unitario que se muestra en la Figura 1 . Por ejemplo, al especificar un ángulo de inicio de 0 radianes, un ángulo de final de π radianes y establecer el parámetro en el sentido de las agujas del reloj en YES dibuja la mitad inferior del círculo. Sin embargo, al especificar los mismos ángulos de inicio y final, pero al establecer el parámetro en el clockwise las clockwise del clockwise en NO dibuja la mitad superior del círculo.

Así es como funcionan los ángulos para addArcWithCenter:radius:startAngle:endAngle:clockwise: Si eso no es lo que estás viendo, estás calculando tus ángulos incorrectamente.