长图、截图、绘图


title: 长图、截图、绘图
date: 2017-11-27
categories:
tags: Objective-C,


关于图片绘制的内容有很多,很难用一篇文章来介绍。这篇文章只是在工作中遇到的情况。根据不同的情况来分别记录一下当时是怎么处理的。

[TOC]

长图

在某些滚动视图里面,可能遇到一张长图来展示所有的内容。
在继承UIScrollView的视图里,可以通过如下方式来生成长图。

UIImage* image = nil;
UIGraphicsBeginImageContext(scrollView.contentSize);
{//重点,既要获取整个scrollerView,又要保证不破环界面本身
CGPoint savedContentOffset = scrollView.contentOffset; // 内容偏移
CGRect savedFrame = scrollView.frame;
scrollView.contentOffset = CGPointZero;
scrollView.frame = CGRectMake(0, 0, scrollView.contentSize.width, scrollView.contentSize.height);
[scrollView.layer renderInContext: UIGraphicsGetCurrentContext()];
image = UIGraphicsGetImageFromCurrentImageContext();
scrollView.contentOffset = savedContentOffset;
scrollView.frame = savedFrame;
}
UIGraphicsEndImageContext();
使用
UIGraphicsBeginImageContextWithOptions(scrollView.contentSize, scrollView.opaque, 0.0);
替换
UIGraphicsBeginImageContext(scrollView.contentSize);
处理图片失真的问题。

tlayer层的大小取决于frame,不是contentSize。

某个UI控件的内容

这个其实是最常见的需求情况,比如某个图片是某种宣传渠道。你们后台没有搞不同机型返回不同的图片。
其实这个时候完全可以直接把读取到的图片,但是,有的时候图片需要进行处理(比如圆角、边框、显示卡片的样式等)。这种情况下没办法对网络请求的图片直接存储。这时可以把需要生成图片的控件做绘制存储。

UIGraphicsBeginImageContext(currentView.bounds.size); //currentView 当前的view  创建一个基于绘图的图形上下文并指定大小为当前视图的bounds
[currentView.layer renderInContext:UIGraphicsGetCurrentContext()]; //renderInContext呈现接受者及其子范围到指定的上下文
UIImage *viewImage = UIGraphicsGetImageFromCurrentImageContext(); //返回一个基于当前图形上下文的图片
UIGraphicsEndImageContext(); //移除栈顶的基于当前位图的图形上下文
UIImageWriteToSavedPhotosAlbum(viewImage, nil, nil, nil); //然后将该图片保存到图片图

在画布上添加UI元素来绘制图片

这种需求可能会在下面这样的场景中遇到:宣传用的落地页。
因为这种场景中一般都会有数额等信息,这些数值每个用户是不一样的。这个时候就需要在模板上绘制出这些会变动的信息。
以某个项目中的战绩海报为例:

#define UIColorFromRGB(rgbValue) [UIColor colorWithRed:((float)((rgbValue & 0xFF0000) >> 16))/255.0 green:((float)((rgbValue & 0xFF00) >> 8))/255.0 blue:((float)(rgbValue & 0xFF))/255.0 alpha:1.0]

