铬文字效果与线性渐变给锯齿边缘

Question

我想在核心图形中产生铬文字效果，我有一些麻烦让它看起来不错。

这是我想达到的效果是：

这是我设法得到：

正如你所看到的梯度边缘相当锯齿状。有没有办法达到这种效果而不诉诸静态PNG纹理填充？

这是我的代码：

- (void)setGradientFill:(UILabel*)label 
{ 
    CGSize textSize = [label.text sizeWithFont:label.font]; 
    CGFloat width = textSize.width;   // max 1024 due to Core Graphics limitations 
    CGFloat height = textSize.height;  // max 1024 due to Core Graphics limitations 

    // create a new bitmap image context 
    UIGraphicsBeginImageContextWithOptions(CGSizeMake(width, height), YES, 0.0); 

    // get context 
    CGContextRef context = UIGraphicsGetCurrentContext(); 
    CGContextSetAllowsAntialiasing(context, true); 
    CGContextSetShouldAntialias(context, true); 

    // push context to make it current (need to do this manually because we are not drawing in a UIView) 
    UIGraphicsPushContext(context); 

    CGContextSetAllowsAntialiasing(context, YES); 
    CGContextSetShouldAntialias(context, YES); 

    //draw gradient 
    CGGradientRef glossGradient; 
    CGColorSpaceRef rgbColorspace; 
    size_t num_locations = 5; 
    CGFloat locations[5] = { 0.0, 0.5, 0.5, 0.65, 1}; 
    CGFloat components[20] = { 
     1.0, 1.0, 1.0, 1.0, 
     1.0, 1.0, 1.0, 1.0, 
     0.878, 0.878, 0.878, 0.878, 
     0.78, 0.78, 0.78, 1.0, 
     1, 1, 1, 1.0 
    }; 
    rgbColorspace = CGColorSpaceCreateDeviceRGB(); 
    glossGradient = CGGradientCreateWithColorComponents(rgbColorspace, components, locations, num_locations); 
    CGPoint start = CGPointMake(0, 0); 
    CGPoint end = CGPointMake(width/4, height*1.2); 
    CGContextDrawLinearGradient(context, glossGradient, start, end, kCGGradientDrawsAfterEndLocation); 

    CGGradientRelease(glossGradient); 
    CGColorSpaceRelease(rgbColorspace); 

    // pop context 
    UIGraphicsPopContext(); 

    // get a UIImage from the image context 
    UIImage *gradientImage = UIGraphicsGetImageFromCurrentImageContext(); 

    // clean up drawing environment 
    UIGraphicsEndImageContext(); 

    label.textColor = [UIColor colorWithPatternImage:gradientImage]; 
} 

编辑的建议下lefteris：

我试过（下面的左图）所做的扩展。出于某种原因，我得到了一些模糊的文字，出现了边缘的人为因素。

我的UIImage的帧大小的图像，以避免内容压腿：

_test.frame = CGRectMake(_test.frame.origin.x, _test.frame.origin.y, image.size.width, image.size.height); 
_test.image = image; 

编辑最近的解决方案：

解决方案通过lefteris是最接近的，你可以”不过真的可以避免锯齿状的渐变边缘。如果你可以使用Photoshop中生成的静态png作为纹理（而不是文本只是填充），但你可能需要几个版本（像我一样）在每个屏幕上获得正确的效果，因为根据大小应用纹理框架不是包含的文本。动态地做它是可能的，但看起来有限。

Answer 1

你也应该平滑你的渐变。

用这个代替：

CGFloat locations[5] = { 0.0, 0.45, 0.55, 0.65, 1}; 

修改我的答案提供了不同的解决方案/建议：

我创建了一个3D文本渲染的UIImage扩展呈现3D文字，which can be found here

使用该类别的扩展，稍作修改，我结束了这个形象：

我相信你不应该创建渐变作为背景颜色，并将其作为整体应用在标签上，因为它也在背景上添加了渐变，这使得它看起来不太现实。

我创建的图像上面，使用这些设置：

UIImage *my3dImage = [UIImage create3DImageWithText:@"61" Font:[UIFont fontWithName:@"Helvetica-Bold" size:180] ForegroundColor:[UIColor colorWithRed:(255/255.f) green:(255/255.f) blue:(255/255.f) alpha:1.0] ShadowColor:[UIColor blackColor] outlineColor:[UIColor lightGrayColor] depth:4 useShine:YES]; 

而且我修改源代码，应用不同的光泽效果：

size_t num_locations = 5; 
    CGFloat locations[5] = { 0.0, 0.49, 0.51, 0.65, 1}; 
    CGFloat gradientComponents[20] = { 
     1.0, 1.0, 1.0, 1.0, 
     1.0, 1.0, 1.0, 1.0, 
     0.878, 0.878, 0.878, 0.878, 
     0.78, 0.78, 0.78, 1.0, 
     1, 1, 1, 1.0 
    }; 

    CGGradientRef glossGradient = CGGradientCreateWithColorComponents(genericRGBColorspace, gradientComponents, locations, num_locations); 
    CGPoint start = CGPointMake(0, expectedSize.height/4); 
    CGPoint end = CGPointMake(expectedSize.width/4, expectedSize.height); 

究其原因，我认为我的做法是更好，是因为它实际上是从文本创建一个蒙版，然后应用渐变，这意味着只有文本获取的是渐变而不是背景。

Answer 2

使用the UIGraphicsBeginImageContextWithOptions function，比例因子设置为0.0。

UIGraphicsBeginImageContext函数调用函数的调用因子无条件地设置为1.0，即使在Retina（@ 2x）设备上也是如此。在Retina设备上，您需要2.0。 0.0将自动检测使用和使用它的正确比例因子。