码迷,mamicode.com
首页 > 其他好文 > 详细

八、Quartz2D

时间:2015-07-09 00:15:56      阅读:115      评论:0      收藏:0      [点我收藏+]

标签:

1.基本图形绘制

>>绘图步骤

 > 获取图形上下文 CGContextRef ctx = UIGraphicsGetCurrentContext();

 > 拼接路径 

 // 设置起点 CGContextMoveToPoint(ctx, 10, 10);

 // 设置终点 CGContextMoveToPoint(ctx, 100, 100);

 CGContextAddLineToPoint该方法会将当前图形上下文的起点链接一条线到指定点

 CGContextAddLineToPoint(ctx, 100, 100);

> 渲染

 // 渲染(线段不能使用实心方式渲染)

 CGContextStrokePath(ctx);(空心)

 //CGContextFillPath(ctx);(实心)

/**

 *  当view第一次显示的时候调用 

 */

- (void)drawRect:(CGRect)rect {}

* 线段(线宽、线段样式、线条颜色)

线宽:CGContextSetLineWidth(ctx, 10);

线段样式:

// 设置线段两端样式(圆角)

CGContextSetLineCap(ctx, kCGLineCapRound);

// 设置线段连接点样式

CGContextSetLineJoin(ctx, kCGLineJoinRound);

线条颜色:

// 设置颜色

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

    注意点:画线条只能通过空心样式画。

    CGContextStrokePath(ctx);

* 三角形

// 获得图形上下文

CGContextRef ctx = UIGraphicsGetCurrentContext();

// 画直线

// 设置起点

/***** 绘图信息 ******/

CGContextMoveToPoint(ctx, 10, 10);

// 设置终点

// CGContextAddLineToPoint该方法会将当前图形上下文的起点链接一条线到指定点

CGContextAddLineToPoint(ctx, 100, 100);

// 设置终点

// CGContextAddLineToPoint该方法会将当前图形上下文的终点链接一条线到指定点

CGContextAddLineToPoint(ctx, 200, 20);

// CGContextAddLineToPoint该方法会将当前图形上下文的终点链接一条线到指定点

//    CGContextAddLineToPoint(ctx, 10, 10);

// 关闭路径

CGContextClosePath(ctx);

 /**** 绘图状态 ****/

// 设置线宽

CGContextSetLineWidth(ctx, 10);

// 设置颜色

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

// 设置线段两端样式(圆角)

CGContextSetLineCap(ctx, kCGLineCapRound);

// 设置线段连接点样式

CGContextSetLineJoin(ctx, kCGLineJoinBevel);

// 渲染

CGContextStrokePath(ctx);

 

* 矩形(空心、实心、颜色)

    CGContextAddRect(ctx,CGRectMake(10,10,100,100));

    该方法的缺点:只能绘制正方形和长方形,不能绘制斜的平行四边形。不够灵活。

    注意点:设置绘图的状态必须在渲染之前。比如设置颜色要在渲染之前

// 获得图形上下文

CGContextRef ctx = UIGraphicsGetCurrentContext();

// 拼接路径

CGContextAddRect(ctx, CGRectMake(10, 10, 100, 100));

 // 设置绘图状态

// 设置颜色

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

CGContextSetFillColorWithColor(ctx, [UIColor orangeColor].CGColor);

 

// 渲染(以空心形式绘制)

//    CGContextStrokePath(ctx);

//     // 渲染(以实心形式绘制)

//    CGContextFillPath(ctx);

/*

 kCGPathFill,

 kCGPathEOFill,

 kCGPathStroke,

 kCGPathFillStroke,

 kCGPathEOFillStroke

 */

CGContextDrawPath(ctx, kCGPathFillStroke);//同时渲染线段空心,内容实心

 

 

2.椭圆\圆\圆弧\饼状图(可以用到开源框架Core Plot(股市k线图)图形库,用来画一些心电图,股市走势图,饼状图)

画圆弧方法说明:

void CGContextAddArc (

                      CGContextRef c,上下文

                      CGFloat x,             //圆心的x坐标

                      CGFloat y,    //圆心的x坐标

                      CGFloat radius,   //圆的半径

                      CGFloat startAngle,    //开始弧度

                      CGFloat endAngle,   //结束弧度

                      int clockwise    //0表示顺时针,1表示逆时针

);

