带有线性渐变的 Chrome 文本效果会产生锯齿状边缘

Question

我正在尝试在核心图形中生成 chrome 文本效果，但在让它看起来正确时遇到了一些问题。

这是我想要达到的效果：

这是我设法得到的：

如您所见，渐变边缘非常参差不齐。有没有办法在不使用静态 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];
}

编辑左撇子的建议：

我尝试了您制作的扩展程序（左下图）。由于某种原因，我得到一些非常模糊的文本，边缘有伪影。

我将 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

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

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

Answer 2

您还应该平滑渐变。

改用这个：

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

我编辑我的答案以提供不同的解决方案/建议：

我创建了一个渲染 3D 文本的 3D 文本渲染 UIImage Extension，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);

原因，我相信我的方法更好，因为它实际上是从文本创建蒙版，然后应用渐变，这意味着只有文本得到渐变而不是背景。