iOS开发之绘图(Core Graphics)

在准备画板的时候一定要重写drawRect方法

常用的方法:

  • CGContextRef 上下文
  • 路径
    1 UIBezierPath 贝塞尔路径
    2 通过点绘制一条路径 CGMutablePathRef
    3 注意必须设置一个起始点 CGContextMoveToPoint
  • 画形状
    1 矩形 CGContextAddRect:
    2 曲线 CGContextAddCurveToPoint
    3 圆形 CGContextAddEllipseInRect
  • 截图
    1 开始截图的方法 UIGraphicsBeginImageContextWithOptions
    2 获得当前图片上下文的图片 UIGraphicsGetImageFromCurrentImageContext() -> 从画图的layer上得到的
    3 UIGraphicsEndImageContext 关闭图片上下文
    4 UIGraphicsBeginImageContext开始获得图片上下文
    5 CGContextStrokePath 把路径绘制到上下文
    6 直接把路径绘制到界面 stroke
  • 设置画笔
    1 CGContextSetLineWidth 设置画笔宽度
    2 setFill 设置画线区域范围的填充颜色
    3 CGContextSetStrokeColor 设置画笔颜色
    4 set 设置画笔颜色
    5 设置画笔颜色填充模式
    kCGPathFill, 只填充
    kCGPathStroke,只显示画笔颜色
    kCGPathFillStroke,既填充又有画笔

使用步骤

  • 1 CGContextRef 上下文->画板
  • 2 画图的内容 -> 设置画图的内容
  • 3 把内容添加到上下文(画板)上
  • 4 把内容画到画板上

代码示例

//  Copyright © 2016年 安静SRR. All rights reserved.
//

#import "PaintingView.h"

@interface PaintingView ()
{
    CGContextRef contextRef;

}
@end

@implementation PaintingView
//所有画图的方法 写在drawRect里面
//1、初始化的时候就会调用drawRect方法
//2、调用setNeedsDisplay的时候也会调用drawRect方法

-(void)drawRect:(CGRect)rect{
    [super drawRect:rect];
    [self addRound];
    
}
//画直线
-(void)addLine{

//1、创建画布上下文
//获得当前的上下文当做画布
 CGContextRef context = UIGraphicsGetCurrentContext();
//2、创建画图的内容
    UIBezierPath *path = [UIBezierPath bezierPath];
    /*
     Point 中心点
     x 中心点x
     y 中心点y
     
     y不变 x从小值 - 大值 横向直线
     */
  //2.1设置一个起始点
    [path moveToPoint:CGPointMake(10, 50)];
  //2.2添加其他点
    [path addLineToPoint:CGPointMake(300, 50)];
      [path addLineToPoint:CGPointMake(300, 350)];
    
  //2.3设置画笔宽度
    path.lineWidth = 2;
    
 //2.4设置画笔颜色
    //[[UIColor orangeColor]set];
    //画笔颜色
    [[UIColor whiteColor]setStroke];
    //填充颜色
    [[UIColor purpleColor]setFill];
    
    
//3、把内容《路径》添加到上下文<画布>
    CGContextAddPath(context, path.CGPath);
//4、绘制(渲染)内容到画板(上下文)
  //  CGContextStrokePath(context);
    //设置填充的样式
    CGContextDrawPath(context, kCGPathFillStroke);
    
}
//添加矩形
-(void)addRect{
//1、创建画布
    CGContextRef context = UIGraphicsGetCurrentContext();
//2、设置内容
    CGContextAddRect(context, CGRectMake(10, 10, 100, 100));
    //2.1设置画笔颜色
    [[UIColor orangeColor]setStroke];
    [[UIColor colorWithRed:1.0 green:0.382 blue:0.4795 alpha:1.0]setFill];
    //2.2 设置画笔宽度;
    CGContextSetLineWidth(context, 5);
 //3、渲染内容到画板
  //  CGContextStrokePath(context);
  //   CGContextDrawPath(context, kCGPathFillStroke);
    //把内容直接渲染到画布
    CGContextStrokeRect(context, CGRectMake(10, 10, 100, 100));
}
//添加圆形
-(void)addRound{
    //1、创建画布
     contextRef = UIGraphicsGetCurrentContext();
    //2、内容
    CGContextAddEllipseInRect(contextRef, CGRectMake(20, 20, 100, 100));
    //3、设置画笔颜色
    [[UIColor whiteColor]set];
    //渲染到画布
    CGContextDrawPath(contextRef, kCGPathFillStroke);

}
//画曲线
-(void)addCurve
{
   //1、创建画布
    CGContextRef context = UIGraphicsGetCurrentContext();
    //2、内容
    UIBezierPath *path = [UIBezierPath bezierPath];
    // [ moveToPoint:CGPointMake(10, 100)];
    //绘制曲线
    //  [path addCurveToPoint:CGPointMake(20, 130) controlPoint1:CGPointMake(100, 200) controlPoint2:CGPointMake(300, 100)];
    /**
     *  center 中心点
     *  radius 半径
     *  startAngle 开始的弧度
     *  endAngle 结束的弧度
     *  clockwise 是顺时针 还是逆时针
     */
    [path addArcWithCenter:CGPointMake(200, 200) radius:100 startAngle:M_PI_2 endAngle:M_PI clockwise:YES];
    [[UIColor redColor]setStroke];
    [[UIColor yellowColor]setFill];
    //3、把内容添加到画布上
    CGContextAddPath(context, path.CGPath);
    //4、渲染
    CGContextDrawPath(context, kCGPathFillStroke);

}
//简化画线
-(void)addLine2{
//1、路径
    UIBezierPath *path = [UIBezierPath bezierPath];
    [path moveToPoint:CGPointMake(200, 200)];
    [path addLineToPoint:CGPointMake(200, 500)];
    [[UIColor whiteColor]set];
    
    //2、画出内容
    [path stroke];
 }

