iOS Core Graphics绘图

已于 2023-04-06 17:01:08 修改
阅读量897 收藏 2
点赞数 2
分类专栏： iOS 图像动画 文章标签： ios Core Graphics
于 2021-08-23 09:36:39 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chennai1101/article/details/119418578
版权

Core Graphics Framework是一套基于C的API框架，使用了Quartz作为绘图引擎。它提供了低级别、轻量级、高保真度的2D渲染。

上下文

Core Graphics API所有的操作都在上下文中进行。所以在绘图之前需要获取该上下文并传入执行渲染的函数内。有许多方式获得一个上下文

第一种方法就是创建一个图片类型的上下文。

// 获得用来处理图片的图形上下文
UIGraphicsBeginImageContext(rect.size);

// 获取当前上下文
CGContextRef context = UIGraphicsGetCurrentContext();

// 添加一个红色线条矩阵
CGContextSetStrokeColorWithColor(context, [UIColor redColor].CGColor);
CGContextSetLineWidth(context, 5);
CGContextStrokeRect(context, CGRectMake(10, 10, 80, 80));

// 当前上下文中获取一个UIImage对象
UIImage *theImage = UIGraphicsGetImageFromCurrentImageContext();
// 关闭图形上下文
UIGraphicsEndImageContext();

第二种方法是利用一个UIView并实现了自己的drawRect：，当drawRect方法被调用时，UIView的绘图上下文属于当前图形上下文

- (void)drawRect:(CGRect)rect {
    // 获取当前上下文
    CGContextRef context = UIGraphicsGetCurrentContext();

    // 填充白色背景
    CGContextSetFillColorWithColor(context, [UIColor whiteColor].CGColor);
    CGContextFillRect(context, rect);

    // 添加一个蓝色线条矩阵
    CGContextSetStrokeColorWithColor(context, [UIColor blueColor].CGColor);
    CGContextSetLineWidth(context, 5);
    CGContextStrokeRect(context, CGRectMake(10, 10, 80, 80));
}

显示如下
在这里插入图片描述

设置绘图上下文

  • UIGraphicsPushContext(context): 把context压入栈中，并把context设置为当前绘图上下文
  • UIGraphicsPopContext(): 将栈顶的上下文弹出，恢复先前的上下文，但是绘图状态不变
- (void)drawRect:(CGRect)rect {
    [[UIColor redColor] setFill];
    
    UIGraphicsPushContext(UIGraphicsGetCurrentContext());
    [[UIColor blackColor] setFill];
    UIGraphicsPopContext();
    
    UIRectFill(rect); // black color
}

设置绘图状态

  • CGContextSaveGState(context): 保存context的状态
  • CGContextRestoreGState: 恢复保存context的状态
- (void)drawRect:(CGRect)rect {
  [[UIColor redColor] setFill];
  
  CGContextSaveGState(UIGraphicsGetCurrentContext());
  [[UIColor blackColor] setFill];
  CGContextRestoreGState(UIGraphicsGetCurrentContext());
  
  UIRectFill(rect); // red color
}

绘图函数

颜色

// 线条颜色
CGContextSetRGBStrokeColor(CGContextRef cg_nullable c, CGFloat red, CGFloat green, CGFloat blue, CGFloat alpha)
CGContextSetGrayStrokeColor(CGContextRef cg_nullable c, CGFloat gray, CGFloat alpha)
CGContextSetStrokeColorWithColor(CGContextRef cg_nullable c, CGColorRef cg_nullable color)

// 填充颜色
CGContextSetRGBFillColor(CGContextRef cg_nullable c, CGFloat red, CGFloat green, CGFloat blue, CGFloat alpha)
CGContextSetGrayFillColor(CGContextRef cg_nullable c, CGFloat gray, CGFloat alpha)
CGContextSetFillColorWithColor(CGContextRef cg_nullable c, CGColorRef cg_nullable color)

线条样式

// 线条的宽度 
CGContextSetLineWidth(context, 1);
CGContextMoveToPoint(context, 10, 5);
CGContextAddLineToPoint(context, 250, 5);
CGContextStrokePath(context);

CGContextSetLineWidth(context, 3);
CGContextMoveToPoint(context, 10, 15);
CGContextAddLineToPoint(context, 250, 15);
CGContextStrokePath(context);

CGContextSetLineWidth(context, 5);
CGContextMoveToPoint(context, 10, 25);
CGContextAddLineToPoint(context, 250, 25);
CGContextStrokePath(context);

// 线帽，kCGLineCapButt(默认值，无端点)
CGContextMoveToPoint(context, 10, 55);
CGContextAddLineToPoint(context, 250, 55);
CGContextStrokePath(context);

