¿Cómo elimino esos artefactos de rotación de mi CATiledLayer?

Question

Tengo un CATiledLayer en el que presentar contenido en el siguiente método

- (void)drawLayer:(CALayer *)layer inContext:(CGContextRef)ctx 

he utilizado el código QuartzDemo para dibujar un patrón. Esto funciona muy bien hasta que me aplico una rotación transformar a parentLayer de la capa (a UIView):

rotados:

Estos artefactos zigzag empeoran cuando comienzo a dibujar líneas y textos en el CATiledLayer.

He aplicado la transformada de la siguiente manera (I también intentado utilizar una transformación afín en la vista en sí):

self.containerView.layer.transform = CATransform3DMakeRotation(angleRadians, 0.0f, 0.0f, 1.0f); 

I transformar el containerView en lugar de la propia capa, ya que tengo varias capas en ese punto de vista que Me gustaría rotar al mismo tiempo sin cambiar las posiciones relativas.

No tuve problemas al girar UIImageViews en el pasado.

¿Hay alguna manera de que pueda rotar CATiledLayer sin estos problemas?

Cualquier ayuda sería muy apreciada.

Suyo,

Felix

Answer 1

La única manera de solucionar este problema que encontré fue esto:

1. Dibuje la capa de mapa de bits en un contexto
2. Ajuste el CGImageRef de ese contexto que el contenido de la capa

Answer 2

Tal vez esto le ayudará: quick and dirty anti-aliasing.... Específicamente asegurando que el anti aliasing esté activado.

CGContextSetAllowsAntialiasing(theContext, true); 
CGContextSetShouldAntialias(theContext, true); 

Answer 3

Como Ryan Zachry ya ha señalado, el anti-aliasing le ayudará aquí. El efecto que estás experimentando aquí es el efecto "escaleras".

Los píxeles son cuadrados, por lo que es fácil dibujar líneas rectas (horizontal o verticalmente) sin producir ningún artefacto. Si dibuja líneas en ángulo, necesitará rasterizar su línea. Un algoritmo para el dibujo de líneas necesitará hacer aproximaciones cuando intente mapear su línea a los píxeles. Un ejemplo para un algoritmo de este tipo es Bresenham's (muy popular y fácil de implementar pero no presenta anti-aliasing). Esto es lo que hace:

Como se puede ver muy claramente en esta imagen, dibujando una línea en ángulo ningún resultado en la llamada escalera-efecto. Para evitar este efecto, puede usar anti-aliasing. Anti-aliasing es en realidad una parte de la teoría de la señal. Es la técnica de minimizar los artefactos de distorsión conocidos como aliasing cuando se representa una señal de alta resolución a una resolución más baja. Como puede ver en el ejemplo de la línea anterior, esto se aplica muy bien a los gráficos por computadora.

Anti-aliasing es realmente complicado, pero la idea es mejorar la imagen aproximando la línea no solo por píxel, sino también usar coloreado inteligente para hacer que la línea aparezca en una ubicación determinada que no sea píxel -exacto.

Para habilitar incorporado de anti-aliasing en el núcleo de gráficos, haga lo siguiente antes de realizar la rotación:

CGContextSetAllowsAntialiasing(theContext, true); 
CGContextSetShouldAntialias(theContext, true); 

Nota que el anti-aliasing puede ser muy costoso en términos de poder de procesamiento , solo debes usarlo cuando sea necesario.

Answer 4

Anti- Aliasing en OpenGL suele ser costoso y, por lo tanto, está desactivado para Core Animation en iOS, ya que los recursos de procesamiento son limitados. La palabra clave aquí es velocidad: Core Animation está optimizada para la velocidad de dibujo, lo que se traduce en suavidad de la animación. Si la calidad de imagen es la prioridad, no debe usar Core Animation con transformaciones rotacionales.

Para algunas tareas en Core Animation, puede agregar un borde de 1 px alrededor del contenido de su capa. Sin anti-aliasing, los bordes serán irregulares, pero cuando el contenido no está en un borde, no se ve afectado por esto y en su lugar se suavizará debido al filtrado de texturas.