0

我正在尝试在核心图形中生成 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 框架调整为图像的大小以避免内容拉伸：

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

编辑最近的解决方案：

lefteris 的解决方案是最接近的，但您无法真正避免锯齿状渐变边缘。如果可以的话，您应该使用在 Photoshop 中生成的静态 png 来处理纹理（不仅仅是填充的文本），但您可能需要多个版本（就像我一样）才能在每个屏幕上获得正确的效果，因为纹理是根据大小应用的框架不是包含的文本。动态地执行它是可能的，但它似乎有限。

4

2 回答 2

1

使用比例因子设置为的UIGraphicsBeginImageContextWithOptions函数0.0。

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

于 2012-12-24T10:34:06.667 回答
0

您还应该平滑渐变。

改用这个：

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

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

我创建了一个渲染 3D 文本的 3D 文本渲染 UIImage 扩展，可以在这里找到

使用该类别扩展，并进行一些修改，我最终得到了这张图片：

在此处输入图像描述

我相信您不应该将渐变创建为背景颜色并将其作为一个整体应用到标签上，因为它也在背景上添加渐变，这使得它看起来不那么逼真。

我使用以下设置创建了上面的图像：

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);

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

于 2012-12-24T13:48:10.603 回答