iOS图形绘制

图形绘制在iOS开发中很常见,处于工作的需要和自身爱好,我就把最近自己使用过的图形绘制的简单方式稍微总结了一下 ,最近没怎么写博客了,不足之处大家多多指点

基本绘制

//    UIGraphicsBeginImageContextWithOptions(<#CGSize size#>, <#BOOL opaque#>, <#CGFloat scale#>)方法中各个参数:
     size :bitmap的大小
     opaque : YES:不透明  NO:透明
     scale: 缩放比例
     创建出来的bitmap就对应一个UIImage
    UIGraphicsBeginImageContextWithOptions(CGSizeMake(200, 200), NO , 0);

    CGContextRef ctx = UIGraphicsGetCurrentContext();
    CGContextAddEllipseInRect(ctx, CGRectMake(0, 0, 100, 100));
    CGContextStrokePath(ctx);
    UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
    self.aImageView.image = image;
代码执行效果

往往我们还需要把绘制好的图形保存起来,我们需要先将图片转换为二进制数据, 然后进行保存。

UIImageJPEGRepresentation(<#UIImage * _Nonnull image#>, <#CGFloat compressionQuality#>)
//第一个参数是需要保存的图片对象,第二个参数则可以决定我们需要保存图片的质量 一般取 1

//     NSData *data = UIImageJPEGRepresentation(image, 1)
    NSData *data = UIImagePNGRepresentation(image);
   [data writeToFile:@"/Users/apple/XXXXXX.png" atomically:YES];

水印图片

我们新建一个继承UIImage的类,声明一个实现返回一个带水印图片的类方法
.h

#import <UIKit/UIKit.h>
@interface UIImage (LGJImage)
/**
 *  生成水印
 *  @param bgName  背景图片
 *  @param logNmae 水印图片
 *  @return 生成好的图片(带水印的图片)
 */
+ (instancetype)imageWithBackgroundImageName:(NSString *)bgName log:(NSString *)logName;
@end

.m

#import "UIImage+LGJImage.h"

@implementation UIImage (LGJImage)
+ (instancetype)imageWithBackgroundImageName:(NSString *)bgName log:(NSString *)logName
{
    UIImage *image = [UIImage imageNamed:bgName];//需要添加水印的图片
UIGraphicsBeginImageContextWithOptions(image.size, NO, 0);//bitmap上下文
    [image drawAtPoint:CGPointMake(0, 0)];    // 绘制背景图片
    // 绘制水印'
     UIImage *logImage = [UIImage imageNamed:logName];
     CGFloat margin = 10;
     CGFloat logY = margin;
     CGFloat logX = image.size.width - margin - logImage.size.width;
     [logImage drawAtPoint:CGPointMake(logX, logY)];
//    NSString *str = @"我是见哥,我为自己代言";
//    [str drawAtPoint:CGPointMake(150, 50) withAttributes:nil];
    UIImage *newImage =  UIGraphicsGetImageFromCurrentImageContext();
    return newImage;
}
@end

接下来我们在ViewController的viewDidLoad方法中调用LGJImage的类方法来生成水印图片

- (void)viewDidLoad
{
    [super viewDidLoad];
    UIImage *newImage =  [UIImage imageWithBackgroundImageName:@"JJ" log:@"JJlog"];
    NSString *path = [[NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask, YES) lastObject] stringByAppendingPathComponent:@"lgj.png"];
    NSLog(@"%@", path);
    NSData *data = UIImagePNGRepresentation(newImage);
    [data writeToFile:path atomically:YES];
}
水印图片

水印文字

    // 0. 加载背景图片
    UIImage *image = [UIImage imageNamed:@"LGJJJ"];
    
    // 1.创建bitmap上下文
    // 执行完这一行在内存中就相遇创建了一个UIImage
UIGraphicsBeginImageContextWithOptions(image.size, NO, 0);
    // 2.绘图图片
    // 2.1绘制背景图片
    [image drawAtPoint:CGPointMake(0, 0)];
    
    // 2.3绘制文字水印
    NSString *str = @"
