IOS开发入门之iOS Quartz 2D绘图知识详解-职坐标

IOS开发入门之iOS Quartz 2D绘图知识详解

白羽 2018-11-19 来源：网络阅读 1044 评论 0

摘要：本文将带你了解IOS开发入门iOS Quartz 2D绘图知识详解，希望本文对大家学IOS有所帮助。

本文将带你了解IOS开发入门iOS Quartz 2D绘图知识详解，希望本文对大家学IOS有所帮助。

* Quartz*
1. Mac OS X的Darwin核心之上的绘图层，有时候也认为是CoreGraphics。共有两种部分组成Quartz：
2. Quartz Compositor，合成视窗系统，管理和合成幕后视窗影像来建立Mac OS X使用者接口。
3. Quartz 2D，是iOS和Mac OS X环境下的二维绘图引擎。
涉及内容包括：基于路径的绘图，透明度绘图，遮盖，阴影，透明层，颜色管理，防锯齿渲染，生成PDF，以及PDF元数据相关处理。

*一、Quartz 2D的简单介绍**
1. Quartz 2D属于Core Graphics（所以大多数相关方法的都是以CG开头），是iOS/Mac OSX 提供的在内核之上的强大的2D绘图引擎，并且这个绘图引擎是设备无关的。也就是说，不用关心设备的大小，设备的分辨率，只要利用Quartz 2D，这些设备相关的会自动处理。
**2.**Quartz 2D能够提供的强大功能如下:

1. 透明层（transparency layers）

2. 阴影基于path的绘图（path-based drawing）

3. 离屏渲染（offscreen rendering）

4. 复杂的颜色处理（advanced color management）

5. 抗锯齿渲染（anti-aliased rendering）

6. PDF创建，展示，解析（这部分不在这个系列之中）配合Core Animation, OpenGL ES,UIKit完成复杂的功能画板－The Graphics Context

7. 而Quartz 2D的容器就是CGContextRef数据模型。这种数据模型是C的结构体，存储了渲染到屏幕上需要的一切信息。

二、Quartz 2D详解：

Quartz 2D的基本数据类型：
Quartz 2D中的数据类型都是透明的，也就是说用户只需要使用即可，不需要实际访问其中的变量。具体的数据类型包括

1. CGPathRef 路径类型，用来绘制路径（注意带有ref后缀的一般都是绘制的画板）

2. CGImageRef，绘制bitmap

3. CGLayerRef，绘制layer，layer可复用，可离屏渲染

4. CGPatternRef，重复绘制

5. CGShadingRef和CGGradientRef，绘制渐变（例如颜色渐变）

6. CGFunctionRef，定义回调函数，CGShadingRef和CGGradientRef的辅助类型

7. CGColorRef and CGColorSpaceRef，定义如何处理颜色

8. CGFontRef，绘制文字

Quartz 2D的坐标

UIKit默认的坐标系统与Quartz不同。在UIKit中，原点位于左上角，y轴正方向为向下。UIView通过将修改Quartz的Graphics Context的CTM[原点平移到左下角，同时将y轴反转(y值乘以-1)]以使其与UIView匹配。这些都是系统自动帮我们完成。

三、直线/矩形

基本图形绘制需要的属性

1.获取当前上下文（context）（UIGraphicsGetCurrentContext）

2.设置颜色：

CGContextSetFillColorWithColor：设置描边颜色

CGContextSetFillColorWithColor：设置填充颜色

3. 画的范围

CGContextStrokeRect：描边的范围

CGContextFillRect：填充的范围

4.CGContextSetLineWidth：线宽

5.CGContextSetLineCap：线顶端的样式

6.CGContextSetLineJoin：线拐角的样式

7. 线的起始点：

CGContextMoveToPoint：起点

CGContextAddLineToPoint：终点

8.CGContextFillPath ：填充的路径

9.CGContextStrokePath：描边的路径

直线、矩形 demo