// kCGLineCapRound(圆形)
CGContextSetLineCap(context, kCGLineCapRound);
CGContextMoveToPoint(context, 10, 65);
CGContextAddLineToPoint(context, 250, 65);
CGContextStrokePath(context);

// kCGLineCapSquare(方形)
CGContextSetLineCap(context, kCGLineCapSquare);
CGContextMoveToPoint(context, 10, 75);
CGContextAddLineToPoint(context, 250, 75);
CGContextStrokePath(context);

// 联接点样式，kCGLineJoinMiter(默认值，尖角)
CGContextMoveToPoint(context, 10, 105);
CGContextAddLineToPoint(context, 60, 130);
CGContextAddLineToPoint(context, 10, 155);
CGContextStrokePath(context);

// kCGLineJoinRound(圆角)
CGContextSetLineJoin(context, kCGLineJoinRound);
CGContextMoveToPoint(context, 80, 105);
CGContextAddLineToPoint(context, 130, 130);
CGContextAddLineToPoint(context, 80, 155);
CGContextStrokePath(context);

// kCGLineJoinBevel(缺角)
CGContextSetLineJoin(context, kCGLineJoinBevel);
CGContextMoveToPoint(context, 150, 105);
CGContextAddLineToPoint(context, 200, 130);
CGContextAddLineToPoint(context, 150, 155);
CGContextStrokePath(context);

// 最大斜接长度（只有在使用kCGLineJoinMiter是才有效），边角的角度越小，斜接长度就会越大
// 为了避免斜接长度过长，使用miterLimit限制
// 如果斜接长度超过miterLimit，边角就会以KCALineJoinBevel类型来显示
// CGContextSetMiterLimit(context, 10);

// 虚线样式，phase表示线的偏移量，lengths表示如何交替绘制，count是数组长度
CGFloat lengths[] = {6, 3, 6, 3};

// lengths表示如何交替显示，值是{6, 3, 6, 3}，效果是显示6个点，跳过3个点，再显示6个点，跳过3个点。
CGContextMoveToPoint(context, 10, 185);
CGContextAddLineToPoint(context, 250, 185);
CGContextSetLineDash(context, 0, lengths, 4);
CGContextStrokePath(context);

// phase为偏移量，phase值为5，跳过5个点。
CGContextMoveToPoint(context, 10, 195);
CGContextAddLineToPoint(context, 250, 195);
CGContextSetLineDash(context, 5, lengths, 4);
CGContextStrokePath(context);

// count值是3，效果是显示6个点，跳过3个点，显示6个点，跳过6个点，显示3个点，跳过3个点。
CGContextMoveToPoint(context, 10, 205);
CGContextAddLineToPoint(context, 250, 205);
CGContextSetLineDash(context, 0, lengths, 3);
CGContextStrokePath(context);

显示如下
在这里插入图片描述

路径

// 移至当前点
CGContextMoveToPoint(contex, 10, 10);

// 添加线
CGContextAddLineToPoint(contex, 60, 35);
CGContextAddLineToPoint(contex, 10, 60);
// 关闭当前路径，回到起点
CGContextClosePath(contex);

// 矩阵
CGContextAddRect(contex, CGRectMake(10, 80, 80, 60));

//圆形
CGContextAddEllipseInRect(contex, CGRectMake(20, 160, 60, 60));
// 椭圆
CGContextAddEllipseInRect(contex, CGRectMake(5, 240, 90, 60));

// 描边
CGContextStrokePath(contex);

// 圆弧(x, y)中心点，radiu圆弧半径，startAngle圆弧起点，endAngle圆弧终点，clockwise顺时针0，逆时针1
CGContextAddArc(contex, 50, 350, 30, 0, M_PI_2, 0);
CGContextStrokePath(contex);

[[UIColor blueColor] setStroke];
CGContextAddArc(contex, 50, 350, 30, 0, -M_PI, 1);
CGContextStrokePath(contex);

CGPoint points[] = {CGPointMake(150, 10), CGPointMake(200, 35),
    CGPointMake(200, 35), CGPointMake(150, 60)};
CGContextAddLines(contex, points, 4);
CGContextClosePath(contex);

CGContextAddRect(contex, CGRectMake(150, 80, 80, 60));

CGContextAddEllipseInRect(contex, CGRectMake(160, 160, 60, 60));
CGContextAddEllipseInRect(contex, CGRectMake(145, 240, 90, 60));

CGContextFillPath(contex);

CGContextAddArc(contex, 190, 350, 30, 0, M_PI_2, 0);
CGContextFillPath(contex);

[[UIColor greenColor] setFill];
CGContextAddArc(contex, 190, 350, 30, 0, -M_PI, 1);
CGContextFillPath(contex);

添加路径后，CGContextStrokePath方法绘制线条，CGContextFillPath方法则进行填充操作。
在这里插入图片描述