// 画线point的取值是相对于当前view的左上角来说的

CGContextMoveToPoint(ctx, x, y);

CGContextAddLineToPoint(ctx, x, 0);// 一定要注意

 

// 画线

CGContextMoveToPoint(ctx, x, y);

//    CGContextAddLineToPoint(ctx, x, 0);

CGContextAddLineToPoint(ctx, x, y * 0.5);

 

// 画弧

/*假如当前path已经存在一个subpath(子线段),那么这个函数执行的另外一个效果是会有一条直线,从current point(即是线段的终点CGContextAddLineToPoint(ctx, x, y * 0.5)里面这个点;)到弧的起点。*/

/*If the current path already contains a subpath, Quartz adds a line connecting the current point to the starting point of the arc. If the current path is empty, Quartz creates a new new subpath with a starting point set to the starting point of the arc.*/

CGContextAddArc(ctx, x, y, raduis, - M_PI_2 ,0, 0);

// CGContextAddArc(ctx, x, y, raduis, 0 ,- M_PI_2, 1);

 

// 设置颜色

// OC方式渲染颜色

// [[UIColor orangeColor] setStroke];// 空心渲染颜色

// [[UIColor orangeColor] setFill]; // 实心渲染颜色

// C方式渲染颜色

//CGContextSetStrokeColorWithColor(ctx, [UIColor blueColor].CGColor);

//CGContextSetFillColorWithColor(ctx, [UIColor orangeColor].CGColor);

等价上面设置的分样式设置颜色的方法

// 设置渲染颜色(跟随渲染方式而改变)

[[UIColor orangeColor] set];

 

CGContextClosePath(ctx);

 

// 渲染

CGContextStrokePath(ctx);

 

假如想创建一个完整的圆圈,那么开始弧度就是0 结束弧度是2pi

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

还有一点要注意的是,假如当前path已经存在一个subpath,

那么这个函数执行的另外一个效果是会有一条直线,从current point到弧的起点。

 

3.文字绘制和图片绘制(pattern)

    1> 绘制文字和图片不要使用C语言函数。原因如下:

        * Quarz2D 绘图坐标系和 UIKit 坐标系不一致,导致使用 C 语言函数绘文字和图片就会出现文字和图片颠倒的现象,需要通过写代码调整,要利用到数学中矩阵的知识。

        * 使用 C 语言函数绘制文字和图片代码复杂且函数不好理解。非常麻烦。

    2> 画格子背景。

 

    3> 绘制文字

/**

 *  绘制文字(c方式)(需要获得图形上下文)

 */

- (void)drawCText:(CGRect)rect{

    // 设置文字

    NSString *text = @"itcast传智";

    

    // 获得上下文

    CGContextRef ctx = UIGraphicsGetCurrentContext();

    

    // 创建字体

    UIFont *font = [UIFont fontWithName:@"Arial" size:20];

    

    // 颠倒坐标系(矩阵平移,旋转)

    CGContextTranslateCTM(ctx, 0, rect.size.height);//

    CGContextScaleCTM(ctx, 1, -1);

    

    // 拼接路径(绘制文字格式,字体,大小)

    CGContextSelectFont(ctx, [[font fontName] cStringUsingEncoding:NSUTF8StringEncoding], 20, kCGEncodingMacRoman);

    // 缺点:两个方法都不会自动换行,也不能绘制中文

    // CGContextShowText(ctx, [text cStringUsingEncoding:NSUTF8StringEncoding], text.length);

    // 展示文字

    CGContextShowTextAtPoint(ctx, 100, 100, [text cStringUsingEncoding:NSUTF8StringEncoding], text.length);

    

    // 渲染

    CGContextStrokePath(ctx);

}

/**

 *  绘制文字(OC方式) (不需要获得图形上下文)

 */

// 设置文字

NSString *text = @"itcast传智itcast传智itcast传智itcast传智itcast传智itcast传智itcast传智itcast传智";

 

// 指定点不能自动换行

// [text drawAtPoint:CGPointZero withFont:[UIFont systemFontOfSize:20]];

// 指定区域能自动换行

// [text drawInRect:rect withFont:[UIFont systemFontOfSize:20]];

// 创建一个字典

NSMutableDictionary *textAttributes = [NSMutableDictionary dictionary];

textAttributes[NSFontAttributeName] = [UIFont systemFontOfSize:20];

