iOS之QuartZ 2D 绘图（一）

最新推荐文章于 2021-11-10 11:58:38 发布
最新推荐文章于 2021-11-10 11:58:38 发布
阅读量294 收藏
点赞数
分类专栏： IOS 文章标签： iOS之QuartZ 2D 绘图 UIBezierPath 文本高度计算 下载进度
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chase20150628/article/details/90411214
版权

Quartz2D

  • Quartz2D是苹果封装的一个库,针对iOS和os系统绘制不同的类型的制图方式
  • 图形上下文(一种数据类型,类似int,double)数据类型(CGContextRef)
  • 不同的上下文(数据类型)可以绘制不同的类型(pdf,bitmap,layer,window,ptinter)
  • 进而上面5中类型,对应不同的上下文

1. 绘制简单图形 -> 画线

  • 在自定义的View我们可以通知drawRect:方法绘制,自己想要的线条
  • 苹果内部已经创建了一个layer与View上下文关联在这里插入图片描述
/控制器View将要显示的时候调用
//-(void)viewWillAppear:(BOOL)animated 方法之后调用
- (void)drawRect:(CGRect)rect {
    
    //1.获取上下文
    CGContextRef contextRef = UIGraphicsGetCurrentContext();
    //2.创建线
    UIBezierPath *path = [UIBezierPath bezierPath];
    //设置起点
    [path moveToPoint:CGPointMake(50, 200)];
    
    //终点
    [path addLineToPoint:CGPointMake(300, 30)];
    
    //如果在添加线的时候 默认是从终点当做另一条线的起点
    [path addLineToPoint:CGPointMake(300, 250)];
    
    //设置颜色
    [[UIColor blackColor] set];
    //设置线宽
    CGContextSetLineWidth(contextRef, 5.0f);
    //设置链接点的 角度 枚举值
    /*
     kCGLineJoinMiter,
     kCGLineJoinRound,
     kCGLineJoinBevel
     */
    CGContextSetLineJoin(contextRef, kCGLineJoinRound);
    
    //CGContextSetBlendMode(contextRef, kCGBlendModeScreen);
    
    //3.绘制
    //UIBezierPath 是UIKit矿建,需要转化
    CGContextAddPath(contextRef, path.CGPath);
    
    //4.渲染到View上
    CGContextStrokePath(contextRef);
    
}

2.贝塞尔曲线UIBezierPath

  • 苹果封装的一个可快速创建绘制图形的类
  • 其内部也是要实现:
    • 1.获取上下文
    • 2.描述路径
    • 3.把路径添加到上下文
    • 4.渲染上下文
- (void)drawRect:(CGRect)rect {
    
    //创建路径
    UIBezierPath *path = [UIBezierPath bezierPath];
    //设置起点
    
    [path moveToPoint:CGPointMake(50, 50)];
    
    //设置终点
    
    [path addLineToPoint:CGPointMake(300, 300)];
    
    //绘制 描边
    [path stroke];
    //1.获取上下文
    //2.描述路径
    //3.把路径添加到上下文
    //4.渲染上下文
    
    
}

2.1UIBezierPath常用的类方法

2.1.1 bezierPathWithRect: 绘制简单的图形:矩形,长方形
- (void)drawRect:(CGRect)rect {
    
    //创建路径
    UIBezierPath *path = [UIBezierPath bezierPathWithRect:CGRectMake(50, 50, 200, 200)];
    //描边
    [path stroke];
    
    
}

在这里插入图片描述

2.1.2bezierPathWithRoundedRect: cornerRadius:

参数一:要绘制的图形点 参数二:是圆角半径,当圆角半径等于一半就是圆(宽度和高度相等的情况下)

- (void)drawRect:(CGRect)rect {
    
    //创建路径
    UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(50, 50, 200, 100) cornerRadius:50];
    path.lineWidth = 10.f;
    
    [path stroke];
    
    
}

在这里插入图片描述

2.1.3 绘制圆弧
+ (instancetype)bezierPathWithArcCenter:(CGPoint)center
radius:(CGFloat)radius 
startAngle:(CGFloat)startAngle 
endAngle:(CGFloat)endAngle 
clockwise:(BOOL)clockwise
参数一: 圆心
参数二: 半径
参数三: 开始的角度
参数四: 结束的角度
参数五; 绘制的方向 (顺时针还是逆时针)


   //创建路径
    UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:self.center radius:50 startAngle:M_PI endAngle:0 clockwise:YES];
    path.lineWidth = 10.f;
    [[UIColor redColor] set];
    [path stroke];
    // 起点是0 
    //顺时针正
    //逆时针负

