iOS开发 - Quartz2D绘图

Quartz 2D简介

是一个二维绘图引擎,同时支持iOS和Mac系统

Quartz 2D能完成的工作

绘制图形 : 线条\三角形\矩形\圆\弧等

绘制文字

绘制\生成图片(图像)

读取\生成PDF

截图\裁剪图片

自定义UI控件

… …

drawRect:方法的使用

常见图形的绘制:线条、多边形、圆

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

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

图形上下文栈

为了便于搭建美观的UI界面,iOS提供了UIKit框架,里面有各种各样的UI控件

UILabel:显示文字

UIImageView:显示图片

UIButton:同时显示图片和文字(能点击)

… …

Quartz2D价值

利用UIKit框架提供的控件,拼拼凑凑,能搭建和现实一些简单、常见的UI界面

但是,有些UI界面极其复杂、而且比较个性化,用普通的UI控件无法实现,这时可以利用Quartz2D技术将控件内部的结构画出来,自定义控件的样子

其实,iOS中大部分控件的内容都是通过Quartz2D画出来的

因此,Quartz2D在iOS开发中很重要的一个价值是:自定义view(自定义UI控件

Quartz2D的API是纯C语言的
Quartz2D的API来自于Core Graphics框架
数据类型和函数基本都以CG作为前缀
CGContextRef
CGPathRef
CGContextStrokePath(ctx);
……

图形上下文(Graphics Context)

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

图形上下文的作用

保存绘图信息、绘图状态

决定绘制的输出目标(绘制到什么地方去?)

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

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

Quartz2D提供了以下几种类型的Graphics Context:
Bitmap Graphics Context
PDF Graphics Context
Window Graphics Context
Layer Graphics Context
Printer Graphics Context

Quartz2D自定义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绘图的代码步骤

//获得图形上下文
CGContextRef ctx = UIGraphicsGetCurrentContext();

//拼接路径(下面代码是搞一条线段)
CGContextMoveToPoint(ctx, 10, 10);
CGContextAddLineToPoint(ctx, 100, 100);

//绘制路径
CGContextStrokePath(ctx); // CGContextFillPath(ctx);

Quartz2D常用拼接路径函数

//新建一个起点
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开头的函数,都是用来绘制路径的

Quartz2D图形上下文栈的操作

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

//将栈顶的上下文出栈,替换掉当前的上下文
void CGContextRestoreGState(CGContextRef c)

Quartz2D基本线条绘制实例

/**
 *  在view第一次显示到屏幕上的时候会调用一次
 */
- (void)drawRect:(CGRect)rect {

    //1.获得图形上下文
    CGContextRef ctx=UIGraphicsGetCurrentContext();

    //2.拼接图形路径
    //设置线段宽度
    CGContextSetLineWidth(ctx, 5);

    //设置线段头尾部的样式
    CGContextSetLineCap(ctx, kCGLineCapRound);

    //设置线段转折点的样式
    CGContextSetLineJoin(ctx, kCGLineJoinRound);

    //第一条线 (设置颜色)
    CGContextSetRGBStrokeColor(ctx, 1, 0, 0, 1);
    //设置一个起点
    CGContextMoveToPoint(ctx, 10, 10);
    //添加一条线段到(100,100)
    CGContextAddLineToPoint(ctx, 100, 100);
    //渲染
    CGContextStrokePath(ctx);

    //第二条线
    CGContextSetRGBStrokeColor(ctx, 0, 0, 1, 1);
    CGContextMoveToPoint(ctx, 30, 30);
    CGContextAddLineToPoint(ctx, 140, 40);
    CGContextAddLineToPoint(ctx, 180, 150);
    CGContextStrokePath(ctx);

    //第三条线
    CGContextSetRGBStrokeColor(ctx, 0, 1, 1, 1);
    CGContextMoveToPoint(ctx, 160, 260);
    CGContextAddLineToPoint(ctx, 100, 40);
    CGContextAddLineToPoint(ctx, 100, 200);
    CGContextAddLineToPoint(ctx, 50, 100);
    CGContextSetLineWidth(ctx, 10);
    CGContextStrokePath(ctx);

    //第四条线
    CGContextSetRGBStrokeColor(ctx, 0, 1, 0, 1);
    CGContextMoveToPoint(ctx, 90, 340);
    CGContextAddLineToPoint(ctx, 200, 340);
    CGContextSetLineWidth(ctx, 2);
    CGContextStrokePath(ctx);
}

@end

效果图

Quartz2D形状绘制实例

- (void)drawRect:(CGRect)rect {
    drawTriangle();
    drawQuadrilateral();
}

/**
 *  四边形
 */
void drawQuadrilateral()
{
    //1.获得图形上下文
    CGContextRef ctx=UIGraphicsGetCurrentContext();

    //2.画图形
    CGContextAddRect(ctx, CGRectMake(50, 150, 150, 200));
    [[UIColor orangeColor]set];

    //3.绘制图形
    //CGContextFillPath(ctx); //填充
    CGContextStrokePath(ctx); //非填充
};

/**
 *  三角形
 */
void drawTriangle()
{
    //1.获得图形上下文
    CGContextRef ctx=UIGraphicsGetCurrentContext();

    //2.画三角形
    CGContextMoveToPoint(ctx, 125,20);
    CGContextAddLineToPoint(ctx, 10, 120);
    CGContextAddLineToPoint(ctx, 250, 120);

    //关闭路径
    CGContextClosePath(ctx);
    CGContextSetLineWidth(ctx, 8);
    CGContextSetRGBStrokeColor(ctx, 0, 1, 0, 1);

    //3.绘制图形
    CGContextStrokePath(ctx);

}

效果图


- (void)drawRect:(CGRect)rect {
    drawCircle();
    drawArc();
}

/**
 *  画圆弧
 */
void drawArc()
{
    // 1.获得上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();

    // 2.画圆弧
    // x/y : 圆心
    // radius : 半径
    // startAngle : 开始角度
    // endAngle : 结束角度
    // clockwise : 圆弧的伸展方向(0:顺时针, 1:逆时针)
    CGContextAddArc(ctx, 100, 300, 50, M_PI_2, M_PI, 0);
    CGContextSetRGBStrokeColor(ctx, 1, 1, 0, 0.8);
    // 3.显示绘制
    CGContextStrokePath(ctx);

    //画1/4圆
    CGContextMoveToPoint(ctx, 100, 100);
    CGContextAddLineToPoint(ctx, 100, 150);
    CGContextAddArc(ctx, 100, 100, 50, -M_PI_2, M_PI, 1);
    CGContextClosePath(ctx);
    [[UIColor redColor] set];
    CGContextFillPath(ctx);
}

/**
 *  画圆
 */
void drawCircle()
{
    //1.获得上下文
    CGContextRef ctx=UIGraphicsGetCurrentContext();

    //2.画圆
    CGContextAddEllipseInRect(ctx, CGRectMake(50, 10, 150, 150));
    CGContextSetLineWidth(ctx, 10);
    CGContextSetRGBStrokeColor(ctx, 1, 0, 1, 1);

    //3.显示绘画
    CGContextStrokePath(ctx);
}

效果图

Quartz2D图片、文字绘制实例


/**
 *  绘制图片
 */
void drawImage()
{
    //1.取得图片
    UIImage *image=[UIImage imageNamed:@"square"];

    //[image drawAtPoint:CGPointMake(50, 50)];
    //[image drawInRect:CGRectMake(0, 0, 150, 150)];
    [image drawAsPatternInRect:CGRectMake(10, 10, 240, 240)];
    //添加水印
    NSString * [email protected]"作者: W先生";
    [str drawInRect:CGRectMake(160, 200, 100, 30) withAttributes:nil];

}

/**
 *  绘制文字
 */
void drawText()
{
    //1.获得上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();

    //设置一个背景
    CGRect bgRect = CGRectMake(80, 300, 100, 100);
    CGContextAddRect(ctx, bgRect);
    CGContextFillPath(ctx);

    //绘制文字
    NSString * [email protected]"爱编程,爱绘图,不解释!!";

    NSMutableDictionary *attrs=[NSMutableDictionary dictionary];

    //设置文字颜色
    attrs[NSForegroundColorAttributeName]=[UIColor orangeColor];

    //设置文字字体
    attrs[NSFontAttributeName]=[UIFont systemFontOfSize:25];
    [str drawInRect:bgRect withAttributes:attrs];
}

效果图

版权声明:本文为博主原创文章,未经博主允许不得转载。

时间: 2024-10-23 02:00:29

iOS开发 - Quartz2D绘图的相关文章

(转)IOS开发之——绘图(CGContext)

周刊 更多 登录 IOS开发之——绘图(CGContext) 时间 2014-04-21 09:17:43 CSDN博客 原文  http://blog.csdn.net/zhenyu5211314/article/details/24230581 0    CGContextRef context = UIGraphicsGetCurrentCont ext(); 设置上下文 1 CGContextMoveToPoint 开始画线 2 CGContextAddLineToPoint 画直线 4

iOS开发系列--绘图与滤镜全面解析

概述 在iOS中可以很容易的开发出绚丽的界面效果,一方面得益于成功系统的设计,另一方面得益于它强大的开发框架.今天我们将围绕iOS中两大图形.图形绘图框架进行介绍:Quartz 2D绘制2D图形和Core Image中强大的滤镜功能. Quartz 2D 基本图形绘制 视图刷新 其他图形上下文 Core Image Quartz 2D 在iOS中常用的绘图框架就是Quartz 2D,Quartz 2D是Core Graphics框架的一部分,是一个强大的二维图像绘制引擎.Quartz 2D在UI

iOS开发-Quartz2D初识

Quartz2D如果单独的从Quartz,那么会发现Quartz是一个开源的Java作业调度框架,单独从英文翻译的角度来看的话Quartz的英文是石英,如果有的时候不小心搜索会发现手表推荐.本文中介绍的Quartz是位于MAC OS X的Drawin核心之上的绘图层,有时候也认为是CoreGraphics.Quartz直接地支持Aqua,借由显示2D绘图图形来创建用户接口,包含实时绘制(rendering)和次像素(sub-pixel)精准的反锯齿,由Quartz Compositor和Quar

iOS:quartz2D绘图(给图形绘制阴影)

quartz2D既可以绘制原始图形,也可以给原始图形绘制阴影. 绘制阴影时,需要的一些参数:上下文.阴影偏移量.阴影模糊系数 注意:在对绘制的图形做了绘制阴影处理前,需要先对上下文进行保存,绘制阴影成功后,还要对上下文进行复位.目的是为了不影响后面的绘图操作. 举例的阴影绘制实例如下: 1.自定义一个视图类DemoView,并将控制器的视图关联该自定义类,同时在该定义类中重写- (void)drawRect:(CGRect)rect,将绘制无阴影图形和绘制阴影图形的调用方法写在里面.     

iOS:quartz2D绘图(画一些简单的图形,如直线、三角形、圆、矩形、文字等)

前一篇几乎已经详细介绍了Quartz2D的所有知识,这一篇以及后面就不废话了,主要是用具体的实例来演示绘图效果. 这里我们先来绘制一些简单的图形(如直线.三角形.圆.矩形.文字.图像),它有两种方式可以绘制,一种是通过上下文绘制,另一种是通过路径绘制.下面对绘制三角形做了一个两种方式绘制的演示. 绘制基本的图形,需要在操作的视图类中重写- (void)drawRect:(CGRect)rect方法,并在在该方法中绘制图形.绘制图像既可以重写该方法绘制,也可以不用重写该方法,它有封装好的方法.这里

iOS:quartz2D绘图(显示绘制在PDF上的图片)

quart2D既可以用来绘制图像到pdf上,也可以从pdf上读取图像并显示出来.在使用这种方式之前,还有一种方式可以用来读取显示pdf上的图像,即使用UIWebView网页视图控件- (void)loadRequest:(NSURLRequest *)request方法加载绘制到视图上显示,这里我将会将这两种方式都演示一遍. 具体的实例如下: 方式一:采用网页视图控件UIWebView的方式显示在pdf上的绘图 1.在故事板视图中拖入两个子控件,分别是网页视图控件webView和显示按钮   2

iOS之Quartz2D绘图随机绘制五角星

1.   单个五角星绘制 上次讲了在IOS中使用quartz2d绘制基本的图形,今天来绘制一个比较复杂的图形—五角星,五角星大家都很熟悉. 先来分析下五角星的画法,一个五角星如图所示. 1.   先把一个圆周平均五等分,那么每个角度是360/5,然后隔点进行连线就可以绘制五角星 2.   每个连线的夹角就是360/5*2,但是在IOS的正弦余弦计算采用的是弧度制.这里有必要复习下弧度的知识,弧度就是弧的长度,把等于半径的弧度定义为一弧度.那么360度就是2pi. 如图所示 3.   复习完弧度知

iOS:quartz2D绘图(在PDF文件上绘制图片)

quartz2D还可以在PDF文件上绘制图片,它有自己的PDF Graphics Context上下文,通过UIGraphicsBeginPDFContextToFile方法开始上下文后就可以绘制图片了,最后记得使用UIGraphicsEndPDFContext()方法结束上下文.绘制pdf时,既可以绘制单页pdf,也可以绘制多页pdf成一本书,在绘制开始时,使用UIGraphicsBeginPDFPage()开始新的一页这是非常重要的.下面演示绘制单页pdf和多页的pdf. 具体的实例如下:

iOS开发 - Quartz2D绘制小黄人

Quartz2D绘制小黄人 - (void)drawRect:(CGRect)rect { // 1.上下文 CGContextRef ctx = UIGraphicsGetCurrentContext(); // 2.身体 drawBody(ctx, rect); // 3.嘴(微笑) drawMouth(ctx, rect); // 4.画眼睛 drawEyes(ctx, rect); } /** * 眼睛 */ void drawEyes(CGContextRef ctx, CGRect