绘制弧线

CGContextMoveToPoint(contex, 20, 100);
// 绘制弧线    
CGContextAddArcToPoint(contex, 120, 100, 80, 20, 20);

CGContextMoveToPoint(contex, 20, 250);
// 绘制贝赛尔曲线
CGContextAddQuadCurveToPoint(contex, 130, 150, 200, 250);

CGContextMoveToPoint(contex, 20, 350);
// 绘制二次曲线
CGContextAddCurveToPoint(contex, 100, 280, 180, 400, 200, 350);

绘制弧线时，P1是当前路径所在的点，坐标是(x, y)。P1(x, y)和(x1, y1)构成切线，(x1, y1)和(x2, y2)构成切线，r 是上面函数中的radius, 红色的线就是CGContextAddArcToPoint绘制的曲线. 它不会画到 (x2, y2)这个点， 绘制到圆弧的终点就会停止.
贝赛尔曲线，(cpx, cpy)是控制点，(x, y)是终点，详见必须要理解掌握的贝塞尔曲线（原创）
在这里插入图片描述

其他

CGContextSetLineWidth(contex, 5);

CGPoint points[] = {CGPointMake(10, 10), CGPointMake(100, 50),
    CGPointMake(100, 50), CGPointMake(10, 90)};
    
// 绘制直线，0 -> 1, 2 -> 3
CGContextStrokeLineSegments(contex, points, 4);

// 绘制矩阵线条
CGContextStrokeRect(contex, CGRectMake(10, 110, 80, 60));

// 绘制矩阵线条，指定线条宽度
CGContextStrokeRectWithWidth(contex, CGRectMake(120, 110, 80, 60), 1);

// 填充矩阵
CGContextFillRect(contex, CGRectMake(10, 190, 80, 60));

CGRect rects[] = {CGRectMake(10, 270, 80, 60), CGRectMake(120, 270, 60, 60)};
// 填充多个矩阵
CGContextFillRects(contex, rects, 2);

// 绘制椭圆线条
CGContextStrokeEllipseInRect(contex, CGRectMake(10, 350, 80, 60));

// 填充椭圆
CGContextFillEllipseInRect(contex, CGRectMake(120, 350, 80, 60));

显示如下
在这里插入图片描述

相关文章
iOS Core Graphics绘图
iOS UIBezierPath绘图

