Come rimuovere questi artefatti di rotazione dal mio CATiledLayer?

Question

Ho un CATiledLayer in cui rendo contenuto nella seguente metodo

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

ho usato il codice QuartzDemo per disegnare un modello. Questo funziona molto bene fino a quando applico una rotazione trasformare per parentLayer del livello (un UIView):

ruotate:

Questi manufatti a zig-zag peggiorano quando inizio le linee di disegno e testi nel CATiledLayer.

ho applicato la trasformata come segue (ho anche provato con una trasformazione affine alla vista stessa):

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

I trasformare la containerView piuttosto che dello strato stesso, come ho più strati di tale vista che Vorrei ruotare allo stesso tempo senza modificare le posizioni relative.

Non ho avuto problemi durante la rotazione di UIImageViews in passato.

C'è un modo per ruotare CATiledLayer senza questi problemi?

Qualsiasi aiuto sarebbe molto apprezzato.

Distinti,

Felix

Answer 1

L'unico modo di fissare questo problema che ho trovato è stato questo:

1. Disegnare il livello in un contesto bitmap
2. Impostare la CGImageRef di quel contesto come il contenuto del livello

Answer 2

Forse questo aiuterà: quick and dirty anti-aliasing.... In particolare, l'anti aliasing è attivo.

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

Answer 3

Come ha già sottolineato Ryan Zachry, l'anti-aliasing ti aiuterà qui. L'effetto che stai vivendo qui è l'effetto "scale".

I pixel sono quadrati, quindi è facile disegnare linee rette (orizzontalmente o verticalmente) senza produrre artefatti. Se stai disegnando linee ad angolo, dovrai rasterizzare la tua linea. Un algoritmo per il disegno a linee dovrà fare delle approssimazioni quando si tenta di mappare la linea ai pixel. Un esempio di tale algoritmo è Bresenham's (molto popolare e facile da implementare ma non con anti-aliasing). Ecco ciò che fa:

Come si può vedere molto chiaro in questa foto, tracciando una linea a tutti i risultati angolo nel cosiddetto scale-effetto. Per evitare questo effetto è possibile utilizzare l'anti-aliasing. L'anti-aliasing è in realtà una parte della teoria dei segnali. È la tecnica di minimizzare gli artefatti di distorsione noti come aliasing quando si rappresenta un segnale ad alta risoluzione a una risoluzione più bassa. Come puoi vedere dall'esempio di riga qui sopra, questo si applica molto bene alla grafica del computer.

L'anti-aliasing è davvero complicato, ma l'idea è di migliorare l'immagine approssimando la linea non solo su una base per pixel, ma anche di usare la colorazione intelligente per far apparire la linea in una certa posizione che non è pixel -exact.

per abilitare built-in anti-aliasing in core grafico, effettuare le seguenti operazioni prima di eseguire la tua rotazione:

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

Nota che l'anti-aliasing può essere molto costoso in termini di potenza di elaborazione , dovresti usarlo solo quando necessario.

Answer 4

Anti- l'aliasing in OpenGL è spesso costoso e quindi disabilitato per Core Animation su iOS poiché le risorse di elaborazione sono limitate. La parola chiave qui è la velocità: Core Animation è ottimizzato per la velocità di disegno che si traduce in fluidità di animazione. Se la qualità dell'immagine è la priorità, non utilizzare Core Animation con trasformazioni rotazionali.

Per alcune attività in Animazione core, è possibile aggiungere un bordo di 1 pixel attorno al contenuto del livello. Senza anti-aliasing, i bordi saranno frastagliati ma quando il contenuto non è su un lato, questo non è influenzato da questo e verrà invece attenuato a causa del filtro trama.