textAttributes[NSForegroundColorAttributeName] = [UIColor redColor];

// 指定点不能自动换行

// [text drawAtPoint:CGPointZero withAttributes:textAttributes];

// 指定区域能自动换行

[text drawInRect:rect withAttributes:textAttributes];

 

/**

 *  绘制图片(c方式)(需要获得图形上下文)

 *

 */

// 加载图片

UIImage *image = [UIImage imageNamed:@"psb.jpeg"];

 

// 获得上下文

CGContextRef ctx = UIGraphicsGetCurrentContext();

 

// 颠倒坐标系

CGContextTranslateCTM(ctx, 0, rect.size.height);

CGContextScaleCTM(ctx, 1, -1);

// 绘制图片(拉伸填充指定区域)

//    CGContextDrawImage(ctx, CGRectMake(10, 10, 100, 100), image.CGImage);

 

// 以平铺的形式绘制图片

CGContextDrawTiledImage(ctx, CGRectMake(0, 0, 100, 100), image.CGImage);

 

/**

 *  绘制图片(OC方式)(不需要获得图形上下文)

 *

 */

 //加载图片

    UIImage *image = [UIImage imageNamed:@"test.jpg"];

 

    // [image drawAtPoint:CGPointZero];// 以自己左上角为定位点,相对父控件的位置,大小默认是图片原来尺寸

    // [image drawInRect:rect]; // 拉伸填充

    [image drawAsPatternInRect:rect]; // 平铺绘制

 

4.矩阵操作和图片裁剪

* 旋转、缩放、平移

// 获得上下文

CGContextRef ctx = UIGraphicsGetCurrentContext();

 

//  CGContextTranslateCTM(ctx, 100, 0);// 平移

//  CGContextScaleCTM(ctx, 0.5, 1);// 缩放

CGContextRotateCTM(ctx, M_PI_4);// 旋转 以自己左上角为固定点旋转

// 绘制四边形

CGContextAddRect(ctx, CGRectMake(100, 100, 150, 50));

// 设置线段起点

CGContextMoveToPoint(ctx, 250, 250);

// 设置线段终点

CGContextAddLineToPoint(ctx, 100, 300);

// 渲染

CGContextStrokePath(ctx);

 

* 图片裁剪

  1> 裁剪是Core Graphics的一项出色的功能特性,让你可以在任意形状中限制绘制操作。创建了一个剪辑区域,然后调用CGContextClip方法。以后的绘制动作都会被限定在那个区域中

    // 加载图片

    UIImage *iconView = [UIImage imageNamed:@"1"];

 

    // 获得上下文

    CGContextRef ctx = UIGraphicsGetCurrentContext();

    // CGContextSaveGState(ctx);

    CGRect frame = CGRectMake(100, 100, 100, 100);

    // 画圆

    CGContextAddEllipseInRect(ctx, frame);

    // 裁剪

    // CGContextClip该方法会将当前图形上下文中的路径裁剪出来,后面再往图形上下文绘制内容,如果内容超出裁剪区域,则不显示

    CGContextClip(ctx);

 

    [iconView drawInRect:frame];

    // CGContextRestoreGState(ctx);

 

    [iconView drawInRect:CGRectMake(10, 10, 50, 50)];

    // 渲染

    CGContextStrokePath(ctx);

 

5、自定义图层

 1、创建一个CALayer的子类,然后覆盖drawInContext:方法,使用Quartz2D API进行绘图

 // 在指定的图形上下文中绘制图层显示的内容。

 - (void)drawInContext:(CGContextRef)ctx {

     CGContextSetRGBFillColor(ctx, 1, 0, 0, 1);

     // 不能使用UIkit框架的类设置颜色。

     //[[UIColor orangeColor] set];

     CGContextAddEllipseInRect(ctx, CGRectMake(0, 0, 100, 100));

     CGContextFillPath(ctx);

 }

 >  在自定义layer中的-(void)drawInContext:方法不会自己调用,只能自己通过setNeedDisplay方法调用

 

 2、设置CALayer的delegate,然后让delegate实现drawLayer:inContext:方法,当CALayer需要绘图时,会调用delegate的drawLayer:inContext:方法进行绘图。

八、Quartz2D

标签:

原文地址:http://www.cnblogs.com/muqizi/p/4631760.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!