- (void)drawRect:(CGRect)rect {

//1.获得当前context

CGContextRef context = UIGraphicsGetCurrentContext();

//设置颜色 (填充色和描边的颜色)

CGContextSetFillColorWithColor(context, [UIColor colorWithWhite:0.8 alpha:1].CGColor);

CGContextSetStrokeColorWithColor(context, [UIColor blueColor].CGColor);

//设置描边线宽

CGContextSetLineWidth(context, 20);

//对矩形进行填色或描边

//（注意：如果先描边再填充，由于矩形大小一致，那么描边的线就会被填充的矩形挡住）

CGContextFillRect(context, rect);

CGContextStrokeRect(context, rect);

//-----------------------------------------------------------------

//MARK: ------ 实际line和point的代码

// 设置描边颜色

CGContextSetStrokeColorWithColor(context, [UIColor yellowColor].CGColor); CGContextSetLineWidth(context, 8.0);//线的宽度

CGContextSetLineCap(context, kCGLineCapRound);//线的顶端

CGContextSetLineJoin(context, kCGLineJoinRound);//线相交的模式

//-----------------------------------------------------------------

//MARK:黄色的 ">" 图形

//移动画笔到哪个点

CGContextMoveToPoint(context,20,20);

//画笔画到哪个点

CGContextAddLineToPoint(context, rect.size.width - 20, rect.size.height / 2 - 20);

CGContextAddLineToPoint(context, 20, rect.size.height - 20);

//根据上下文中的点，成线进行描边

CGContextStrokePath(context);

//------------------------------------------------------------------

//MARK: 红色的小的三角的填充

CGContextSetFillColorWithColor(context, [UIColor redColor].CGColor);

CGContextMoveToPoint(context, 0, rect.size.height / 2 - 30);

CGContextAddLineToPoint(context, 30, rect.size.height / 2);

CGContextAddLineToPoint(context, 0, rect.size.height / 2 + 30);

CGContextFillPath(context);

//虚线效果

//CGContextSetLineDash(context, 1, lengths, 1);

//------------------------------------------------------------------

//MARK: 红色虚线效果

CGContextSetStrokeColorWithColor(context,[UIColor redColor].CGColor);

CGContextSetLineWidth(context, 1);

CGContextMoveToPoint(context, rect.size.width - 20, 20);

CGContextAddLineToPoint(context, rect.size.height - 20, rect.size.width - 20);

CGFloat lengths[] = {20};

CGContextSetLineDash(context, 1, lengths, 1);

CGContextStrokePath(context);

}

运行之后的效果：

虚线效果

CGContextSetLineDash参数详解
void CGContextSetLineDash (
CGContextRef _Nullable c,
CGFloat phase,
const CGFloat * _Nullable lengths,
size_t count
);
c 绘制的context，这个不用多说
phase，第一个虚线段从哪里开始，例如传入3，则从第三个单位开始
lengths,一个C数组，表示绘制部分和空白部分的分配。例如传入[2,2],则绘制2个单位，然后空白两个单位，以此重复
count lengths的数量

四、曲线— 圆弧的绘制

Quartz提供了两个方法来绘制圆弧
1. CGContextAddArc，普通的圆弧一部分（以某圆心，某半径，某弧度的圆弧）
2. CGContextAddArcToPoint，用来绘制圆角

CGContextAddArc

结构：
void CGContextAddArc (
CGContextRef _Nullable c,
CGFloat x, // 圆心X坐标
CGFloat y, // 圆心Y坐标
CGFloat radius, // 弧度半径
CGFloat startAngle, // 开始的弧度
CGFloat endAngle, // 结束的弧度
int clockwise //1表示顺时针，0表示逆时针
);

- (void)drawRect:(CGRect)rect {

//--------------------------------------------------------------------

//MARK: 画弧

//1.获取图片上下文

CGContextRef context = UIGraphicsGetCurrentContext();

//2.设置弧度及位置

//根据中心点，半径，起始的弧度，最后的弧度，是否顺时针画一个圆弧

CGContextAddArc(context, rect.size.width / 2, rect.size.height / 2, 20, M_PI_4, M_PI, 1);

CGContextSetStrokeColorWithColor(context, [UIColor redColor].CGColor);

//3.画

CGContextDrawPath(context, kCGPathStroke);

// -----------------------------------------------------

//MARK:画有线圈的圆饼

CGContextSetRGBStrokeColor(context, 1, 0, 0, 1);//设置线的颜色

CGContextSetRGBFillColor(context, 0, 0, 1, 1);//设置填充颜色

CGContextSetLineWidth(context, 2); //设置线的宽度

CGContextAddEllipseInRect(context, CGRectMake(10, 30, 60, 60)); //画一个椭圆或者圆

CGContextDrawPath(context, kCGPathFillStroke);

}

2.CGContextAddArcToPoint

void CGContextAddArcToPoint (
CGContextRef _Nullable c,
CGFloat x1,
CGFloat y1,
CGFloat x2,
CGFloat y2,
CGFloat radius
);
c context x1,y1和当前点(x0,y0)决定了第一条切线（x0,y0）->(x1,y1) x2,y2和(x1,y1)决定了第二条切线 radius,想切的半径。
也就是说，
绘制一个半径为radius的圆弧，和上述两条直线都相切。

- (void)drawRect:(CGRect)rect {

CGContextRef ctx = UIGraphicsGetCurrentContext();

CGContextSetRGBStrokeColor(ctx, 1, 0, 0, 1);//设置线的颜色

CGContextSetRGBFillColor(ctx, 0, 0, 1, 1);//设置填充颜色

CGContextSetLineWidth(ctx, 2); //设置线的宽度

//CGContextAddArcToPoint 先要确定三个点，

//1.从哪里开始划线 CGContextMoveToPoint （也就是两条线的交点）

//2.第二个点与起始点确定一条直线

本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标移动开发之IOS频道！

手机app制作

本文由 @白羽发布于职坐标。未经许可，禁止转载。