如何在iPhone上使用SOFT EDGE绘制圆角矩形?

时间:2010-12-02 15:36:55

标签: iphone objective-c core-graphics

我需要在图像上叠加一些文字。因为图像有很多细节,所以我需要做一些事情来使文本更清晰。

我想做的是在文字下面画一个半透明的白色圆角矩形和一个SOFT EDGE。

我尝试用白色阴影画一个白色的圆角矩形,但这并没有给我带来我想要的效果。它会在圆角矩形和阴影之间产生硬边。我希望它能够顺利过渡。

有什么想法吗?

2 个答案:

答案 0 :(得分:1)

我做过与CGGradient类似的事情,这很痛苦,最后的结果看起来并不那么好。一种更简单的方法是使用- (UIImage *)stretchableImageWithLeftCapWidth:(NSInteger)leftCapWidth topCapHeight:(NSInteger)topCapHeight

创建具有部分透明PNG的边

透明图形价格昂贵,如果你有很多标签,这可能会过度降低性能,但如果你只有少数(并且它们不移动或需要大量重绘)你会没事的

答案 1 :(得分:-1)

您需要子类化UIView并修改drawRect:方法以允许半径。对于具有固定半径10.0px的drawRect:的代码示例,请尝试以下操作:

- (void)drawRect:(CGRect)rect {

    float radius = 10.0f;

    CGContextRef context = UIGraphicsGetCurrentContext();
    CGContextSetRGBFillColor(context, 255,255,255,0.25);

    CGContextMoveToPoint(context, rect.origin.x, rect.origin.y + radius);
    CGContextAddLineToPoint(context, rect.origin.x, rect.origin.y + rect.size.height - radius);
    CGContextAddArc(context, rect.origin.x + radius, rect.origin.y + rect.size.height - radius, 
                radius, M_PI / 4, M_PI / 2, 1);
    CGContextAddLineToPoint(context, rect.origin.x + rect.size.width - radius, 
                        rect.origin.y + rect.size.height);
    CGContextAddArc(context, rect.origin.x + rect.size.width - radius, 
                rect.origin.y + rect.size.height - radius, radius, M_PI / 2, 0.0f, 1);
    CGContextAddLineToPoint(context, rect.origin.x + rect.size.width, rect.origin.y + radius);
    CGContextAddArc(context, rect.origin.x + rect.size.width - radius, rect.origin.y + radius, 
                radius, 0.0f, -M_PI / 2, 1);
    CGContextAddLineToPoint(context, rect.origin.x + radius, rect.origin.y);
    CGContextAddArc(context, rect.origin.x + radius, rect.origin.y + radius, radius, 
                -M_PI / 2, M_PI, 1);

    CGContextFillPath(context);
}

所以最好的方法是添加

@property CGFloat radius;

到头文件,并覆盖默认构造函数:

-(id) initWithFrame:(CGRect)aRect radius:(CGFloat)rad color:(UIColor *)bgColor opacity:(CGFloat)opacity {
    if (self = [super initWithFrame:aRect]) {
        [self setOpacity:opacity];
        [self setBackgroundColor:bgColor];
        [self setRadius:rad];
    }
}

并调整我的上述方法,为所有self.radius次调用添加radius,删除顶部的float声明。