Rettangolo arrotondato con colore sfumato

Question

Non ho davvero fatto molta programmazione con Core Graphics. E io tendo ad aderire con QuartzCore ora che fa molto di quello che mi serve attraverso la proprietà layer :)

Tuttavia, ho un UIView, che è attualmente gradiente. Mi piacerebbe aggiungere gli angoli arrotondati a questo UIView e la proprietà del livello non fare questo quando disegno il gradiente:

- (void)drawRect:(CGRect)rect { 
    CGContextRef currentContext = UIGraphicsGetCurrentContext(); 

    CGGradientRef glossGradient; 
    CGColorSpaceRef rgbColorspace; 
    size_t num_locations = 2; 
    CGFloat locations[2] = { 0.0, 1.0 }; 
    CGFloat components[8] = { 1.0, 1.0, 1.0, 0.95, // Start color 
          1.0, 1.0, 1.0, 0.60 }; // End color 

    rgbColorspace = CGColorSpaceCreateDeviceRGB(); 
    glossGradient = CGGradientCreateWithColorComponents(rgbColorspace, components, locations, num_locations); 

    CGRect currentBounds = self.bounds; 
    CGPoint topCenter = CGPointMake(CGRectGetMidX(currentBounds), 0.0f); 
    CGPoint midCenter = CGPointMake(CGRectGetMidX(currentBounds), CGRectGetMaxY(currentBounds)); 
    CGContextDrawLinearGradient(currentContext, glossGradient, topCenter, midCenter, 0); 

    CGGradientRelease(glossGradient); 
    CGColorSpaceRelease(rgbColorspace); 
} 

io non sono davvero sicuro dove dovrei arrotondamento nel metodo drawRect. Grazie.

Answer 1

Hai controllato le domande precedenti? Ho letto un po 'di tempo fa sul mascheramento di UIViews. Credo che lo stesso vale praticamente su tutti gli oggetti che usano drawRect

How to mask a square image into an image with round corners in the iPhone SDK?

---

Ecco quello che ho fatto, e funziona bene per quanto posso dire.

In primo luogo, ho preso in prestito lo snippet di codice NilObject dal post sopra menzionato.

ho modificata per adattarsi a un oggetto (come ha scritto come una funzione C invece di un metodo)

ho sottoclasse UIView per creare la mia vista personalizzata. Sovraccarico initWithRect: per rendere trasparente il mio background.

Quindi, fondamentalmente:

• impostare lo sfondo trasparente (in init), o clipping sarà uggly
• in drawRect, primo clip, quindi disegnare all'interno dell'area ritagliata

Di seguito è riportato un esempio:

// 
// TeleView.m 
// 

#import "TeleView.h" 


@implementation TeleView 
/**** in init methods, set background to transparent, 
     otherwise, clipping shows a black background ****/ 

- (id) initWithFrame:(CGRect)frame { 
    if((self = [super initWithFrame:frame])) { 
     [self setBackgroundColor:[UIColor colorWithWhite:0.0f alpha:0.0f]]; 
    } 
    return self; 
} 
- (void) clipCornersToOvalWidth:(float)ovalWidth height:(float)ovalHeight 
{ 
    float fw, fh; 
    CGContextRef context = UIGraphicsGetCurrentContext(); 
    CGRect rect = CGRectMake(0.0f, 0.0f, self.frame.size.width, self.frame.size.height); 

    if (ovalWidth == 0 || ovalHeight == 0) { 
     CGContextAddRect(context, rect); 
     return; 
    } 
    CGContextSaveGState(context); 
    CGContextTranslateCTM (context, CGRectGetMinX(rect), CGRectGetMinY(rect)); 
    CGContextScaleCTM (context, ovalWidth, ovalHeight); 
    fw = CGRectGetWidth (rect)/ovalWidth; 
    fh = CGRectGetHeight (rect)/ovalHeight; 
    CGContextMoveToPoint(context, fw, fh/2); 
    CGContextAddArcToPoint(context, fw, fh, fw/2, fh, 1); 
    CGContextAddArcToPoint(context, 0, fh, 0, fh/2, 1); 
    CGContextAddArcToPoint(context, 0, 0, fw/2, 0, 1); 
    CGContextAddArcToPoint(context, fw, 0, fw, fh/2, 1); 
    CGContextClosePath(context); 
    CGContextRestoreGState(context); 
} 

-(void)drawRect:(CGRect)rect { 
    CGContextRef currentContext = UIGraphicsGetCurrentContext(); 
    /**** here is what I modified. ****/ 
    [self clipCornersToOvalWidth:20.0f height:20.0f]; 
    CGContextClip(currentContext); 

    /**** below this is your own code ****/ 
    CGGradientRef glossGradient; 
    CGColorSpaceRef rgbColorspace; 
    size_t num_locations = 2; 
    CGFloat locations[2] = { 0.0, 1.0 }; 
    CGFloat components[8] = { 1.0, 0.0, 0.0, 0.60, // Start color 
    0.0, 1.0, 0.0, 0.40 }; // End color 

    rgbColorspace = CGColorSpaceCreateDeviceRGB(); 
    glossGradient = CGGradientCreateWithColorComponents(rgbColorspace, components, locations, num_locations); 

    CGRect currentBounds = self.bounds; 
    CGPoint topCenter = CGPointMake(CGRectGetMidX(currentBounds), 0.0f); 
    CGPoint midCenter = CGPointMake(CGRectGetMidX(currentBounds), CGRectGetMaxY(currentBounds)); 
    CGContextDrawLinearGradient(currentContext, glossGradient, topCenter, midCenter, 0); 

    CGGradientRelease(glossGradient); 
    CGColorSpaceRelease(rgbColorspace); 

} 

@end 

Answer 2

NSArray *colors = [NSArray arrayWithObjects:fromColor.CGColor,toColor.CGColor, nil]; 

NSNumber *stopOne = [NSNumber numberWithFloat:0.0]; 
NSNumber *stopTwo = [NSNumber numberWithFloat:1.0]; 

NSArray *locations = [NSArray arrayWithObjects:stopOne, stopTwo, nil]; 

CAGradientLayer *headerLayer = [CAGradientLayer layer]; 
headerLayer.colors = colors; 
headerLayer.locations = locations; 

headerLayer.borderColor = borderColor.CGColor; // border line color**strong text** 
headerLayer.borderWidth = width;// For Thickness of border line 
headerLayer.cornerRadius = radius;//For Rounded Corner if You want to make rounded Corner 

headerLayer.frame = frame; 

[view.layer insertSublayer:headerLayer atIndex:0]; 

Assicuratevi anche di importare "QuartzCore" quadro