使用核心图形的 iPhone 光泽图标

Posted 2023-03-11

【中文标题】使用核心图形的 iPhone 光泽图标

【英文标题】：iPhone Glossy Icons Using Core Graphics

【发布时间】：2011-04-04 16:29:43

【问题描述】：

我想知道是否有人知道如何使用 CoreGraphics 拍摄图像并添加您在 ios 上看到的光泽效果。具体来说，我想拍摄一张从网上下载的图像，并像这样设置它的样式。我搜索了高低，我发现的只是如何在 PhotoShop 中而不是在代码中执行此操作的示例。任何可以帮助我的代码 sn-ps 或资源指针都将不胜感激。

【问题讨论】：

也许制作光泽部分的图像，将其放在另一个图像上，alpha ~0.3？

Bemmu：我当然可以这样做，但它不会那么有效，而且试图让它正确排列会让我非常头疼。而且它看起来不像我放在它上面的光泽图像不会吸收下面的任何颜色那样自然。

【参考方案1】：

在浪费了几个小时试图弄清楚这一点后，我自己弄清楚了……这是我的代码：

static void addRoundedRectToPath(CGContextRef context, CGRect rect, float ovalWidth, float ovalHeight) 
    float fw, fh;
    if (ovalWidth == 0 || ovalHeight == 0) 
        CGContextAddRect(context, rect);
        return;
    
    CGContextSaveGState(context);
    CGContextTranslateCTM (context, CGRectGetMinX(rect), CGRectGetMinY(rect));
    CGContextScaleCTM (context, ovalWidth, ovalHeight);
    fw = CGRectGetWidth (rect) / ovalWidth;
    fh = CGRectGetHeight (rect) / ovalHeight;
    CGContextMoveToPoint(context, fw, fh/2);
    CGContextAddArcToPoint(context, fw, fh, fw/2, fh, 1);
    CGContextAddArcToPoint(context, 0, fh, 0, fh/2, 1);
    CGContextAddArcToPoint(context, 0, 0, fw/2, 0, 1);
    CGContextAddArcToPoint(context, fw, 0, fw, fh/2, 1);
    CGContextClosePath(context);
    CGContextRestoreGState(context);


static void addGlossPath(CGContextRef context, CGRect rect) 
    CGFloat quarterHeight = CGRectGetMidY(rect) / 2;
    CGContextSaveGState(context);
    CGContextBeginPath(context);
    CGContextMoveToPoint(context, -20, 0);

    CGContextAddLineToPoint(context, -20, quarterHeight);
    CGContextAddQuadCurveToPoint(context, CGRectGetMidX(rect), quarterHeight * 3, CGRectGetMaxX(rect) + 20, quarterHeight);
    CGContextAddLineToPoint(context, CGRectGetMaxX(rect) + 20, 0);

    CGContextClosePath(context);
    CGContextRestoreGState(context);


UIImage *applyIconHighlightToImage(UIImage *icon) 
    UIImage *newImage;
    CGContextRef context;
    CGGradientRef glossGradient;
    CGColorSpaceRef rgbColorspace;
    CGRect currentBounds = CGRectMake(0, 0, icon.size.width, icon.size.height);
    CGPoint topCenter = CGPointMake(CGRectGetMidX(currentBounds), 0.0f);
    CGPoint midCenter = CGPointMake(CGRectGetMidX(currentBounds), CGRectGetMidY(currentBounds));

    CGFloat locations[2] = 0.0, 1.0;
    CGFloat components[8] = 1.0, 1.0, 1.0, 0.75, 1.0, 1.0, 1.0, 0.2;

    UIGraphicsBeginImageContext(icon.size);
    context = UIGraphicsGetCurrentContext();
    UIGraphicsPushContext(context);

    addRoundedRectToPath(context, currentBounds, 10, 10);
    CGContextClosePath(context);
    CGContextClip(context);
    [icon drawInRect:currentBounds];

    addGlossPath(context, currentBounds);
    CGContextClip(context);

    rgbColorspace = CGColorSpaceCreateDeviceRGB();
    glossGradient = CGGradientCreateWithColorComponents(rgbColorspace, components, locations, 2);

    CGContextDrawLinearGradient(context, glossGradient, topCenter, midCenter, 0);

    UIGraphicsPopContext();

    newImage = UIGraphicsGetImageFromCurrentImageContext();
    CGGradientRelease(glossGradient);
    CGColorSpaceRelease(rgbColorspace);
    UIGraphicsEndImageContext();

    return newImage;

编辑： 想确保我在信用到期时给予信用。感谢 Brad Larson 提供了有关添加光泽渐变的代码。

【参考方案2】：

我在回答 here 中提供了使用 Core Graphics 绘制光泽渐变的代码。

如果您只想在图像上叠加光泽效果，则使用 CAGradientLayer 生成此效果可能会更高效，正如 Mirko 在his answer 中所述。