在这里插入图片描述

2.1.4 UIBezierPath二阶曲线

参数一:终点
参数二: 控制点
- (void)addQuadCurveToPoint:(CGPoint)endPoint controlPoint:(CGPoint)controlPoint;

- (void)drawRect:(CGRect)rect {
    
  //创建路径
    UIBezierPath *path = [UIBezierPath bezierPath];
    //设置起点
    [path moveToPoint:CGPointMake(50, 200)];
    //设置终点和控制点
    [path addQuadCurveToPoint:CGPointMake(200, 50) controlPoint:CGPointMake(20, 20)];
    //设置颜色
    [[UIColor redColor] set];
    //描边
    [path stroke];
    
}

Alt

2.1.5UIBezierPath三阶曲线
- (void)drawRect:(CGRect)rect {
    
    UIBezierPath *path = [UIBezierPath bezierPath];
    
    [path moveToPoint:CGPointMake(50, 200)];

    [path addCurveToPoint:CGPointMake(270, 80) controlPoint1:CGPointMake(50, 80) controlPoint2:CGPointMake(200, 200)];
    
    [[UIColor redColor] set];
    
    [path stroke];
    

    
}

在这里插入图片描述

下载进度的绘制 小demo

  • 可用于 图片的展示(下载进度)
    在这里插入图片描述

#import "CCDownloadProgressView.h"


@interface CCDownloadProgressView ()

@property (nonatomic, weak) UILabel *progressLabel;


@end


@implementation CCDownloadProgressView

- (instancetype)initWithFrame:(CGRect)frame {
    if (self = [super initWithFrame:frame]) {
        
    }
    
    return self;
}


- (void)awakeFromNib{
    [super awakeFromNib];
    
}

//界面显示的时候调用
//核心代码
- (void)drawRect:(CGRect)rect {
    
    //获取上下文
//    CGContextRef ref = UIGraphicsGetCurrentContext();
    
    //绘制路径
    CGFloat width = rect.size.width *0.5;
    CGFloat height = rect.size.height *0.5;
    CGPoint center = CGPointMake(width, height);
    CGFloat endAng = 2 *M_PI *self.progress + (-M_PI_2);
    
    UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:center radius:width - 10 startAngle:-M_PI_2 endAngle:endAng clockwise:YES];
    //设置颜色
    [self.circleColor set];
    //把路径
    [path stroke];
    
}


- (void)setProgress:(CGFloat)progress {
    _progress = progress;
    
    self.progressLabel.text = [NSString stringWithFormat:@"%.1f%%",progress *100];
    //重新绘制
    [self setNeedsDisplay];
}

- (void)setCircleColor:(UIColor *)circleColor{
    _circleColor = circleColor;
    self.progressLabel.textColor = circleColor;
}


- (void)layoutSubviews {
    [super layoutSubviews];
    
    self.progressLabel.frame = self.bounds;
}


- (UILabel *)progressLabel {
    if (!_progressLabel) {
        
        UILabel *contenLabel = [[UILabel alloc] init];
        contenLabel.textAlignment = NSTextAlignmentCenter;
        [self addSubview:contenLabel];
        self.progressLabel = contenLabel;
        
    }
    
    return _progressLabel;
}

@end

3. 绘制文字

方法一

- (void)drawAtPoint:(CGPoint)point withAttributes:(nullable NSDictionary<NSAttributedStringKey, id> *)attrs
缺点:
这个方法 绘制出来的文字不能换行

//绘制文字
- (void)drawRect:(CGRect)rect {
    
    NSString *text = @"这是一个文字的g绘制效果";
    
    //设置 字体的属性
    NSDictionary *att = @{
                          NSFontAttributeName:[UIFont systemFontOfSize:20],
                          NSForegroundColorAttributeName:[UIColor redColor]
                          
                          };
    
    [text drawAtPoint:CGPointZero withAttributes:att];
   
  
}

在这里插入图片描述

方法二
//绘制文字
- (void)drawRect:(CGRect)rect {
    
    NSString *text = @"这是一个文字的g绘制效果,这是一个文字的g绘制效果,这是一个文字的g绘制效果,这是一个文字的g绘制效果,这是一个文字的g绘制效果,这是一个文字的g绘制效果";
    
    NSDictionary *att = @{
                          NSFontAttributeName:[UIFont systemFontOfSize:20],
                          NSForegroundColorAttributeName:[UIColor redColor]
                          
                          };
    [text drawInRect:CGRectMake(0, 0, 300, 300) withAttributes:att];
   
    
}