";
    [str drawAtPoint:CGPointMake(150, 50) withAttributes:nil];
    // 3.获得bitmap上下文中绘制好的的图片
    UIImage *newImage =  UIGraphicsGetImageFromCurrentImageContext();
    // 4.将图片写到文件中
    NSString *path = [[NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask, YES) lastObject] stringByAppendingPathComponent:@"aaa.png"];
    NSLog(@"%@", path);
    NSData *data = UIImagePNGRepresentation(newImage);
    [data writeToFile:path atomically:YES];

我们打印文件所在的路径,图片效果如下:


水印文字

图片剪切

我们常常会遇见这样的场景,截取一张图片的一部分上传,作为某个应用的头像。那么这是怎么实现的呢?作为程序员我们最关心什么?代码实现,来吧兄弟们!
在这里我们自定义一个集成UIImage的类以及生成截取之后的头像图片的方法
.h

@interface UIImage (LGJImage)
/**
 *  生成头像
 *  @param icon   头像图片名称
 *  @param border 头像边框大小
 *  @param color  头像边框的颜色
 *  @return 生成好的头像
 */
+ (instancetype)imageWithIcon:(NSString *)icon border:(NSInteger)border color:(UIColor *)color;
@end

.m

#import "UIImage+LGJImage.h"

@implementation UIImage (LGJImage)

+ (instancetype)imageWithIcon:(NSString *)icon border:(NSInteger)border color:(UIColor *)color
{
    UIImage *image = [UIImage imageNamed:icon];// 加载原有图片
    // 上下文
    CGFloat margin = border;
    CGSize size = CGSizeMake(image.size.width + margin, image.size.height + margin);
    // YES 不透明 NO 透明
    UIGraphicsBeginImageContextWithOptions(size, NO, 0);
    // 大圆
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    CGContextAddEllipseInRect(ctx, CGRectMake(0, 0, size.width, size.height));
    [color set];
    CGContextFillPath(ctx);
    // 小圆
    CGFloat smallX = margin * 0.5;
    CGFloat smallY = margin * 0.5;
    CGFloat smallW = image.size.width;
    CGFloat smallH = image.size.height;
    CGContextAddEllipseInRect(ctx, CGRectMake(smallX, smallY, smallW, smallH));
    CGContextClip(ctx);
    [image drawInRect:CGRectMake(smallX, smallY, smallW, smallH)];
    UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
    return newImage;
}
@end

这样一来,我们用的时候就会方便很多了,只需要调用此类方法就能达到截取图片的效果了

- (void)viewDidLoad
{
    [super viewDidLoad];
    UIImage *newImage = [UIImage imageWithIcon:@"Jiange" border:50 color:[UIColor greenColor]];
    self.VVVVVV.image = newImage;
}

如果需要保存的话可以将图片保存:例如

    NSString *path = [[NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask, YES) lastObject] stringByAppendingPathComponent:@"aaa.png"];
    NSLog(@"%@", path);
    NSData *data = UIImagePNGRepresentation(newImage);
    [data writeToFile:path atomically:YES];

条纹背景

条纹背景的绘制相比于以上很类似,步骤都差不多,我们来具体看一下其实现过程

    // 1.平铺图片
    CGSize size = CGSizeMake(self.view.frame.size.width, 44);
    UIGraphicsBeginImageContextWithOptions(size , NO, 0);
    // 2.画矩形
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    CGFloat height = 44;
    CGContextAddRect(ctx, CGRectMake(0, 0, self.view.frame.size.width, height));
    [[UIColor redColor] set];
    CGContextFillPath(ctx);
    // 3.画线条
    CGFloat lineWidth = 2;
    CGFloat lineY = height - lineWidth;
    CGFloat lineX = 0;
    CGContextMoveToPoint(ctx, lineX, lineY);
    CGContextAddLineToPoint(ctx, self.view.frame.size.width, lineY);
    [[UIColor blackColor] set];
    CGContextStrokePath(ctx);
//获取到绘制完成后的小图片
    UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
    UIColor *myColor = [UIColor colorWithPatternImage:image];
    self.XXXXXX.backgroundColor = myColor;

是不是很相似?呵呵 其实一样 只需要粘贴复制之前的代码,稍作改动即可。
好了 时候不早了。我要开始干活了!!!

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

推荐阅读更多精彩内容