Question

任何人都对如何使用WebKit和CSS3和/或透明叠加图像重现iPhone应用程序图标的光泽有任何想法？这甚至可能吗？

Answer 1

iPhone OS使用以下图像组成图标：

Answer 2

这就是我在我的应用中仅使用AppIconOverlay.png实现上述功能的方法。我有点像预期的效果。

它没有阴影，但我确定如果你真的想要它，你可以修改代码以满足你的需要。就AppIconMask.png而言，由于我使用#import <QuartzCore/QuartzCore.h>框架以便通过添加layer.masksToBounds和{{1}来达到预期的效果，因此我无法真正看到使用它的任何需要}。

我希望这对任何有兴趣实现Apple Springboard叠加效果的人都有效。哦，谢谢你rpetrich提供这些图片。

我为代码中缺少评论而道歉。它是分散在互联网上的类似现有实现的代码的高潮。所以我要感谢所有这些人提供的那些零碎的代码。

layer.cornerRadius

用法：

- (UIImage *)getIconOfSize:(CGSize)size icon:(UIImage *)iconImage withOverlay:(UIImage *)overlayImage {
 UIImage *icon = [self scaleImage:iconImage toResolution:size.width];

 CGRect iconBoundingBox = CGRectMake (0, 0, size.width, size.height);
 CGRect overlayBoundingBox = CGRectMake (0, 0, size.width, size.height);

 CGContextRef myBitmapContext = [self createBitmapContextOfSize:size];

 CGContextSetRGBFillColor (myBitmapContext, 1, 1, 1, 1);
 CGContextFillRect (myBitmapContext, iconBoundingBox);
 CGContextDrawImage(myBitmapContext, iconBoundingBox, icon.CGImage);
 CGContextDrawImage(myBitmapContext, overlayBoundingBox, overlayImage.CGImage);
 UIImage *result = [UIImage imageWithCGImage: CGBitmapContextCreateImage (myBitmapContext)];
 CGContextRelease (myBitmapContext);

 return result;
}

- (CGContextRef)createBitmapContextOfSize:(CGSize)size {
 CGContextRef    context = NULL;
 CGColorSpaceRef colorSpace;
 void *          bitmapData;
 int             bitmapByteCount;
 int             bitmapBytesPerRow;

 bitmapBytesPerRow   = (size.width * 4);
 bitmapByteCount     = (bitmapBytesPerRow * size.height);

 colorSpace = CGColorSpaceCreateDeviceRGB();
 bitmapData = malloc( bitmapByteCount );

 if (bitmapData == NULL) {
  fprintf (stderr, "Memory not allocated!");
  return NULL;
 }

 context = CGBitmapContextCreate (bitmapData,
          size.width,
          size.height,
          8,      // bits per component
          bitmapBytesPerRow,
          colorSpace,
          kCGImageAlphaPremultipliedLast);

 CGContextSetAllowsAntialiasing (context,NO);

 if (context== NULL) {
  free (bitmapData);
  fprintf (stderr, "Context not created!");
  return NULL;
 }

 CGColorSpaceRelease( colorSpace );

 return context;
}

- (UIImage *)scaleImage:(UIImage *)image toResolution:(int)resolution {
 CGFloat width = image.size.width; 
 CGFloat height = image.size.height;
 CGRect bounds = CGRectMake(0, 0, width, height);

    // If already at the minimum resolution, return the original image, otherwise scale.
    if (width <= resolution && height <= resolution) {
        return image;
    } else {
        CGFloat ratio = width/height;

        if (ratio > 1) {
            bounds.size.width = resolution;
            bounds.size.height = bounds.size.width / ratio;
        } else {
            bounds.size.height = resolution;
            bounds.size.width = bounds.size.height * ratio;
        }
    }

    UIGraphicsBeginImageContext(bounds.size);
    [image drawInRect:CGRectMake(0.0, 0.0, bounds.size.width, bounds.size.height)];
    UIImage *imageCopy = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();

    return imageCopy;
}

使用WebKit重现Springboard的图标闪耀

2 个答案: