iphone - 具有线性渐变的 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];
}

编辑 lefteris 的建议:

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

我将 UIImage 框架的大小调整为图像以避免内容拉伸(stretch):

_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 将自动检测要使用的正确比例因子并使用它。