第三十四篇：Quartz2D绘图

2024-05-12 20:08
文章标签 绘图 三十四篇 quartz2d

本文主要是介绍第三十四篇：Quartz2D绘图，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

Quartz2D在iOS开发中的价值

•自定义view（自定义UI控件）

2.图形上下文

1）图形上下文（Graphics Context）：是一个CGContextRef类型的数据
2）图形上下文的作用
Ø保存绘图信息、绘图状态
Ø决定绘制的输出目标（绘制到什么地方去？）

（输出目标可以是PDF文件、Bitmap或者显示器的窗口上）


相同的一套绘图序列，指定不同的GraphicsContext，就可将相同的图像绘制到不同的目标上
4）Quartz2D提供了以下几种类型的Graphics Context：

ØBitmapGraphics Context
ØPDFGraphicsContext
ØWindowGraphicsContext
ØLayerGraphicsContext
ØPrinterGraphicsContext

自定义view

1）如何利用Quartz2D绘制东西到view上？
Ø首先，得有图形上下文，因为它能保存绘图信息，并且决定着绘制到什么地方去
Ø其次，那个图形上下文必须跟view相关联，才能将内容绘制到view上面

2）自定义view的步骤
Ø新建一个类，继承自 UIView
Ø实现- ( void)drawRect:( CGRect)rect方法，然后在这个方法中
>取得跟当前view相关联的图形上下文
>绘制相应的图形内容
>利用图形上下文将绘制的所有内容渲染显示到view上面

3)

》为什么要实现drawRect:方法才能绘图到view上？
Ø因为在drawRect:方法中才能取得跟view相关联的图形上下文
》drawRect:方法在什么时候被调用？
Ø当view第一次显示到屏幕上时（被加到UIWindow上显示出来）
Ø调用view的setNeedsDisplay或者setNeedsDisplayInRect:时

4）drawRect:中取得的上下文
》在drawRect:方法中取得上下文后，就可以绘制东西到view上
》View内部有个layer（图层）属性，drawRect:方法中取得的是一个Layer Graphics Context，因此，绘制的东西其实是绘制到view的layer上去了
》View之所以能显示东西，完全是因为它内部的layer

4.Quartz2D绘图的代码步骤
1）获得图形上下文

CGContextRef ctx=UIGraphicsGetCurrentContext();

2）拼接路径（下面代码是搞一条线段）

CGContextMoveToPoint(ctx,10,10);

CGContextAddLineToPoint(ctx,100,100);

3）绘制路径

CGContextStrokePath(ctx);//CGContextFillPath(ctx);


5.绘图的一些方法
链接一： https://developer.apple.com/library/ios/documentation/GraphicsImaging/Reference/CGContext/index.html#//apple_ref/c/func/CGContextAddArc
链接二： http://donbe.blog.163.com/blog/static/138048021201052093633776/
示例链接： http://blog.csdn.net/JianglongHuang/article/details/44871133

重绘（刷帧，即自动重调用UIView的对象方法： - ( void )drawRect:( CGRect )rect   ）
UIView对象方法 
// 图形上下文全部内容重绘
- (void)setNeedsDisplay;// 图形上下文柜形框内的内容重绘
- (void)setNeedsDisplayInRect:(CGRect);


获得图形上下文： 
UIGraphicsGetCurrentContext()

用图形上下文栈，存储当前图形上下方及其复原 

CGContextSaveGState(CGContextRef  _Nullable c)  
CGContextRestoreGState(CGContextRef  _Nullable c)

图形上下文的 旋转，缩放，平移

// 图形上下文中的内容旋转了angle角度CGContextRotateCTM(CGContextRef  _Nullable c, CGFloat angle)// 图形上下文中的内容缩放比例CGContextScaleCTM(CGContextRef  _Nullable c, CGFloat sx, CGFloat sy)// 图形上下文中的内容x,y的平移CGContextTranslateCTM(CGContextRef  _Nullable c, CGFloat tx, CGFloat ty)

指定一个点成为current point，Quartz会跟踪current point一般执行完一个相关函数后，current point都会相应的改变.

void CGContextMoveToPoint (CGContextRef c, CGFloat x,CGFloat y );

创建一条直线，从current point到 (x,y)， 然后current point会变成(x,y) 

void CGContextAddLineToPoint (  CGContextRef c,  CGFloat x,  CGFloat y  );

创建多条直线，比如points有两个点，那么会画两条直线 从current point到 (x1,y1),  然后是(x1,y1)到(x2,y2)，然后current point会变成points中的最后一个点 

void CGContextAddLines (  CGContextRef c,  const CGPoint points[],  size_t count  
);

