UIKit与Quartz2D绘图技术

来源:互联网 发布:mac 怎么恢复u盘的文件 编辑:程序博客网 时间:2024/04/30 20:51

在iOS上绘图技术包括UIKit、Quartz2D、Core Animation和OpenGL ES。其中Core Animation提供动画实现技术,OpenGL ES针对嵌入式设备的简化版本,用来绘制高性能的2D和3D图形。UIKit是高级别的图形借口,他的API是Objective-C的,能够访问绘图、动画、字体、图片等信息。Quratz2D是iOS中的绘图引擎,设计内容有:基于路径绘制,透明度绘图,遮盖,阴影,透明层,颜色管理,防锯齿渲染,生成PDF,以及PDF元数据相关处理。

绘制视图周期

在iOS上绘制图形是比较麻烦的。首先需要为需要绘制的视图或者视图的部分区域设置一个需要绘制的标志,在一个时间循环的每一轮中,绘图引擎会检查是否有需要更新的内容,如果有的话就会调用视图的drawRect:方法进行绘制,因此,绘制视图我们需要重写drawRect:方法。
一旦drawRect:方法被调用,就可以使用技术对视图进行绘制了。
在绘图过程中我们还可以是用setNeedsDisplay和setNeedsDisplayInRect:方法设置视图或者视图部分区域是否需要进行重绘。
另外出发一些动作也会引发绘图重新绘制:1.当遮挡你的视图的其他视图被移动或删除操作的时候。2.将视图的hidden属性声明设置为No,使其从隐藏状态转变为可见状态时。3.讲视图滚出屏幕然后再重新回到屏幕的时候。4.显示调用setNeedsDisplay或者setNeedsDisplayInRect:方法

填充和描边

UIKit提供基本的绘图功能,主要的API有:
UIRectFill(CGRect rect),填充矩形函数。
UIRectFrame(CGRect rect),举行描边函数。
UIKit也提供了UIBezierPath类来绘制一般的路径。但事实上感觉对于一些其他特性的支持不如Qurazt2D。

使用介绍

