使用核心图形的iPhone光泽图标 [英] iPhone Glossy Icons Using Core Graphics

问题描述

我想知道是否有人知道如何使用CoreGraphics拍摄图像并添加你在iOS上看到的光泽效果。具体来说，我想拍摄一张从网上下载并按照这样设计的图像。我搜索了高低，我发现的只是如何在PhotoShop而不是代码中进行的示例。任何代码片段或指向资源的指针都可以帮助我感激。

I was wondering if anyone knows how to take an Image using CoreGraphics and add a gloss effect like you see on iOS. Specifically I want to take an image that gets downloaded from the web and style it like this. I've searched high and low and all I found was examples of how to do it in PhotoShop and not in code. Any code snippets or pointers to resources that can help I would appreciate.

推荐答案

我在浪费了一些之后自己想出来了小时试图解决这个...这是我的代码：

I figured it out on my own after wasting a few hours trying to figure this out... Here's my code:

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关于添加光泽渐变的代码。

Wanted to make sure I gave credit where credit is due. Thanks to Brad Larson for the code on adding a glossy gradient.

这篇关于使用核心图形的iPhone光泽图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！