形成封闭图形 

CGContextClosePath(CGContextRef  _Nullable c)

设置线宽状态： 

CGContextSetLineWidth(CGContextRef  _Nullable c, CGFloat width);

设置线两端的形状 

CGContextSetLineCap(CGContextRef  _Nullable c, CGLineCap cap)

设置填充的颜色

CGContextSetRGBFillColor(CGContextRef  _Nullable c, CGFloat red, CGFloat green, CGFloat blue, CGFloat alpha)  
CGContextSetRGBStrokeColor(CGContextRef  _Nullable c, CGFloat red, CGFloat green, CGFloat blue, CGFloat alpha)

裁剪图形 

CGContextClip(CGContextRef  _Nullable c)  
CGContextClipToMask(CGContextRef  _Nullable c, CGRect rect, CGImageRef  _Nullable mask)  
CGContextClipToRect(CGContextRef  _Nullable c, CGRect rect)  
CGContextClipToRects(CGContextRef  _Nullable c, const CGRect * _Nonnull rects, size_t count)

画一个椭圆

[objc]  view plain copy print ?
  1. CGContextAddEllipseInRect(CGContextRef  _Nullable c, CGRect rect)  


出一个距形

[objc]  view plain copy print ?
  1. CGContextAddRect(CGContextRef  _Nullable c, CGRect rect)  
  2. CGContextAddRects(CGContextRef  _Nullable c, const CGRect * _Nullable rects, size_t count)  

弧：Arcs

 两种方法创建弧度 第一种

 

[objc]  view plain copy print ?
  1. void CGContextAddArc (  
  2.     CGContextRef c,      
  3.     CGFloat x,             //圆心的x坐标  
  4.     CGFloat y,    //圆心的x坐标  
  5.     CGFloat radius,   //圆的半径   
  6.     CGFloat startAngle,    //开始弧度  
  7.     CGFloat endAngle,   //结束弧度  
  8.     int clockwise          //0表示顺时针，1表示逆时针  
  9.  );  

 假如想创建一个完整的圆圈，那么 开始弧度就是0 结束弧度是 2pi， 因为圆周长是 2*pi*r.

 最后，函数执行完后，current point就被重置为(x,y).

 还有一点要注意的是，假如当前path已经存在一个subpath，那么这个函数执行的另外一个效果是

 会有一条直线，从current point到弧的起点


 第二种

[objc]  view plain copy print ?
  1. void CGContextAddArcToPoint (  
  2.    CGContextRef c,  
  3.    CGFloat x1,  //端点1的x坐标  
  4.    CGFloat y1,  //端点1的y坐标  
  5.    CGFloat x2,  //端点2的x坐标  
  6.    CGFloat y2,  //端点2的y坐标  
  7.    CGFloat radius //半径  
  8. );  

 原理：首先画两条线，这两条线分别是 current point to (x1,y1) 和(x1,y1) to (x2,y2).

 这样就是出现一个以(x1,y1)为顶点的两条射线，

 然后定义半径长度，这个半径是垂直于两条射线的，这样就能决定一个圆了，更好的理解看下图，不过个人认为下图所标的 tangent point 1的位置是错误的。

 最后，函数执行完后，current point就被重置为(x2,y2).

 还有一点要注意的是，假如当前path已经存在一个subpath，那么这个函数执行的另外一个效果是

 会有一条直线，从current point到(x1,y1)


画曲线

