2012-07-14 10 views
10

Sto pianificando di creare un gradiente a quattro punti, nella foto sotto, disegnando due gradienti lineari tramite la grafica di base e mascherando tra di loro con un terzo gradiente lineare bianco e nero.Gradiente a quattro punti in iOS

Esiste un modo più efficiente per disegnare un gradiente di quattro punti utilizzando la grafica di base o altro?

enter image description here

risposta

4

È possibile salvare la sfumatura maschera quando si utilizza un CGBlendMode. È solo più difficile controllare i colori esatti. Ma se questo non è importante per te, potrebbe essere un po 'più efficiente in termini di linee di codice e forse anche in termini di prestazioni.

Ecco un esempio con alcuni colori casuali e CGBlendModeExclusion (CGBlendModeDifference ti dà un effetto simile)

- (void) drawRect:(CGRect)rect 
{ 
    CGContextRef ctx = UIGraphicsGetCurrentContext(); 
    CGContextSetBlendMode(ctx, kCGBlendModeExclusion); 
    CGColorSpaceRef space = CGColorSpaceCreateDeviceRGB(); 

    CGFloat col1[8] = { 
     1.0, 0.0, 0.0, 1.0, 
     0.0, 0.0, 1.0, 1.0 
    }; 
    CGGradientRef grad1 = CGGradientCreateWithColorComponents (space, col1, NULL, 2); 
    CGContextDrawLinearGradient(ctx, grad1, CGPointMake(0, 0), CGPointMake(0, 320), 0); 


    CGFloat col2[8] = { 
     1.0, 0.5, 0.0, 1.0, 
     0.0, 1.0, 0.0, 1.0 
    }; 
    CGGradientRef grad2 = CGGradientCreateWithColorComponents (space, col2, NULL, 2); 
    CGContextDrawLinearGradient(ctx, grad2, CGPointMake(0, 0), CGPointMake(320, 0), 0); 

    CGGradientRelease(grad1); 
    CGGradientRelease(grad2); 
    CGColorSpaceRelease(space); 
} 
+0

Questa sembra essere una buona soluzione! – Mrwolfy

+0

Fantastico, questo è esattamente quello di cui avevo bisogno, buon lavoro! –

9

disegnare quattro cerchi:

Circles

Applicare radiale gradiente trasparente:

Gradient

Risultato:

Result

Note:

  • Le linee grigie rappresentano le dimensioni bitmap.
  • Il diametro dei cerchi è il doppio del diametro della bitmap.
  • Ogni cerchio è centrato su uno degli angoli bitmap.
  • Effettivamente viene disegnata solo la parte centrale.
  • Le parti rimanenti si trovano all'esterno della bitmap.
+0

intelligente, grazie. – Mrwolfy

Problemi correlati