带Progress的Image

闲来无事, 来写这个玩玩, 首先看一下效果。

效果图

通过下边滑杆的变化, 可以使上边的图片慢慢的从左往右, 用有色的图覆盖掉灰色的图。

1. 这是图片的扩展

UIImage+ProgressImage.h

#import 

typedef NS_OPTIONS(NSUInteger, DLProgressImageDirection) {
    
    DLProgressImageDirectionRightToLeft = 1UL << 0,
    DLProgressImageDirectionLeftToRight = 1UL << 1,
    DLProgressImageDirectionTopToBottom = 1UL << 2,
    DLProgressImageDirectionBottomToTop = 1UL << 3
};

@interface UIImage (ProgressImage)

/*!
 *  创建进度样式的图片
 *
 *  @param progress  进度 0 - 1
 *  @param isShow    是否显示灰色的原图, 然后慢慢覆盖彩色图
 *  @param direction 进度绘制方向
 *
 *  @return 返回新的图片
 */
- (UIImage *)createImageForCurrentProgress: (CGFloat)progress
                                showGrayBG: (BOOL)isShow
                                 direction: (DLProgressImageDirection)direction;

@end

UIImage+ProgressImage.m

- (UIImage *)createImageForCurrentProgress: (CGFloat)progress
                                showGrayBG: (BOOL)isShow
                                 direction: (DLProgressImageDirection)direction {
    
    const int ALPHA = 0;
    const int RED = 1;
    const int GREEN = 2;
    const int BLUE = 3;
    
    CGRect imageRect = CGRectMake(0, 0, self.size.width * self.scale, self.size.height * self.scale);
    
    int width = imageRect.size.width;
    int height = imageRect.size.height;
    
    uint32_t *pixels = (uint32_t *) malloc(width * height * sizeof(uint32_t));
    
    memset(pixels, 0, width * height * sizeof(uint32_t));
    
    CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
    
    CGContextRef context = CGBitmapContextCreate(pixels, width, height, 8, width * sizeof(uint32_t), colorSpace, kCGBitmapByteOrder32Little | kCGImageAlphaPremultipliedLast);
    
    CGContextDrawImage(context, CGRectMake(0, 0, width, height), self.CGImage);
    
    // 计算一下progress, 根据方向产生转变约束区间
    int xFrom = 0;
    int xTo = width;
    int yFrom = 0;
    int yTo = height;
    
    switch (direction) {
        case DLProgressImageDirectionBottomToTop:
                yTo = height * (1 - progress);
            break;
            
        case DLProgressImageDirectionLeftToRight:
                xFrom = width * progress;
            break;
            
        case DLProgressImageDirectionRightToLeft:
                xTo = width * (1 - progress);
            break;
            
        case DLProgressImageDirectionTopToBottom:
                yFrom = height * progress;
            break;
            
        default:
                xFrom = width * progress;
            break;
    }
    
    for (int x = xFrom; x < xTo; x++) {
        for (int y = yFrom; y < yTo; y++) {
            // 获得像素值
            uint8_t *rgbaPixel = (uint8_t *) &pixels[y * width + x];
            // 转变
            if (isShow) {
                // luma 编码转为灰色数值
                uint32_t gray = 0.3 * rgbaPixel[RED] + 0.59 * rgbaPixel[GREEN] + 0.11 * rgbaPixel[BLUE];
                // 灰色
                rgbaPixel[RED] = gray;
                rgbaPixel[GREEN] = gray;
                rgbaPixel[BLUE] = gray;
            } else {
                // 无色阶
                rgbaPixel[RED] = 0;
                rgbaPixel[GREEN] = 0;
                rgbaPixel[BLUE] = 0;
                rgbaPixel[ALPHA] = 0;
            }
        }
    }
    
    // 通过最新的context创建imageRef, 为了生成新的Image
    CGImageRef image = CGBitmapContextCreateImage(context);
    
    CGContextRelease(context);
    CGColorSpaceRelease(colorSpace);
    free(pixels);
    
    UIImage *resultUIImage = [UIImage imageWithCGImage:image scale:self.scale orientation:UIImageOrientationUp];
    
    CGImageRelease(image);
    
    return resultUIImage;
}

• 具体使用

import "UIImage+ProgressImage.h"

使用方法

@CopyRight Dylan 2015.8.16