iOS 绘图学习笔记 - (3)绘制图像

UIKit Images

UIkit都是围绕UIImage类的,我们可以从file或者NSData中创建一个UIImage,同时通过UIImageView显示这个UIImage.我们也可以使用CoreGraphic直接绘制一个Image:

UIImage *SwatchWithColor(UIColor *color, CGFloat side){
    // Create image context(using the main screen scale)
    UIGraphicsBeginImageContextWithOptions(CGSizeMake(side, side), NO, 0.0);
    // 开始绘制
    [color setFill];
    UIRectFill(CGRectMake(0, 0, side, side));
    
    // 获取图片
    UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    return image;
}

对于Image需要记住以下要点:

  • 如果要知道一个图像的范围extent,直接使用size属性,这个属性返回的单位是点point而不是像素pixel,具体的像素范围和具体的mainscreen scale相关.如果是retina屏幕1 point = 2 pixel.
  • 我们可以将UIImage压缩成png或者jpg - UIImagePNGRepresentation,UIImageJPEGRepresentation.这两个方法是将UIImage转化成压缩以后的NSData.
  • 可以直接从UIImage中获取image的Quartz表示CGImage - 可以这样说UIImage是对CGImage(或者Core Image)的轻量级包装.

Building Thumbnails

通常将一个大图转化成小图赖创建缩略图,一般使用image的drawRect方法绘制到目标大小的rect中:

// 获取context!!!
UIImage *image = [UIImage imageNamed:@"myImage"];
[image drawInRect:destinationRect];
UIImage *thumbnail = UIGraphicsGetImageFromCurrentImageContext();

通常创建缩略图需要进行取舍,究竟是Filling rect,还是Fitting Rect:

UIImage *BuildingThumnail(UIImage *sourceImage, CGSize targetSize, BOOL useFitting){
    UIGraphicsBeginImageContextWithOptions(targetSize, NO, 0.0);
    CGRect targetRect = SizeMakeRect(targetSize);
    // 创建source Image 的bounding rect
    CGRect naturalRect = (CGRect){.size = sourceImage.size};
    // 计算 fitting 或者 filling dest rectangle, 使用Rect工具中的工具方法
    CGRect destinationRect = useFitting ? RectByFittingRect(naturalRect, targetRect) : RectByFillingRect(naturalRect, targetRect);
    
    // Draw the new thumbnail
    [sourceImage drawInRect:destinationRect];
    
    // Retrieve and return the new image
    UIImage *thumbnail = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    return thumbnail;
}

Extracting Subimages

与获取缩略图不同,获取子图片无需压缩图片的大小,它只需要获取图片中的部分内容即可,其中的核心方法是CGImageCreateWithImageInRect()

// 所有的单位都是像素
UIImage *ExtractRectFromImage(UIImage *sourceImage, CGRect subRect){
    // Extract image
    CGImageRef imageRef = CGImageCreateWithImageInRect(sourceImage.CGImage, subRect);
    if (imageRef != NULL) {
        UIImage *output = [UIImage imageWithCGImage:imageRef];
        CGImageRelease(imageRef);
        return output;
    }
    return nil;
}

Converting an Image to Grayscale

将图片绘制成grayscale模式.其中最核心的grayscale方法是GrayscaleVersionOfImage,全部的demo code:

UIImage *GrayscaleVersionOfImage(UIImage *sourceImage){
    // Establish grayscale color space
    CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceGray();
    if (colorSpace == NULL) {
        return nil;
    }
    // Extents are integers
    int width = sourceImage.size.width;
    int height = sourceImage.size.height;
    
    // Build context: one byte per pixel, no alpha
    CGContextRef context = CGBitmapContextCreate(NULL, width, height, 8, width, colorSpace, (CGBitmapInfo)kCGImageAlphaNone);
    if (context == NULL) {
        return nil;
    }
    // Replicate image using new color space
    CGRect rect = CGRectMake(0, 0, sourceImage.size.width, sourceImage.size.height);
    CGContextDrawImage(context, rect, sourceImage.CGImage);
    CGImageRef imageRef = CGBitmapContextCreateImage(context);
    CGContextRelease(context);
    
    // Return the grayscale image
    UIImage *output = [UIImage imageWithCGImage:imageRef];
    CFRelease(imageRef);
    return output;
}

Watermarking Images

有时候我们需要给图片加上水印.

