| iOS

绘图的基础学

在Mac OS X中兼容很多种绘图技术,例如Quartz, OpenGL, Core Image, Core Video, Quartz Composer, PDF Kit, and QuickTime，iphone中主要通过OpenGL, Quartz, UIKit, or Core Animation来绘图。Quartz会自动开启图形加速，是当前应用最广泛的绘图技术。Application Kit framework (AppKit.framework)框架中包含了从原始图形,到复杂图形的一系列的类和方法，而它就是基于Quartz的。

Quartz有时候也认为是CoreGraphics。共有两种部分组成，Quartz Compositor（合成视窗系统，管理和合成幕后视窗影像来建立Mac OS X使用者接口）和Quartz 2D（是iOS和Mac OS X环境下的二维绘图引擎）。Quartz采用的是Painter’s Model,就是说图画会一层一层的覆盖上去,后面画上去的会修改或者覆盖前面已经画好的。UIKit 是非线程安全的,所以最好把所有的绘图都放在主线程上执行。不管使用的哪个技术来绘图,所有的绘图都是在 UIView object 中进行, view决定绘图在那里进行。

view绘图介绍

绘图环境包含了两个东西，一是画布,决定了你在什么地方进行绘画；二是图形设置,决定颜色,大小,质量和方向。图形上下文(Graphics Context) 就是画图的目的,大多图形上下文都在主线程上,当然为了更好的完成画图,也可以在辅助线程上。大多数情况下,cocoa都会在你绘图前为你创建好和配置好图形上下文。图形上下文封装了所有的在画布上的绘图信息,包括当前绘画属性。Graphics Context大多用在window和在window上面的view, 每一个window或者view都有一个图形上下文。

当一个view需要更新某一部分内容的时候,view会请求 drawRect: 方法，在view第一次请求drawRect方法的时候,传递的rectangle 参数一般是view的整个rectangle ,后续更新的时候,传递的一般是需要更新的那部分rectangle 。当请求了一个 drawRect:方法,view会标志自己已经被更新了,然后等待下一个更新请求的到达。

当请求drawRect:方法 ,view object会自动配置图形环境,作为环境的一部分,UIView会创建一个图形上下文，图形上下文定义基本图形属性，如颜色，剪切区域，线的宽度和样式信息，字体信息，合成选项等。也可以自己创建图形上下文用 CGBitmapContextCreate 或者CGPDFContextCreate 函数。需要注意的是,自己创建的图形上下文的原点是在左下角。

下面几种情况下,view会重新绘图:
1.移动或者移除另外一个view
2.设置view的hidden 属性为NO, view重新出现
3.滚动view,当滚出或者滚进来的时候
4.明确的请求setNeedsDisplay和setNeedsDisplayInRect:方法

绘图使用

- (void)drawRect:(CGRect)rect
{
CGContextRef context = UIGraphicsGetCurrentContext(); // 获得图形上下文

// 构建描绘路径
CGContextMoveToPoint(context, 100, 100);
CGContextAddLineToPoint(context, 100, 200);
CGContextAddLineToPoint(context, 240, 220);

//闭合描绘路径
CGContextClosePath(context);

[[UIColor blackColor] setStroke]; // 为闭合路径描边
[[UIColor redColor] setFill];// 设置要填充颜色

CGContextDrawPath(context, kCGPathFillStroke);// 设置描绘路径方式
}

路径用于描述由一序列线和Bézier曲线构成的2D几何形状。 Bézier曲线是法国数学家“贝塞尔”在工作中发现，任何一条曲线都可以通过与它相切的控制线两端的点的位置来定义。Core Graphics中也有一些用于创建简单路径（比如矩形和椭圆形）的便利函数。对于更为复杂的路径，必须用Core Graphics框架提供的函数自行创建。

CGContextAddCurveToPoint(cgContext, 333, 0, 332, 26, 330, 26); // Bézier曲线

结果如下：

Quartz技术最开始为Mac OS X系统设计的图形技术，它的坐标原点位于左下角。UIKit坐标与Quartz不同，原点位于左上角。Quartz 2D和UIKit的坐标系是在Y轴方向上的镜像。

UIImage *img = [UIImage imageNamed:@"catjump_015"];

[img drawAsPatternInRect:CGRectMake(0, 0, img.size.width, img.size.height)]; // 此时画出来的图片是正的。

- (void)drawRect:(CGRect)rect {

UIImage *img = [UIImage imageNamed:@"catjump_015"];

CGImageRef image = img.CGImage;

CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSaveGState(context); // 将当前图形状态要入到图形堆栈

CGContextRotateCTM(context, radians(180.)); //顺时针旋转180度
CGContextScaleCTM(context, -1, 1); // 水平旋转
CGContextTranslateCTM(context, 0, -img.size.height); //调整位置偏移


CGRect touchRect = CGRectMake(0, 0, img.size.width, img.size.height);
CGContextDrawImage(context, touchRect, image); // 在上下文中绘制图形
CGContextRestoreGState(context); // 回复当前图形状态


}

图解