//截屏
- (UIImage *)imageFromView
{
   //1、获得图片的画布(上下文)
    //2、画布的上下文
    //3、设置截图的参数 截图
    //4、关闭图片的上下文
    //5、保存
    UIGraphicsBeginImageContext(self.frame.size);
    CGContextRef context = UIGraphicsGetCurrentContext();
    [self.layer renderInContext:context];
    //开始截图
    UIImage *theImage = UIGraphicsGetImageFromCurrentImageContext();
   //关闭截图上下文
    UIGraphicsEndImageContext();
    
    UIImageWriteToSavedPhotosAlbum(theImage,nil,nil,nil); //保存图片到相册
    
    return theImage;
}

@end

备注:代码示例里面包括了画直线、画矩形、画圆形、画曲线、还有保存截图的方法。有兴趣的朋友可以研究一下。
这里面没有添加撤销的方法,在这里把思路说一下:因为画的线是存在数组里面的,可以添加一个响应事件,在这个响应事件里面添加移除数组元素的方法,这样就可以实现划线的撤消了

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

推荐阅读更多精彩内容

  • Core Graphics Framework是一套基于C的API框架,使用了Quartz作为绘图引擎。它提供了低...
    ShanJiJi阅读 1,537评论 0 20
  • Quartz2D 简介 Quartz2D是二维(平面)的绘图引擎(经包装的函数库,方便开发者使用。也就是说苹果帮我...
    iOS_Cqlee阅读 632评论 0 2
  • 目录: 主要绘图框架介绍 CALayer 绘图 贝塞尔曲线-UIBezierPath CALayer子类 补充:i...
    Ryan___阅读 1,675评论 1 9
  • 我们在内购开发中,购买成功后。要把这次交易的凭证发送给服务器。让服务器去验证这次交易是否真实。拿到凭证的代码: 但...
    LANXF阅读 1,503评论 0 1
  • 前几天在得到听了本张爽解读的《深度工作》,讲述了什么是深度工作和浮浅工作,无法深度工作的原因及如何培养深度工作能力...
    林几点阅读 335评论 1 1