-(UIImage *)WatermarkingAnImage{
    CGSize targetSize = CGSizeMake(200, 200);
    UIGraphicsBeginImageContextWithOptions(targetSize, NO, 0.0);
    CGContextRef context = UIGraphicsGetCurrentContext();
    // Draw the original image into the context
    CGRect targetRect = SizeMakeRect(targetSize);
    UIImage *sourceImage = [UIImage imageNamed:@"pronghorn.jpg"];
    CGRect imgRect = RectByFillingRect(SizeMakeRect(sourceImage.size), targetRect); [sourceImage drawInRect:imgRect];
    
    // Rotate the context
    CGPoint center = RectGetCenter(targetRect);
    CGContextTranslateCTM(context, center.x, center.y);
    CGContextRotateCTM(context, M_PI_4);
    CGContextTranslateCTM(context, -center.x, -center.y);
    // Create a string
    NSString *watermark = @"watermark";
    UIFont *font = [UIFont fontWithName:@"HelveticaNeue" size:48];
    CGSize size = [watermark sizeWithAttributes:@{NSFontAttributeName: font}];
    CGRect stringRect = RectCenteredInRect(SizeMakeRect(size), targetRect);
    
    // Retrieve the new image UIImage *image =
    UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    return image;
}

Retrieving Image Data

一般情况下,我们都可以通过PNG或者JPEG方式获取图片的data形式,但是这些data形式里除了图片的数据,还包括了图片的marker data等附加信息.如果我们需要获取纯图片的data数据 byte array,我们就需要直接使用context,来获取source data.

Creating Contexts

我们之前已经使用过CGBitmapContextCreate,这个方法需要如下几个参数:

  • void *data - 一般传入NULL.
  • size_t width and size_t height - image宽和高,通过CGBitmapContextCreate获取的图片的宽和高
  • size_t bitsPerComponent - 在UIKit中,我们一般使用的8-bit bytes,一般传入为8.
  • size_t bytesPerRow - multiply the size of the row by the bytes per component
  • CGColorSpaceRef colorspac e— You pass the color space Quartz should use to create the bitmap context, typically device RGB or device gray.
  • CGBitmapInfo bitmapInfo—This parameter specifies the style of alpha channel the bitmap uses.一般使用kCGImageAlphaPremultipliedFirst(彩色图片),或者kCGImageAlphaNone(grayscale)

Extracting Bytes的demo

NSData *BytesFromRGBImage(UIImage *sourceImage) {
    if (!sourceImage) return nil;
    // Establish color space
    CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
    if (colorSpace == NULL){
        NSLog(@"Error creating RGB color space");
        return nil; }
    // Establish context
    int width = sourceImage.size.width;
    int height = sourceImage.size.height;
    CGContextRef context = CGBitmapContextCreate(NULL,
                                                 width,
                                                 height,
                                                 8, // bits per byte
                                                 width * 4, // bytes per row
                                                 colorSpace,
                                                 (CGBitmapInfo) kCGImageAlphaPremultipliedFirst);
    CGColorSpaceRelease(colorSpace);
    if (context == NULL){
        NSLog(@"Error creating context");
        return nil;
    }
    // Draw source into context bytes
    CGRect rect = (CGRect){.size = sourceImage.size};
    CGContextDrawImage(context, rect, sourceImage.CGImage);
    // Create NSData from bytes
    NSData *data = [NSData dataWithBytes:CGBitmapContextGetData(context) length:(width * height * 4)]; // bytes per image
    CGContextRelease(context);
    return data;
}

Creating Images from Bytes

与上一个步骤相反

#define BITS_PER_COMPONENT 8
#define ARGB_COUNT 4
UIImage *ImageFromBytes(NSData *data, CGSize targetSize) {
    // Check data
    int width = targetSize.width;
    int height = targetSize.height;
    if (data.length < (width * height * 4)) {
        NSLog(@"Error: Got %d bytes. Expected %d bytes", data.length, width * height * 4);
        return nil;
    }
    // Create a color space
    CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
    if (colorSpace == NULL) {
        NSLog(@"Error creating RGB colorspace");
        return nil;
    }
    // Create the bitmap context
    Byte *bytes = (Byte *) data.bytes;
    CGContextRef context = CGBitmapContextCreate(bytes,
                                                 width,
                                                 height,
                                                 BITS_PER_COMPONENT, // 8 bits per component
                                                 width * ARGB_COUNT, // 4 bytes in ARGB
                                                 colorSpace,
                                                 (CGBitmapInfo)kCGImageAlphaPremultipliedFirst);
    CGColorSpaceRelease(colorSpace );
    if (context == NULL){
        NSLog(@"Error. Could not create context");
        return nil; }
    // Convert to image
    CGImageRef imageRef = CGBitmapContextCreateImage(context); UIImage *image = [UIImage imageWithCGImage:imageRef];
    // Clean up CGContextRelease(context); CFRelease(imageRef);
    return image;
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,847评论 4 362
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,208评论 1 292
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,587评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,942评论 0 205
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,332评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,587评论 1 218
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,853评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,568评论 0 198
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,273评论 1 242
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,542评论 2 246
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,033评论 1 260
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,373评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,031评论 3 236
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,073评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,830评论 0 195
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,628评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,537评论 2 269

推荐阅读更多精彩内容