+ (UIImage *)createShareImageWithID:(NSString *)userid totalIncome:(NSString *)totalIncome taskIncome:(NSString *)taskIncome apprenticeIncome:(NSString *)apprenticeIncome apprenticeNumber:(NSString *)apprenticeNumber userIcon:(NSString *)userIcon qrCode:(NSString *)qrCode {
UIImage *image = [UIImage imageNamed: @"imageNameString"];
CGSize size= CGSizeMake(image.size.width, image.size.height); // 画布大小 图片大小固定的.
UIGraphicsBeginImageContextWithOptions(size, NO, 0.0); // 尺寸 不透明 无缩放
[image drawAtPoint:CGPointMake(0, 0)];
// 获得一个位图图形上下文
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextDrawPath (context, kCGPathStroke);

//绘制二维码
NSData *ewmData = [NSData dataWithContentsOfURL:[NSURL URLWithString:qrCode]];
UIImage *ewmImage = [UIImage imageWithData:ewmData];
[ewmImage drawInRect:CGRectMake(90, 750, 140, 140) ];

//
NSMutableParagraphStyle *paragraphStyle = [[NSParagraphStyle defaultParagraphStyle] mutableCopy];
paragraphStyle.lineBreakMode = NSLineBreakByTruncatingTail;
paragraphStyle.alignment = NSTextAlignmentCenter;

NSMutableAttributedString *apprenticeAttributedStr = [[NSMutableAttributedString alloc] initWithString:[NSString stringWithFormat:@"%@ 人", apprenticeNumber]];
NSUInteger apprenticeStrLength = apprenticeAttributedStr.length;
[apprenticeAttributedStr addAttributes:@{NSFontAttributeName:[UIFont systemFontOfSize:52.f],NSForegroundColorAttributeName:UIColorFromRGB(0x27313e),NSParagraphStyleAttributeName:paragraphStyle} range:NSMakeRange(0, apprenticeStrLength-2)];
[apprenticeAttributedStr addAttributes:@{NSFontAttributeName:[UIFont systemFontOfSize:28.f],NSForegroundColorAttributeName:UIColorFromRGB(0x27313e),NSParagraphStyleAttributeName:paragraphStyle} range:NSMakeRange(apprenticeStrLength-1, 1)];
[apprenticeAttributedStr drawInRect:CGRectMake(0, 610, 375, 300)];

NSMutableAttributedString *totalIncomeAttributeStr = [[NSMutableAttributedString alloc] initWithString:[NSString stringWithFormat:@"%@ 元", apprenticeIncome]];
NSUInteger totalIncomeStrLength = totalIncomeAttributeStr.length;
[totalIncomeAttributeStr addAttributes:@{NSFontAttributeName:[UIFont systemFontOfSize:52.f],NSForegroundColorAttributeName:UIColorFromRGB(0x27313e),NSParagraphStyleAttributeName:paragraphStyle} range:NSMakeRange(0, totalIncomeStrLength-2)];
[totalIncomeAttributeStr addAttributes:@{NSFontAttributeName:[UIFont systemFontOfSize:28.f],NSForegroundColorAttributeName:UIColorFromRGB(0x27313e),NSParagraphStyleAttributeName:paragraphStyle} range:NSMakeRange(totalIncomeStrLength-1, 1)];
[totalIncomeAttributeStr drawInRect:CGRectMake(375, 610, 375, 300)];

UIImage *tempImg = [UIImage imageNamed:@"show_btn"];
[tempImg drawInRect:CGRectMake(145, 980, 460, 161)];

// 返回绘制的新图形
UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();

return newImage;
}

IMG_0800.JPG

系统API

/* Called via the -display method when the `contents' property is being
* updated. Default implementation does nothing. The context may be
* clipped to protect valid layer content. Subclasses that wish to find
* the actual region to draw can call CGContextGetClipBoundingBox(). */

- (void)drawInContext:(CGContextRef)ctx;

/** Rendering properties and methods. **/

/* Renders the receiver and its sublayers into 'ctx'. This method
* renders directly from the layer tree. Renders in the coordinate space
* of the layer.
*
* WARNING: currently this method does not implement the full
* CoreAnimation composition model, use with caution. */

- (void)renderInContext:(CGContextRef)ctx;
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,242评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,769评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,484评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,133评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,007评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,080评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,496评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,190评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,464评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,549评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,330评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,205评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,567评论 3 298
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,889评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,160评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,475评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,650评论 2 335

推荐阅读更多精彩内容

  • 1、通过CocoaPods安装项目名称项目信息 AFNetworking网络请求组件 FMDB本地数据库组件 SD...
    X先生_未知数的X阅读 15,960评论 3 119
  • 在开发sdk生成jar在eclipse里相对比较容易操作,只要导出class时指定哪里导出就可以,但在用Andro...
    爸比好酷阅读 3,693评论 0 1
  • 人生就是这样从哪跌倒就从哪爬起来青春是人生的一部分但却是人生的精华基本所有大事小事,就会出现在这一阶段比如。 ...
    岚咪阅读 234评论 0 0
  • 所有人都以为‘杰出’源于‘天赋‘,‘天才’却说:我的成就源于‘正确的练习’! 著名心理学家艾利克森在‘专业特长科学...
    王海岭阅读 268评论 0 0