Zaokrąglone rect z kolorem Gradient

Question

Nie zrobiłem zbyt wiele programowania z Core Graphics. I mam tendencję do trzymania się QuartzCore teraz, że robi to dużo, czego potrzebuję przez właściwość warstwy :)

Jednak mam UIView, który jest obecnie gradientem. Chciałbym dodać zaokrąglone narożniki do tego UIView i właściwości warstwy nie to zrobić, gdy rysuję gradient:

- (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); 
} 

nie jestem pewien, gdzie powinny być zaokrąglenie w metodzie drawRect. Dzięki.

Answer 1

Czy sprawdziłeś poprzednie pytania? Przeczytałem jeden raz o maskowaniu UIViews. Myślę, że to samo dotyczy prawie wszystkich przedmiotów, które wykorzystują drawRect

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

---

Oto co zrobiłem, i to działa dobrze o ile mogę powiedzieć.

Po pierwsze, pożyczyłem fragment kodu z powyższego postu z kodem NilObject.

zmodyfikowałem go zmieścić w obiekcie (jak pisał ją jako funkcję C zamiast metody)

I podklasy UIView stworzyć własną niestandardową pogląd. Przeciążam initWithRect: aby moje tło było przezroczyste.

Więc zasadniczo:

• ustawić przezroczyste tło (w init) lub strzyżenie będzie uggly
• w drawRect, pierwszy klip, a następnie narysować wewnątrz przycięty obszar

Poniżej znajduje się działający przykład:

// 
// 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]; 

Upewnij się także do importu „QuartzCore” Ramy