在这里插入图片描述

方法三

- (void)drawWithRect:(CGRect)rect options:(NSStringDrawingOptions)options attributes:(nullable NSDictionary<NSAttributedStringKey, id> *)attributes context:(nullable NSStringDrawingContext *)context
这个方法，可以根据字体的多少，来计算高度
类似我们经常使用 计算 文本高度的方法

- (CGRect)boundingRectWithSize:(CGSize)size options:(NSStringDrawingOptions)options attributes:(nullable NSDictionary<NSAttributedStringKey, id> *)attributes context:(nullable NSStringDrawingContext *)context


//绘制文字
- (void)drawRect:(CGRect)rect {
    
    NSString *text = @"这是计算文字高度的方法，到了位于赣州市区的江西金力永磁科技股份有限公司，下午的行程则集中在了赣州于都县。哈哈哈，测试一下看看看行不行";
    
    NSDictionary *att = @{
                          NSFontAttributeName:[UIFont systemFontOfSize:20],
                          NSForegroundColorAttributeName:[UIColor redColor]
                          
                          };
    
    
    //设置宽度是300， 告诉是 无线大
    CGSize textSize = CGSizeMake(300, MAXFLOAT);
    
    [text drawWithRect:CGRectMake(0, 0, textSize.width, textSize.height) options:NSStringDrawingUsesLineFragmentOrigin attributes:att context:nil];
   
    
}
补充：计算文本高度的方法
方式一
  • boundingRectWithSize:options:attributes:方法,适用于换行的情况,也适用于不换行的情况,为了兼容两者的方法
   //文本内容
       CGSize chatContentSize = [self sizeWithText:text WithMaxSize:CGSizeMake(cellMaxw, MAXFLOAT) fontSize:contentTextFont];
//计算字体宽高

- (CGSize)sizeWithText:(NSString *)text WithMaxSize:(CGSize)maxSize fontSize:(CGFloat)fontSize
{
    
    return [text boundingRectWithSize:maxSize options:NSStringDrawingUsesLineFragmentOrigin attributes:@{NSFontAttributeName:[UIFont systemFontOfSize:fontSize]} context:nil].size;
}
方式二
  • sizeWithAttributes:计算文本宽度和高度，不会自动换行

    NSString *text = @"计算稿。计算高度，哈哈哈，啦啦啦啦啦，他是放下了，才说出来，我是不是也该放下了，直到今日才明白我一个人自以为刻骨铭心的回忆，他也许早就忘怀，他的短篇小说故事中我没有丝言片语，也许若干年后他回想起来的只是我的名字，我只是个戏子，在他的故事中流着自己的泪，一个于他青春年华中不曾使他掀起过一丝波澜的模糊影子";
    
    NSDictionary *att = @{
                          NSFontAttributeName:[UIFont systemFontOfSize:20],
                          NSForegroundColorAttributeName:[UIColor redColor]
                          
                          };
    
  
    CGSize textSize = [text sizeWithAttributes:att];
    //打印高度
   NSLog(@"%@",NSStringFromCGSize(textSize));

图形上下文的状态栈

在这里插入图片描述

在这里插入图片描述

  • //保存系统的上下文到 上下文栈中 CGContextSaveGState(ref);

  • //从上下文栈中 获取保存的状态 CGContextRestoreGState(ref);


