现在的位置: 首页 > 综合 > 正文

Quartz2D(1)

2018年05月26日 ⁄ 综合 ⁄ 共 4007字 ⁄ 字号 评论关闭

需要掌握以下:

1.drawRect:方法的使用

2.线条,多边形,圆等的绘制

3.文字颜色,线宽等绘图状态的设置

4.图形上下文状态的保存与恢复

5.图形上下文栈

Quartz 2D:

1.可以绘制:线条,多边形,圆,弧

2.绘制文字

3.生成图片

4.生成PDF

5.剪裁图片

6.自定义控件

。。。

图形上下文(Graphics Context):是一个CGContextRef类型的数据

作用:

1.保存绘图信息、绘图状态

2.决定绘制的输出目标(绘制到什么地方去?)(输出目标可以是PDF文件、Bitmap或者显示器的窗口上)


相同的一套绘图序列,指定不同的Graphics Context,就可将相同的图像绘制到不同的目标上

Quartz2D提供了以下几种类型的Graphics Context

1.Bitmap Graphics Context

2.PDF Graphics Context

3.Window Graphics Context

4.Layer Graphics Context

5.Printer Graphics Context

自定义view的步骤

1.新建一个类,继承自UIView

2.实现- (void)drawRect:(CGRect)rect方法,然后在这个方法中

3.取得跟当前view相关联的图形上下文

4.绘制相应的图形内容

5.利用图形上下文将绘制的所有内容渲染显示到view上面

drawRect:方法在什么时候被调用?

1.当view第一次显示到屏幕上时(被加到UIWindow上显示出来)

2.调用viewsetNeedsDisplay或者setNeedsDisplayInRect:


drawRect:方法中取得上下文后,就可以绘制东西到view

View内部有个layer(图层)属性drawRect:方法中取得的是一个Layer
Graphics Context
,因此,绘制的东西其实是绘制到viewlayer上去了

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)

提示:一般以CGContextDrawCGContextStrokeCGContextFill开头的函数,都是用来绘制路径的

图形上下文栈的操作

将当前的上下文copy一份,保存到栈顶(那个栈叫做”图形上下文栈”)

void CGContextSaveGState(CGContextRef c)

将栈顶的上下文出栈,替换掉当前的上下文

void CGContextRestoreGState(CGContextRef c)


绘制小黄人:


#import "NJHumanView.h"

#define NJTopX rect.size.width * 0.5
#define NJTopY 150
#define NJTopRadius 80


@implementation NJHumanView

- (void)drawRect:(CGRect)rect
{
    // 1.获取上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    
    // 画身体
    [self drawBody:rect context:ctx];
    
    // 画眼镜
    [self drawEyes:rect context:ctx];
    
    // 画嘴
    [self drawMouth:rect context:ctx];
    
}

- (void)drawMouth:(CGRect)rect context:(CGContextRef)ctx
{
    
    // 控制点
    CGFloat controllerX = NJTopX;
    CGFloat controllerY = rect.size.height * 0.5 + 50;
    // 当前点
    CGFloat maginX = 20;
    CGFloat maginY = 10;
    CGFloat currentX =  controllerX - maginX;
    CGFloat currentY =  controllerY - maginY;
    CGContextMoveToPoint(ctx, currentX, currentY);

    // 结束点
    CGFloat endX = controllerX + maginX;
    CGFloat endY = currentY;
    
    // cpx/cpy 是控制点的位置
    // x/y 是结束点的位置
    CGContextAddQuadCurveToPoint(ctx, controllerX, controllerY, endX, endY);
    
    // 重新设置嘴的宽度
    CGContextSetLineWidth(ctx, 1);
    // 重新设置颜色
    [[UIColor blackColor] set];
    //渲染
    CGContextStrokePath(ctx);
}

- (void)drawEyes:(CGRect)rect context:(CGContextRef)ctx
{
    // 画眼镜
    CGFloat startX = NJTopX - NJTopRadius;
    CGFloat startY = NJTopY;
    // 设置起点
    CGContextMoveToPoint(ctx, startX, startY);
    
    // 设置终点
    CGFloat endX = NJTopX + NJTopRadius;
    CGFloat endY = startY;
    CGContextAddLineToPoint(ctx, endX, endY);
    
    // 设置线条宽度
    CGContextSetLineWidth(ctx, 18);
    
    
    // 重新设置颜色
    [[UIColor blackColor] set];
    CGContextStrokePath(ctx);
    
    // 画眼睛
    //    CGContextAddEllipseInRect(ctx, CGRectMake(<#CGFloat x#>, <#CGFloat y#>, <#CGFloat width#>, <#CGFloat height#>))
    // 画大眼睛
    CGFloat leftRadius = 30;
    CGFloat leftX = NJTopX - leftRadius;
    CGFloat leftY = NJTopY;
    CGContextAddArc(ctx, leftX, leftY, leftRadius, 0, 2 * M_PI, 0);
    CGContextFillPath(ctx);
    
    // 画二眼睛
    CGFloat leftSmallRadius = 20;
    CGFloat leftSmallX = leftX;
    CGFloat leftSmallY = leftY;
    CGContextAddArc(ctx, leftSmallX, leftSmallY, leftSmallRadius, 0, 2 * M_PI, 0);
    [[UIColor whiteColor] set];
    CGContextFillPath(ctx);
}

- (void)drawBody:(CGRect)rect context:(CGContextRef)ctx
{

    // 2.绘制图形
    // 画上半圆弧
    CGFloat topX = NJTopX;
    CGFloat topY = NJTopY;
    CGFloat topRadius = NJTopRadius;
    CGContextAddArc(ctx, topX, topY, topRadius, -M_PI, 0, 0);
    
    // 画身体直线
    CGFloat middX = topX + topRadius;
    CGFloat middY = topY + 150;
    CGContextAddLineToPoint(ctx, middX, middY);
    
    
    // 画下半圆弧
    CGFloat bottomRadius = topRadius;
    CGFloat bottomX = topX;
    CGFloat bottomY = middY;
    CGContextAddArc(ctx, bottomX, bottomY, bottomRadius, 0, M_PI, 0);
    
    // 关闭路径
    CGContextClosePath(ctx);
    
    
    // 3.渲染图形
    [[UIColor colorWithRed:252/255.0 green:218/255.0 blue:0 alpha:1.0] set];
    CGContextFillPath(ctx);
}


@end

【上篇】
【下篇】

抱歉!评论已关闭.