Quartz2d从易到难全解析---贝塞尔曲线的绘制、上下文栈的概念、矩阵转换的使用

1.贝塞尔曲线（比较简单的）

/**

 *  绘制贝塞尔曲线

 */

/**

 *  绘制贝塞尔曲线

 */

void drawBeziercurve()

{

    //1.获得上下文

    CGContextRef context = UIGraphicsGetCurrentContext();

    //2.开始绘制贝塞尔曲线

    //<#CGContextRef c#> 上下文

    //<#CGFloat cpx#> 控制点的x坐标

    //<#CGFloat cpy#> 控制点的y坐标

    //<#CGFloat x#> 终点的X坐标

    //<#CGFloat y#> 终点的Y坐标

//    CGContextAddQuadCurveToPoint(<#CGContextRef c#>, <#CGFloat cpx#>, <#CGFloat cpy#>, <#CGFloat x#>, <#CGFloat y#>)

    

    

    //2.1起点（贝塞尔曲线需要一个起点）

    CGContextMoveToPoint(context, 100, 100);

    //设置控制点

    CGFloat controlX = 150;

    CGFloat controlY = 150;

    //设置终点

    CGFloat endX = 200;

    CGFloat endY = 100;

    //开始绘制

    CGContextAddQuadCurveToPoint(context, controlX, controlY, endX, endY);

    

    //3.显示绘制图形

    CGContextStrokePath(context);

}

 

这是贝塞尔曲线的绘制的几个要点。

2.介绍上下文栈的概念

首先介绍栈的概念，栈是一种先进后出的数据结构，通俗点说先存进去的东西会最后才可以拿出来使用。如果不明白这个概念，可以google一下。

上面讲的这些Quartz2d的绘图都只能使用同一种设置，意思就是当你的如果有两根线的时候，第一根设置了width为10，那么你的第二根线也相应来说也会变成10.那如果想得到一根宽度为10的线，一个为1的线怎么办？这就用到了上下文栈的概念。

我给大家解释一下，用Quartz2d画东西时，会先把设置（颜色字体大小等）保存到上线文中，并且把你要添加的图形（线段之类）也临时保存到上下文中。当调用CGContextStrokePath等之类的语句时，才会显示到View上去。如果此时你再画一个图像，那么上下文仍然会保存以前的设置，抹去以前你添加的图形，而用保存的设置去创建你要创建的那个图形。比如你创建了一个圆，那么颜色仍然为绿色，线宽仍然为10。当你再调用CGContextStrokePath时也就出现了一样的设置。

要解决这个问题，就出现了上下文栈这个概念，意思就是先把一份上下文copy一下，然后保存到栈中，就是上下文1，然后画线段拿到的上下文就是上下文2，同理，设置完显示到VIew上后，我们就把上下文栈的那个上下文1拿出来，销毁上下文2，这样就不会影响第二个图形的设置，因为上下文1是新的，里面没有设置任何东西。这时，你再设置颜色，比如红色，字体比如3，然后CGContextStrokePath后，显示到view上，就出现了两种不同的图形。

具体代码如下

3.矩阵变换

/**

 *  矩阵变换

 */

void drawMatrix()

{

    //获取上下文

    CGContextRef context = UIGraphicsGetCurrentContext();

    

    //保存上下文栈！！！此时把上下文copy了一份放到栈内

    CGContextSaveGState(context);

    

    //设置矩阵变换

    //设置旋转角度（45°）

    //    CGContextRotateCTM(context, M_PI_4);

    //设置图形的大小缩放

    //    CGContextScaleCTM(context, 0.5, 0.5);

    

    //设置平移

    CGContextTranslateCTM(context, 100, 100);

    

    //设置线宽

    CGContextSetLineWidth(context, 10);

    //画一个圆

    CGContextAddEllipseInRect(context, CGRectMake(50, 50, 100, 100));

    

    //画一个线段

    //设置线宽20；

    CGContextSetLineWidth(context, 20);

    CGContextMoveToPoint(context, 200, 200);

    CGContextAddLineToPoint(context, 260, 320);

    //显示出来

    CGContextStrokePath(context);

    

    

    //取出上下文栈！！！（销毁上下文2，拿出上下文1）

    CGContextRestoreGState(context);

    //画一个四边形

    CGContextAddRect(context, CGRectMake(50, 300, 50, 50));

    

    

    //显示出来

    CGContextStrokePath(context);

    

}

注意的是，矩阵变换要先写，先要在上下文中得设置里保存好，才会出现效果。