Quart2D的基本介绍

我就是我 2021-12-17 09:15 223阅读 0赞

![813669-20160202140131288-1813879973.png][]

● drawRect:⽅方法的使⽤用  
● 常见图形的绘制:线条、多边形、圆

● 绘图状态的设置:⽂文字颜⾊色、线宽等

● 图形上下⽂文状态的保存与恢复  
● 图形上下⽂文栈

什么是Quartz2D

*  ● Quartz 2D是⼀一个⼆二维绘图引擎,同时⽀支持iOS和Mac系统
 *  ● Quartz 2D能完成的⼯工作

*  ➢ 绘制图形 : 线条\\三⾓角形\\矩形\\圆\\弧等
 *  ➢ 绘制⽂文字
 *  ➢ 绘制\\⽣生成图⽚片(图像)
 *  ➢ 读取\\⽣生成PDF
 *  ➢ 截图\\裁剪图⽚片
 *  ➢ ⾃自定义UI控件 ➢......
 *  Quartz2D实例
    
    ● Quartz 2D能做很多强⼤大的事情,例如
    
    ➢ 裁剪图⽚
    
    ![813669-20160202140511366-575700999.png][]
    
    ![813669-20160202140543819-820269406.png][]
    
    ![813669-20160202140611929-1742281902.png][]
    
    Quartz2D在iOS开发中的价值
    
    ● 为了便于搭建美观的UI界⾯面,iOS提供了UIKit框架,⾥里⾯面有各种各样的UI控件 ➢ UILabel:显⽰示⽂文字  
    ➢ UIImageView:显⽰示图⽚片  
    ➢ UIButton:同时显⽰示图⽚片和⽂文字(能点击)
    
    ➢......
    
    ● 利⽤用UIKit框架提供的控件,拼拼凑凑,能搭建和现实⼀一些简单、常见的UI界⾯面
    
    ● 但是,有些UI界⾯面极其复杂、⽽而且⽐比较个性化,⽤用普通的UI控件⽆无法实现,这时可以利 ⽤用Quartz2D技术将控件内部的结构画出来,⾃自定义控件的样⼦子
    
    ● 其实,iOS中⼤大部分控件的内容都是通过Quartz2D画出来的  
    ● 因此,Quartz2D在iOS开发中很重要的⼀一个价值是:⾃自定义view(⾃自定义UI控件)
    
    图形上下⽂
    
    ● 图形上下⽂文(Graphics Context):是⼀一个CGContextRef类型的数据
    
    ● 图形上下⽂文的作⽤用  
    ➢ 保存绘图信息、绘图状态  
    ➢ 决定绘制的输出⽬目标(绘制到什么地⽅方去?) (输出⽬目标可以是PDF⽂文件、Bitmap或者显⽰示器的窗⼜⼝口上)
    
    ![813669-20160202140844554-398857226.png][]
    
    ● 相同的⼀一套绘图序列,指定不同的Graphics Context,就可将相同的图像绘制到不同的 ⽬目标上
    
    ![813669-20160202141015116-1730982559.png][]
    
    ⾃自定义view
    
    ● 如何利⽤用Quartz2D⾃自定义view?(⾃自定义UI控件)
    
    ● 如何利⽤用Quartz2D绘制东西到view上?  
    ➢ ⾸首先,得有图形上下⽂文,因为它能保存绘图信息,并且决定着绘制到什么地⽅方去 ➢ 其次,那个图形上下⽂文必须跟view相关联,才能将内容绘制到view上⾯面
    
    ● ⾃自定义view的步骤  
    ➢ 新建⼀一个类,继承⾃自UIView  
    ➢ 实现-(void)drawRect:(CGRect)rect⽅方法,然后在这个⽅方法中 ● 取得跟当前view相关联的图形上下⽂文  
    ● 绘制相应的图形内容  
    ● 利⽤用图形上下⽂文将绘制的所有内容渲染显⽰示到view上⾯面
    
    drawRect:
    
    ● 为什么要实现drawRect:⽅方法才能绘图到view上?  
    ➢ 因为在drawRect:⽅方法中才能取得跟view相关联的图形上下⽂文
    
    ● drawRect:⽅方法在什么时候被调⽤用?  
    ➢ 当view第⼀一次显⽰示到屏幕上时(被加到UIWindow上显⽰示出来) ➢ 调⽤用view的setNeedsDisplay或者setNeedsDisplayInRect:时
    
    Quartz2D须知
    
    ● Quartz2D的API是纯C语⾔言的  
    ● Quartz2D的API来⾃自于Core Graphics框架
    
    ![813669-20160202141316382-1679543406.png][]
    
    在iOS 一个c语言的绘图框架（CoreGraphics.framwork）
    
    framework导入，在xcode5以后，所以以.framework命名的框架，就不用导入
    
    ● 数据类型和函数基本都以CG作为前缀 ➢ CGContextRef  
    ➢ CGPathRef  
    ➢ CGContextStrokePath(ctx);
    
    ➢ ......
    
    drawRect:中取得的上下⽂文
    
    ● 在drawRect:⽅方法中取得上下⽂文后,就可以绘制东西到view上  
    ● View内部有个layer(图层)属性,drawRect:⽅方法中取得的是⼀一个Layer
    
    Graphics Context,因此,绘制的东西其实是绘制到view的layer上去了
    
    ● View之所以能显⽰示东西,完全是因为它内部的layer
    
    Quartz2D绘图的代码步骤
    
    1. 获得图形上下⽂文  
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    
    2. 拼接路径(下⾯面代码是搞⼀一条线段)
    
    CGContextMoveToPoint(ctx, 10, 10);
    
    CGContextAddLineToPoint(ctx, 100, 100);
    
    3. 绘制路径  
    CGContextStrokePath(ctx); // CGContextFillPath(ctx);
    
    常⽤用拼接路径函数
    
    ● 新建⼀一个起点  
    void CGContextMoveToPoint(CGContextRef c, CGFloat x, CGFloat y)
    
    ● 添加新的线段到某个点  
    void CGContextAddLineToPoint(CGContextRef c, CGFloat x, CGFloat y)
    
    ● 添加⼀一个矩形  
    void CGContextAddRect(CGContextRef c, CGRect rect)
    
    ● 添加⼀一个椭圆  
    void CGContextAddEllipseInRect(CGContextRef context, CGRect rect)
    
    ● 添加⼀一个圆弧  
    void CGContextAddArc(CGContextRef c, CGFloat x, CGFloat y,
    
        CGFloat radius, CGFloat startAngle, CGFloat endAngle, int
        clockwise)
    
    常⽤用绘制路径函数
    
    ● Mode参数决定绘制的模式  
    void CGContextDrawPath(CGContextRef c, CGPathDrawingMode mode)
    
    ● 绘制空⼼心路径  
    void CGContextStrokePath(CGContextRef c)
    
    ● 绘制实⼼心路径  
    void CGContextFillPath(CGContextRef c)
    
    提⽰示:⼀一般以CGContextDraw、CGContextStroke、CGContextFill开头的函数, 都是⽤用来绘制路径的
    
    图形上下⽂文栈的操作
    
    ● 将当前的上下⽂文copy⼀一份,保存到栈顶(那个栈叫做”图形上下⽂文栈”) void CGContextSaveGState(CGContextRef c)
    
    ● 将栈顶的上下⽂文出栈,替换掉当前的上下⽂文  
    void CGContextRestoreGState(CGContextRef c)

转载于:https://www.cnblogs.com/Lu2015-10-03/p/5177448.html

[813669-20160202140131288-1813879973.png]: /images/20211217/68383f8400df4b2f857634a2a8b3b859.png
[813669-20160202140511366-575700999.png]: /images/20211217/4b1544706c404a22aab4690a7185d846.png
[813669-20160202140543819-820269406.png]: /images/20211217/97e8f4e1b07d434f89291306dcdde270.png
[813669-20160202140611929-1742281902.png]: /images/20211217/461a60d6982d423fb4f8b2b13779e0d2.png
[813669-20160202140844554-398857226.png]: /images/20211217/733c610ff6cd45499250acb7cb73d232.png
[813669-20160202141015116-1730982559.png]: /images/20211217/3a92d6bd339e438ca34f2ac8510394c1.png
[813669-20160202141316382-1679543406.png]: /images/20211217/232cc33d74b04cd8acbb66ea1d0e7df0.png