如何在iPhone上使用SOFT EDGE繪制圓角矩形？

Question

我需要在圖像上覆蓋一些文本。 因為圖像有很多細節，所以我需要做一些事情以使文本更清晰。

我想做的是在文本下方繪制一個半透明的白色圓角矩形，並帶有一個SOFT EDGE。

我嘗試用白色陰影繪制一個白色的圓角矩形，但這並不能完全達到我想要的效果。 這樣會在圓角矩形和陰影之間產生硬邊。 我希望這是一個平穩的過渡。

有任何想法嗎？

Answer 1

我用CGGradient做過類似的CGGradient ，這很痛苦，最終結果看起來並不好。 一種更簡單的方法是使用- (UIImage *)stretchableImageWithLeftCapWidth:(NSInteger)leftCapWidth topCapHeight:(NSInteger)topCapHeight使用部分透明的PNG創建邊緣

透明圖形很昂貴，因此如果您有很多標簽，這可能會嚴重降低性能，但是如果您只有幾個標簽（它們不動或需要大量重繪），則可以。

Answer 2

您需要子類化UIView並修改drawRect:方法以允許半徑。 對於drawRect:的固定半徑為10.0px的代碼示例，請嘗試以下操作：

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

並調整我的上述方法，以包括所有radius調用的self.radius ，刪除頂部的float聲明。