- (void)drawRect:(CGRect)rect {

    
    //获取图形上下文
    CGContextRef ref = UIGraphicsGetCurrentContext();
    
    UIBezierPath *path = [UIBezierPath bezierPath];
    
    [path moveToPoint:CGPointMake(50, 100)];
    [path addLineToPoint:CGPointMake(240, 100)];
    
    //保存系统的上下文到 上下文栈中
    CGContextSaveGState(ref);
    //设置状态
    [[UIColor redColor] set];
    path.lineWidth = 5;
    //添加路径
    CGContextAddPath(ref, path.CGPath);
    //绘制渲染
    CGContextStrokePath(ref);
    
    //创建路径2
    UIBezierPath *path2 = [UIBezierPath bezierPath];
    
    [path2 moveToPoint:CGPointMake(190, 50)];
    [path2 addLineToPoint:CGPointMake(190, 200)];
    
    //从上下文栈中 获取保存的状态
    CGContextRestoreGState(ref);

    //添加路径
    CGContextAddPath(ref, path2.CGPath);
    //绘制渲染
    CGContextStrokePath(ref);
    
}
chase_cc
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ios Quartz 2D编程指南
08-20
ios Quartz 2D编程指南 2d图形处理
BezierPath精讲
Asong_ge的博客
03-19 1253
今天笔者要说是iOS中bezierPath,他是可以创建基于矢量的路径(矢量：就是带有方向曲线)，此类事Core Graphics框架关于路径的封装，通过此类，可以绘制你想要的图形或者曲线。 首先学此篇文章会需要一点点的数学的几何基础，不过没有也没有关系，因为有笔者在此。 温馨提示一下：下面笔者写的方法都是在 -(void)drawRect:(CGRect)rect;方法里执行，可能有的同学会
html canvas drawrect 变形,flutter - Canvas.drawRect() with Rect.fromLTRB() not working - Stack Overflo...
weixin_36462845的博客
06-10 250
In my flutter app, I tried to use CustomPainter, to draw custom shapes.Here, I want to draw 4 small squares, in different colors, in a bigger square (here in yellow).I expected to see the 4 squares, b...
UIBezierPath精讲
weixin_34384915的博客
12-03 179
学习UIBezierPath画图 笔者在写本篇文章之前，也没有系统学习过贝塞尔曲线，只是曾经某一次的需求需要使用到，才临时百度看了一看而且使用最基本的功能。现在总算有时间停下来好好研究研究这个神奇而伟大的贝塞尔先生！ 笔者在学习时，首先看了两遍UIBezierPath类头文件定义，熟悉了一下相关的属性和方法。 支持...
SwiftUI：如何使用Path API绘制扑克牌阴影？
互动教程网[www.hdjc8.com]
03-04 346
在SwiftUI中，可以使用“路径”和“形状”实现自定义渲染。 可以通过路径创建形状。 这使“路径”成为基本的绘图元素。 在本教程中，我们将使用Path来创建不同色调的扑克牌。 Path的使用参见《SwiftUI从入门到实战》第2章的第25节：通过Path路径绘制不规则的线条和图形。 首先，让我们学习可以绘制的路径类型。 Line追加一条直线 func addLine(to point: CGPoint) Arc相对于中心附加弧线。 需要角度，半径，中心点和方向。 func addAr...
IOS开发（108）之Quartz 2D绘图实例演示
Developer_Zhang的专栏
06-09 3080
1 前言 本节将用一个简单的项目介绍如何用Quartz 2D绘制直线，矩形，椭圆和移动UIImage图片，通过触摸屏幕触发事件来决定起点和终点，废话多说，让我们来看看其是如何实现的。 2 详述 这个例子我们要创建一个类别，用于处理随即颜色的： UIColor (ZYRandom) #import "UIColor+ZYRandom.h" @implementation UIColo
iOS - Quartz 2D 二维绘图
rstbfveradsvc
09-17 210
&#13; 1、Quartz 2D 简介 Quartz 2D 属于 Core Graphics（所以大多数相关方法的都是以 CG 开头），是 iOS/Mac OSX 提供的在内核之上的强大的 2D 绘图引擎，并且这个绘图引擎是设备无关的。也就是说，不用关心设备的大小，设备的分辨率，只要利用 Quartz 2D，这些设备相关的会自动处理。 1、Quartz 2D 在 iOS ...
iOS开发之quartz 2d绘图基础
u011200206的专栏
03-10 279
一、Quartz2D的简介 1⃣️Quart2D是CoreGraphic的一部分，基于C的API －图形的上下文（Graphics Context） 数据类型，封装了Quartz绘制图像到输出设备的信息 －Quartz 2D坐标系 －绘图顺序 －绘图方法 2⃣️内存管理 当出现Create、copy、retain时必须释放 二、简单使用
Quartz2D(1)
BJunZhou的博客
09-28 217
01-基本介绍 02-基本线条绘制 03-下载进条. 04-画饼图 05-UIKit绘图演练 06-模仿系统的UIImageView 07-定时器,雪花 08-图形上下文状态栈 09-上下文的矩阵操作 10.给图片添加水印. 11-简单圆形图片裁剪
ios-Quartz 2D
rv0p111
07-30 339
Quartz 2D 是一个二维的绘图引擎，同时支持ios和Mac OS X系统是跨平台的，纯C语言写的，包含在Core Graphics框架中。Quartz 可以绘制图形:线条\三角形\矩形\圆\弧等它也可以绘制文字，就比如说你微博发出去的图片会有个水印，其实就是绘制了文字。也可以绘制\生成图片读取\生成PDF截图\裁剪图片自定义UI控件Quartz 2D 的API都是纯C语言的数据类型和函数基本...
iOS开发中使用Quartz2D绘图及自定义UIImageView控件
09-03
主要介绍了iOS开发中使用Quartz2D绘图及自定义UIImageView控件的方法,代码基于传统的Objective-C,需要的朋友可以参考下
iOS开发之Quartz2D的介绍与使用详解
08-31
什么是Quartz2D？Quartz 2D是一个二维绘图引擎，同时支持iOS和Mac系统。下面这篇文章主要介绍了iOS开发之Quartz2D的介绍与使用的相关资料,需要的朋友可以参考下
iOS开发中Quartz2D绘图路径的使用以及条纹效果的实现
09-03
主要介绍了iOS开发中Quartz2D绘图路径的使用以及条纹效果的实现,代码基于传统的Objective-C,需要的朋友可以参考下
IOS开发之UI进阶（Quartz2D图形上下文）
weixin_46926959的博客
11-10 2769
Quartz2D Quartz2D是一个二维绘图引擎，同时支持IOS和Mac OS X系统（跨平台，纯C语言），包括在CoreGraphics框架中 绘制图形、文字，生成图片 读取/生成PDF 截图/裁剪图片 自定义UI控件 数据类型以CG作为前缀 UIKit框架 对部分Quartz2D的API做封装 没有封装的只能调用原生的 比如：画图片、文字到控件上（UIKit已经封装好了） Cocos2D Cocos20-x、 Cocos20-iPhone、 Cocos2D-HTML5等 Cocos2D
ios基础篇（五）—— Quartz2D
努力进阶的小菜鸟
10-14 594
一、Quartz2D Quartz 2D是一个二维绘图引擎，同时支持iOS和Mac OS X系统（跨平台，纯 C 语言的）。包含在 Core Graphics 框架中。 Quartz 2D能完成的工作 绘制图形 : 线条\三角形\矩形\圆\弧等 绘制文字 微博图片上的水印 绘制\生成图片(图像) 读取\生成PDF 截图\裁剪图片 方型图片->圆型 四个角是透明的 自定义UI控件 注意: Quartz2D 是苹果官方的二维绘图引擎，同时支持 iOS 和 Mac OS X 系统。 Co
IOS 之 Quartz 2D 绘图（上）
黄飞的博客专栏
09-10 919
Quartz 2D 是一个二维绘图引擎，同时支持 iOS 和 Mac 系统。其 API 采用 C 语言编写，来自 Core Graphics 框架，主要作用是绘图，可以绘制三角形、四边形、图片和文字等。下面就 Quartz 2D 的相关概念做简要解释并以实例分析。1.图形上下文（Graphics Context） 所谓Graphics Context，其实就是表示了一个绘制目标，也就是你打算绘制的
iOS Quartz 2D绘图
weixin_46642112的博客
04-29 175
无论使用哪种绘图技术，都离不开UIView，绘制都发生在UIView对象的区域内。如果是默认视图，绘制工作是由iOS系统自动处理的；如果是自定义视图，则必须重写drawRect:方法，在此提供相应的绘制代码。 1、drawRect:方法 想要绘图就要重写drawRect:方法。另外慧慧使用到setNeedsDisplay:和setNeedsDisplayInRect:方法。 两个方法用于设置视图或...
iOS-Quartz2D画图
极客学伟的技术分享社区
07-14 2947
常说温故而知新,时隔这么久再次看这些基础内容仍然很兴奋!把敲的代码分享出来,希望能对读者提供一丁点启发/** * 裁剪圆形图片 */ -(void)circleIcon{ UIImage *image = [UIImage imageNamed:@"baby"]; UIGraphicsBeginImageContext(image.size); UIBezierPath
iOS之AFN框架的使用(文件下载和上传)
chase的博客
06-13 6038
AFN 我们在日常开发中，经常使用到网络请求，之前已经简单的说过，网络的概念和请求数据和下载文件 但是在日常开发中，我们一般会使用到 AFNetworking这个框架，请求数据，上传数据，下载数据文件 简单的get和post数据请求 get AFHTTPSessionManager *manager = [AFHTTPSessionManager manager]; /* ...
java 定时器 Quartz 用法之一 程序直接启动
最新发布
05-17
Quartz 是一个开源的作业调度框架，可以用来实现定时任务。关于Quartz的使用，可以分为以下几个方面： 1. 引入 Quartz 依赖 在 Maven 项目中，可以在 pom.xml 文件中加入以下依赖： ```xml <groupId>org.quartz...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值