圆角矩形，渐变色 [英] Rounded rect with Gradient color

问题描述

我还没有真正用Core Graphics做过多少编程。而且我倾向于坚持使用QuartzCore，因为它通过图层属性完成了我需要的很多东西：）

I have not really done much programming with Core Graphics. And I tend to stick with QuartzCore now that it does a lot of what I need through the layer property :)

但是，我有一个UIView，它当前是渐变的。我想为这个UIView添加圆角，当我绘制渐变时，图层属性不会这样做：

However, I have a UIView, which is currently gradient. I'd like to add rounded corners to this UIView and the layer property does not do this when I draw the 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);
}

我不确定我应该在drawRect方法中舍入到哪里。谢谢。

I am not really sure where I should be rounding in the drawRect method. Thanks.

推荐答案

您检查过上一个问题的帖子吗？我读了一段关于掩盖UIViews的内容。我认为同样适用于使用drawRect的所有对象

Have you checked previous question postings? I read one a while back about masking UIViews. I think the same applies pretty much on all objects which use drawRect

如何将方形图像屏蔽成iPhone SDK中带圆角的图像？

这就是我所做的，就我所知，它可以正常工作。

Here's what I did, and it works fine as far as I can tell.

首先，我从上述帖子中借用了 NilObject 的代码片段。

First, I borrowed Mr NilObject's code snippet from the above mentioned post.

我修改它以适应对象（因为他把它写成C函数而不是方法）

I modified it to fit in an object (as he wrote it as a C function instead of a method)

我是子类UIView创建我自己的自定义视图。我重载initWithRect：使我的背景透明。

I subclass UIView to create my own custom view. I overload initWithRect: to make my background transparent.

所以基本上：

• 在drawRect中设置透明背景（在初始化中），或者剪切将是uggly


• ，第一个剪辑，然后在剪切区域内绘制

以下是一个有效的例子：

The following is a working example:

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

这篇关于圆角矩形，渐变色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！