<pre name="code" class="objc">// 一个控制点的曲线
CGContextAddQuadCurveToPoint(CGContextRef  _Nullable c,CGFloat cpx, // 控制点x的位置CGFloat cpy, // 控制点y的位置CGFloat x,   // 直线的终点x的位置CGFloat y    // 直线的终点y的位置)// 两个控制点的曲线
CGContextAddCurveToPoint(CGContextRef  _Nullable c, CGFloat cp1x, CGFloat cp1y, CGFloat cp2x, CGFloat cp2y, CGFloat x, CGFloat y)

 

 

 画文字
 

 NSString 对象方法：
 

 
 

 
 
 [objc]  view plain copy print ? 
 
 
 
 
  1.  - (void)drawInRect:(CGRect) withAttributes:(nullable NSDictionary<NSString *,id> *);  
  2.  - (void)drawAtPoint:(CGPoint) withAttributes:(nullable NSDictionary<NSString *,id> *);  
 

 

 

 
 

 画图片
 

 UIImage 对象方法：
 

 
 

 
 
 [objc]  view plain copy print ? 
 
 
 
 
  1.  - (void)drawAsPatternInRect:(CGRect);  
  2.  - (void)drawInRect:(CGRect);  
  3.  - (void)drawAtPoint:(CGPoint);  
  4.  .......  
 

 

 

 
 

 
常用绘制路径函数 

 
 
 [objc]  view plain copy print ? 
 
 
 
 
  1.  //Mode参数决定绘制的模式  
  2.  void CGContextDrawPath(CGContextRef c, CGPathDrawingMode mode)  
  3.    
  4.  //绘制空心路径  
  5.  void CGContextStrokePath(CGContextRef c)  
  6.    
  7.  //绘制实心路径  
  8.  void CGContextFillPath(CGContextRef c)  
 

 

 图片水印
 

 
 

//开启一个基于位图的图形上下文
void     UIGraphicsBeginImageContextWithOptions(CGSize size, BOOL opaque, CGFloat scale)//从上下文中取得图片（UIImage）
UIImage* UIGraphicsGetImageFromCurrentImageContext();//结束基于位图的图形上下文
void     UIGraphicsEndImageContext();

 

 
屏幕截图 

 

 

 
 

//调用某个view的layer的renderInContext:方法即可
- (void)renderInContext:(CGContextRef)ctx;

 

 

 

 

 
 
 

 
 
 

 
 
 

 
 
 

 
 
 

 
 

                                    

                                        这篇关于第三十四篇：Quartz2D绘图的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
                                    

                                    

                                

                            

                            

                        

                    

                    

                        

                            

                            http://www.chinasem.cn/article/983611。
                            
                        

                    

                    
                    

                        
                            
                        
                    

                

                

                    相关文章
                

                    

                        

                            

                                

                                    
                                        AI绘图怎么变现？想做点副业的小白必看！
                                    
                                

                            

                            

                                

                                    AI绘图怎么变现？想做点副业的小白必看！
                                

                                

                                    在科技飞速发展的今天，AI绘图作为一种新兴技术，不仅改变了艺术创作的方式，也为创作者提供了多种变现途径。本文将详细探讨几种常见的AI绘图变现方式，帮助创作者更好地利用这一技术实现经济收益。  更多实操教程和AI绘画工具，可以扫描下方，免费获取  定制服务：个性化的创意商机 个性化定制 AI绘图技术能够根据用户需求生成个性化的头像、壁纸、插画等作品。例如，姓氏头像在电商平台上非常受欢迎，
                                

                                

                                    阅读更多...
                                

                            

                        

                    

                    

                        

                            

                                

                                    
                                        科研绘图系列：R语言扩展物种堆积图（Extended Stacked Barplot）
                                    
                                

                            

                            

                                

                                    科研绘图系列：R语言扩展物种堆积图（Extended Stacked Barplot）
                                

                                

                                    介绍 R语言的扩展物种堆积图是一种数据可视化工具，它不仅展示了物种的堆积结果，还整合了不同样本分组之间的差异性分析结果。这种图形表示方法能够直观地比较不同物种在各个分组中的显著性差异，为研究者提供了一种有效的数据解读方式。 加载R包 knitr::opts_chunk$set(warning = F, message = F)library(tidyverse)library(phyl
                                

                                

                                    阅读更多...
                                

                            

                        

                    

                    

                        

                            

                                

                                    
                                        matplotlib绘图中插入图片
                                    
                                

                            

                            

                                

                                    matplotlib绘图中插入图片
                                

                                

                                    在使用matplotlib下的pyplot绘图时，有时处于各种原因，需要采用类似贴图的方式，插入外部的图片，例如添加自己的logo，或者其他的图形水印等。 一开始，查找到的资料都是使用imshow，但是这会有带来几个问题，一个是图形的原点发生了变化，另外一个问题就是图形比例也产生了变化，当然最大的问题是图形占据了整个绘图区域，完全喧宾夺主了，与我们设想的只在绘图区域中占据很小的一块不相符。 经
                                

                                

                                    阅读更多...
                                

                            

                        

                    

                    

                        

                            

                                

                                    
                                        海龟绘图简易教程|Turtle for Python
                                    
                                

                            

                            

                                

                                    海龟绘图简易教程|Turtle for Python
                                

                                

                                    turtle 是 python 内置的一个比较有趣味的模块，俗称 海龟绘图，它是基于 tkinter 模块打造，提供一些简单的绘图工具，海龟作图最初源自 20 世纪 60 年代的 Logo 编程语言，之后一些很酷的 Python 程序员构建了 turtle 库，让其他程序员只需要 import turtle，就可以在 Python 中使用海龟作图。  原文链接|海龟绘图简易教程 1. 基本
                                

                                

                                    阅读更多...
                                

                            

                        

                    

                    

                        

                            

                                

                                    
                                        GraphPad Prism 10 for Mac/Win：高效统计分析与精美绘图的科学利器
                                    
                                

                            

                            

                                

                                    GraphPad Prism 10 for Mac/Win：高效统计分析与精美绘图的科学利器
                                

                                

                                    GraphPad Prism 10 是一款专为科研工作者设计的强大统计分析与绘图软件，无论是Mac还是Windows用户，都能享受到其带来的便捷与高效。该软件广泛应用于生物医学研究、实验设计和数据分析领域，以其直观的操作界面、丰富的统计方法和多样化的图表样式，成为科学研究的得力助手。 数据处理与整理 GraphPad Prism 10 支持从多种数据源导入数据，如Excel、CSV文件及数据库
                                

                                

                                    阅读更多...
                                

                            

                        

                    

                    

                        

                            

                                

                                    
                                        MATLAB绘图基础5：MATLAB数据导入
                                    
                                

                            

                            

                                

                                    MATLAB绘图基础5：MATLAB数据导入
                                

                                

                                    参考书：《 M A T L A B {\rm MATLAB} MATLAB与学术图表绘制》(关东升)。   5.MATLAB数据导入 5.1 从CSV文件读取数据   C S V {\rm CSV} CSV文件是一种纯文本文件，文件中的数据以逗号为分隔符进行字段分隔，每一行数据代表一条记录，每个字段在该行内通过逗号进行分隔；   C S V {\rm CSV} CSV文件可以使用任何文本
                                

                                

                                    阅读更多...
                                

                            

                        

                    

                    

                        

                            

                                

                                    
                                        WPF入门到跪下 第十三章 3D绘图 - 3D绘图基础
                                    
                                

                            

                            

                                

                                    WPF入门到跪下 第十三章 3D绘图 - 3D绘图基础
                                

                                

                                    3D绘图基础 四大要点 WPF中的3D绘图涉及4个要点： 视口，用来驻留3D内容3D对象照亮部分或整个3D场景的光源摄像机，提供在3D场景中进行观察的视点 一、视口 要展示3D内容，首先需要一个容器来装载3D内容。在WPF中，这个容器就是Viewport3D（3D视口），它继承自FrameworkElement，因此可以像其他元素那样在XAML中使用。 Viewport3D与其他元素相
                                

                                

                                    阅读更多...
                                

                            

                        

                    

                    

                        

                            

                                

                                    
                                        Day18_0.1基础学习MATLAB学习小技巧总结（18）——MATLAB绘图篇（1）
                                    
                                

                            

                            

                                

                                    Day18_0.1基础学习MATLAB学习小技巧总结（18）——MATLAB绘图篇（1）
                                

                                

                                    利用空闲时间把碎片化的MATLAB知识重新系统的学习一遍，为了在这个过程中加深印象，也为了能够有所足迹，我会把自己的学习总结发在专栏中，以便学习交流。 参考书目：《MATLAB基础教程 (第三版) (薛山)》 之前的章节都是基础的数据运算用法，对于功课来说更加重要的内容是建模、绘图、观察数据趋势，接下来我会结合自己的使用经验，来为大家分享绘图、建模使用的小技巧。  二维图形绘制 在本章开
                                

                                

                                    阅读更多...
                                

                            

                        

                    

                    

                        

                            

                                

                                    
                                        qtdraw-使用qt绘图之开源源码学习
                                    
                                

                            

                            

                                

                                    qtdraw-使用qt绘图之开源源码学习
                                

                                

                                    1. 资源介绍 功能：使用qt在画板上绘制各种形状，并保持绘制内容到xml文件中。 项目源码：https://github.com/egan2015/qdraw 软件界面：   1.1 支持shape 6种  1.2 支持的功能 6种，分别是对绘制的图形进行撤销undo，重做redo，裁剪，复制，粘贴，删除功能。   2. 总体类图关系 总体分割3个独立块。 2.1
                                

                                

                                    阅读更多...
                                

                            

                        

                    

                    

                        

                            

                                

                                    
                                        java AWT 绘图，实现弹球游戏，有实现keylistener,timer功能
                                    
                                

                            

                            

                                

                                    java AWT 绘图，实现弹球游戏，有实现keylistener,timer功能
                                

                                

                                    Timer(int delay, ActionListener listener):每间隔delay毫秒，系统自动触发ActionListener监听器里的事件处理器（actionPerformed()方法）。 package javaAWT;import java.awt.Canvas;import java.awt.Color;import java.awt.Dimension;imp
                                

                                

                                    阅读更多...
                                

                            

                        

                    

            

        

    


    


    

        

            Copyright China编程   23002807@qq.com
        

        

            沪ICP备2023033072号-2