-(void)drawRect:(CGRect rect){    [[UIColor redColor]setFill];//设置填充颜色    UIRectFill(rect);//填充矩形    [[UIColor blackColor]setStroke];//设置画笔颜色    CGRect frame = CGRectMake(100,100,100,100);    UIRectFrame(rect);//矩形描边}

绘制图像和文本

除了可以绘制几何图形之外,我们也可以绘制一些图像和文本
对应方法

//UIImage绘制方法- (void)drawAtPoint:(CGPoint)point;//设置绘图定点- (void)drawInRect:(CGRect)rect;//图片绘制在指定图形内- (void)drawAsPatternInRect:(CGRect)rect; //在指定的矩形内绘制图片,如果图片大小超过矩形框就会和drawAtPoint:方法类似。否则就会产生平铺效果//文本绘制方法- (void)drawAtPoint:(CGPoint)point withAttributes:(NSDictionary *)attrs;- - (void)drawInRect:(CGRect)rect withAttributes:(NSDictionary *)attrs 

Quartz图形上下文

图形上下文就相当于我们的手,要绘制东西,首先得有一双手。例如上面[[UIColor redColor]setStroke]就是用手拿起一只黑色画直线的笔。在图形上下文我们还可以设置很多变量从而改变绘制方式。
CGContextRef context = UIGraphicsGetCurrentContext()j就是创建上下文对象;

Quartz路径

在绘制复杂的图形的时候使用到路径。下面是路径方法

CGContextMoveToPoint(CGContextRef, CGFloat x, CGFloat y)CGContextAddLineToPoint(CGContextRef c, CGFloat x, CGFloat y)CGContextClosePath(CGContextRef c)CGContextDrawPath(CGContextRef c, CGPathDrawingMode mode)

等等

我们在用路径绘制矩形、园以及其他的2D几何图形的时候。通过路径可以对这些几何图形进行描边,填充和面变填充处理。CoreGraphics(Quarzt 2D)中有4个描述路径:点、线段、弧、贝塞尔曲线。

1.点
点是二维空间中的一个位置,不要把他想象成一个像素,一个点完全不占空间,所以画一个点不会在屏幕上现实任何东西,我们可以在路径上加入很多点。
2.线段
线段由两个点定义:起点和终点。线段可以通过描边绘制出来,我们可以通过设置图行上下文,如画壁的宽度或者颜色等参数,就可以绘制出两点之间的线段。线段没有面积,它们不能被填充,我们可以用一组限度或者曲线组成一个闭合路径的集合图形,然后填充它。
3.弧
弧可以是一个圆心点、半径、起始角和结束角描述的。园是弧的特例,只需要设置为起始角为0度,结束角为360度就可以了。因为弧是有一定面积的,所以可以被填充、描边和描边填充出来。
4.贝塞尔曲线
贝塞尔曲线是发过数学家贝塞尔发现的,任何一条曲线都可以通过与它的相切的控制线两段点的位置来定义。因此,贝塞尔曲线可以用4个点来描述,其中两个点描述两个端点,另外两个描述每一端的切线。贝塞尔曲线可以氛围:二次贝塞尔曲线和高阶贝塞尔曲线。

-(void)drawRect:(CGRect)rect{    CGContextRef context = UIGraphicsGetCurrentContext();    CGContextMoveToPoint(context, 330, 0);    CGContextAddCurveToPoint(context, 330, 0, 332, 26, 330, 26);    CGContextAddCurveToPoint(context, 330, 26, 299, 20, 299, 17);    CGContextAddLineToPoint(context, 296, 17);    CGContextAddCurveToPoint(context, 296, 17, 296, 19, 291, 19);    CGContextAddLineToPoint(context, 250, 19);    CGContextAddCurveToPoint(context, 250, 19, 241, 24, 238, 19);    CGContextAddCurveToPoint(context, 236, 20, 234, 24, 227, 24);    CGContextAddCurveToPoint(context, 220, 24, 217, 19, 216, 19);    CGContextAddCurveToPoint(context, 214, 20, 211, 22, 207, 20);    CGContextAddCurveToPoint(context, 207, 20, 187, 20, 182, 21);    CGContextAddLineToPoint(context, 100, 45);    CGContextAddLineToPoint(context, 97, 46);    CGContextAddCurveToPoint(context, 97, 46, 86, 71, 64, 72);    CGContextAddCurveToPoint(context, 42, 74, 26, 56, 23, 48);    CGContextAddLineToPoint(context, 9, 47);    CGContextAddCurveToPoint(context, 9, 47, 0, 31, 0, 0);    CGContextStrokePath(context);}
void CGContextAddCurveToPoint(CGContextRef c, CGFloat cp1x,//第一控制点x坐标CGFloat cp1y,//第一控制点x坐标CGFloat cp2x,//第一控制点x坐标CGFloat cp2y, //第一控制点y坐标CGFloat x, //结束点x坐标CGFloat y)//结束点y坐标

坐标系

UIKit和Quartz2D两个坐标系是不一样的。UIKit坐标系原点在左上角,二Quartz2D坐标系在左下角。

- (void)drawRect:(CGRect)rect {    NSString *path = [[NSBundle mainBundle]pathForResource:@"1" ofType:@"jpg"];    UIImage *ima = [UIImage imageWithContentsOfFile:path];    CGImageRef image = ima.CGImage;    CGContextRef context = UIGraphicsGetCurrentContext();    CGContextSaveGState(context);    //    CGContextTranslateCTM(context, 0, ima.size.height);//平移   //    CGContextScaleCTM(context, 1, -1);//缩放   //    CGContextRotateCTM(context, radians(45.));//旋转        CGRect touchRect = CGRectMake(0, 0, rect.size.width, ima.size.height);    CGContextDrawImage(context, touchRect, image);    CGContextRestoreGState(context);}

这里写图片描述

0 0