画图

画图

关注
发信
关注(28)粉丝(399)

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或者显示器的窗体上）

iOS开发 - Quartz2D画图-LMLPHP同样的一套画图序列，指定不同的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

效果图

iOS开发 - Quartz2D画图-LMLPHP

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);

}

效果图

iOS开发 - Quartz2D画图-LMLPHP



- (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);

}

效果图

iOS开发 - Quartz2D画图-LMLPHP

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 * str=@"作者: 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 * str=@"爱编程,爱画图,不解释!!";

    NSMutableDictionary *attrs=[NSMutableDictionary dictionary];

    //设置文字颜色

    attrs[NSForegroundColorAttributeName]=[UIColor orangeColor];

    //设置文字字体

    attrs[NSFontAttributeName]=[UIFont systemFontOfSize:25];

    [str drawInRect:bgRect withAttributes:attrs];

}

效果图

iOS开发 - Quartz2D画图-LMLPHP

05-11 19:31
Powered by LMLPHP ©2024 画图 0.054109