Скругленный прямоугольник с градиентом цвета - PullRequest
Новая
       39

Скругленный прямоугольник с градиентом цвета

6 голосов
/ 14 декабря 2009

Я не особо много программировал с Core Graphics. И я склонен придерживаться QuartzCore теперь, когда он делает многое из того, что мне нужно, через свойство layer:)

Тем не менее, у меня есть UIView, который в настоящее время градиентный. Я хотел бы добавить закругленные углы к этому UIView, и свойство layer не делает этого, когда я рисую градиент: 

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

Я не совсем уверен, где мне следует округлять в методе drawRect. Спасибо.

Ответы [ 2 ]

7 голосов
/ 14 июня 2013 
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];

Также убедитесь, что импортировали "QuartzCore" фреймворк

7 голосов
/ 15 декабря 2009

Вы проверили предыдущие публикации вопросов? Некоторое время назад я читал о маскировке UIViews. Я думаю, что то же самое в значительной степени относится ко всем объектам, которые используют drawRect

Как замаскировать квадратное изображение в изображение с закругленными углами в iPhone SDK?

Вот что я сделал, и насколько я могу судить, он работает отлично.

Сначала я позаимствовал фрагмент кода мистера NilObject из вышеупомянутого поста.

Я изменил его, чтобы он соответствовал объекту (так как он написал его как функцию C вместо метода)

Я подкласс UIView, чтобы создать свой собственный вид. Я перегружаю initWithRect: чтобы сделать мой фон прозрачным.

Так в основном:

  • установить прозрачный фон (в init), иначе обрезка будет ужасной
  • в drawRect, сначала обрезать, затем рисовать внутри обрезанной области

Ниже приведен рабочий пример: 

//
//  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
...