假装你是大灰狼
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
iOS CoreGraphics绘图
01-04
本教程将带你从基础入门到深入研究iOS Core Graphics绘图。 1. **基本概念** - **CGContext**: CGContext是Core Graphics的核心，它是绘制的所有上下文。你可以将其理解为一个画布，所有的绘图操作都在这个画布上...
基于Core Graphics框架
04-05
《基于Core Graphics框架的iOS本地动态验证码实现》 在iOS应用开发中，验证码是一种常见的安全机制，用于验证用户的身份或防止自动化的恶意操作。本文将深入探讨如何利用Core Graphics框架来创建一个本地动态验证码...
利用CoreGraphics画小黄人
06-10
在iOS和macOS开发中，Core Graphics是一个强大的图形绘制框架，用于低级的2D图形渲染。本项目“利用CoreGraphics画小黄人”旨在教你如何通过编程方式使用Core Graphics来绘制可爱的小黄人形象。这个教程对于理解Core...
CoreGraphics：CoreGraphics
02-20
CoreGraphics是苹果操作系统中的一个低级图形框架，用于在iOS和macOS上创建和操作2D图形。这个框架是Objective-C和Swift编程语言的核心部分，提供了丰富的功能来绘制图形、处理图像以及进行复杂的矢量图形操作。在...
iOS AVPlayer和AVPlayerViewController
热门推荐
假装你是大灰狼的专栏
08-18 1万+
1. AVPlayer AVPlayer是iOS常见的播放器，使用时需导入 #import <AVKit/AVKit.h> AVPlayer能控制播放器的播放，暂停，播放速度 // 初始化 + (instancetype)playerWithURL:(NSURL *)URL; + (instancetype)playerWithPlayerItem:(nullable AVPlayerItem *)item; - (instancetype)initWithURL:(NSURL *)URL;
iOS 图像选取器UIImagePickerController
假装你是大灰狼的专栏
08-19 2760
UIImagePickerController可以帮助我们调用摄像头拍照或者希望从相册中选择照片。 UIImagePickerController主要属性 // 图片获取来源 @property(nonatomic) UIImagePickerControllerSourceType sourceType; // 拍完照或相册选择图片后，是否允许编辑图像 @property(nonatomic) BOOL allowsEditing; // 媒体类型，public.image和public.movie，默认
iOS AVAudioPlayer简介
假装你是大灰狼的专栏
02-07 2457
1. AVAudioPlayer AVAudioPlayer在AVFoundation框架下，AVAudioPlayer类封装了播放单个声音的能力。播放器可以用NSURL或者NSData来初始化，要注意的是NSURL必须是本地文件URL，因为AVAudioPlayer不具备播放网络音频的能力。 - (nullable instancetype)initWithContentsOfURL:(NSURL *)url error:(NSError **)outError; - (nullable instance
iOS UIView Animation动画
假装你是大灰狼的专栏
05-11 1873
1. UIView属性动画 常用方法animateWithDuration duration，动画时间 delay，动画在延迟多久之后执行 options，动画的展示方式 animations，动画代码 completion，动画完成后代码 // 动画时间，，options，completion + (void)animateWithDuration:(NSTimeInterval)duration delay:(NSTimeInterval)delay options:(UIViewAnim
iOS 保存图片和视频
假装你是大灰狼的专栏
08-19 1720
保存图片 使用UIImageWriteToSavedPhotosAlbum方法保存图片到相册 - (void)saveImage:(UIImage *)image { UIImageWriteToSavedPhotosAlbum(image, self, @selector(UIImageWriteToSavedPhotosAlbum_image:didFinishSavingWithError:contextInfo:), nil); } - (void)UIImageWr
iOS YBImageBrowser简介
假装你是大灰狼的专栏
03-30 1348
是一个 iOS 图片浏览器，支持 GIF，APNG，WebP 等本地和网络图像类型。在Podfile中安装导入。
iOS UIColor简介
假装你是大灰狼的专栏
11-17 1326
1. UIColor初始化 由白色透明度创建 + (UIColor *)colorWithWhite:(CGFloat)white alpha:(CGFloat)alpha; 由三原色创建 + (UIColor *)colorWithRed:(CGFloat)red green:(CGFloat)green blue:(CGFloat)blue alpha:(CGFloat)alpha; 由图片创建 + (UIColor *)colorWithPatternImage:(UIImage *)image
iOS CAEmitterLayer动画
假装你是大灰狼的专栏
02-15 1273
1. CAEmitterLayer CAEmitterLayer是一个高性能的粒子引擎，被用来创建复杂的粒子发射动画，而所谓的粒子就是CAEmitterCell。可以把CAEmitterLayer看做CAEmitterCell的容器，CAEmitterCell可以进行个性化定制。 CAEmitterLayer主要属性 // 粒子数组 @property(nullable, copy) NSArray<CAEmitterCell *> *emitterCells; // 发射源中心点位置，默认是
iOS CGAffineTransform仿射变换
假装你是大灰狼的专栏
05-10 1175
1. CGAffineTransform定义 CGAffineTransform是个结构体，我们可以使界面平移、缩放和旋转操作。 struct CGAffineTransform { CGFloat a, b, c, d; CGFloat tx, ty; }; 2. 放射变换 2.1 平移 tx和ty分别代表X轴和Y轴方向上的位移。 CGAffineTransform CGAffineTransformMakeTranslation(CGFloat tx, CGFloat ty) CGA
iOS CAShapeLayer和CAGradientLayer
假装你是大灰狼的专栏
08-24 1154
CAShapeLayer CAShapeLayer继承自CALayer的，通过矢量图形绘制图层子类，指定诸如颜色和线宽等属性，用CGPath来绘制图形，常与UIBezierPath配合使用。 CAShapeLayer主要属性 属性 类型 说明 path CGPathRef 路径 fillColor CGColorRef 填充颜色 strokeColor CGColorRef 线条颜色 lineWidth CGFloat 线条宽度 strokeStart CGFloat 路径绘
iOS AVAudioRecorder简介
最新发布
假装你是大灰狼的专栏
10-10 946
的主要属性的主要方法录制后将音频保存到本地文件中。
iOS UIBezierPath绘图
假装你是大灰狼的专栏
08-23 733
UIBezierPath主要用来绘制矢量图形，它是基于Core Graphics对CGPathRef数据类型和path绘图属性的一个封装。 主要属性 @property(nonatomic) CGFloat lineWidth; @property(nonatomic) CGLineCap lineCapStyle; @property(nonatomic) CGLineJoin lineJoinStyle; ...
iOS SDWebImage缓存图片
假装你是大灰狼的专栏
03-30 518
在实际项目中，我们从服务上下载图片，但需要进行转码才能使用，并存储到disk或memory上。是支持HTTPS的，但有时获取https网络图片失效，此时可设置。的结构和用法，在这一篇中，我们将利用。
iOS7 Core Graphics框架详解
"该资源是关于iOS7的Core Graphics框架的官方文档，主要涵盖各种图形处理的核心函数、数据类型和常量。文档包括了CGBitmapContext、CGColor、CGColorSpace、CGContext、CGDataConsumer、CGDataProvider、CGFont、...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值