Глянцевые иконки iPhone с использованием основной графики - PullRequest
Новая
       17

Глянцевые иконки iPhone с использованием основной графики

9 голосов
/ 04 апреля 2011

Мне было интересно, знает ли кто-нибудь, как сделать изображение с помощью CoreGraphics и добавить эффект глянца, как вы видите на iOS. В частности, я хочу взять изображение, которое загружается из Интернета, и оформить его так. Я искал высоко и низко, и все, что я нашел, было примерами того, как сделать это в PhotoShop, а не в коде. Я буду признателен за любые фрагменты кода или ссылки на ресурсы, которые могут помочь.

Ответы [ 2 ]

10 голосов
/ 05 апреля 2011

Я понял это сам, потратив несколько часов, пытаясь понять это ... Вот мой код: 

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

Edit: Хотел убедиться, что я дал кредит, где кредит должен. Спасибо Брэду Ларсону за код добавления глянцевого градиента.

2 голосов
/ 04 апреля 2011

Я предоставляю код для рисования глянцевого градиента с использованием Core Graphics в моем ответе здесь .

Если все, что вы хотите сделать, это наложить эффект блеска на ваше изображение, то может быть целесообразнее создать его с помощью CAGradientLayer, как описано Мирко в его ответе .

...