IOS开发(107)之Quartz 2D绘图
1 前言
使用Quartz 2D绘图时候,我们常会用到UIView的子类,想该类的drawRect:方法中添加Quartz函数调用。每次需要重绘视图时候都会调用该方法。
2 详述
在Quartz 2D中,和其他Core Graphics中一样,绘图是在图形上下文中进行的,通常,只称上下文。绘图时候,我们需要检索当前上下文,使用此上下文进行各种Quartz图形调用,并且让此上下文负责将图形呈现到视图上。
下面代码将检索当前上下文:
CGContextRef context = UIGraphicsGetCurrentContext();
Core Graphics和OpenGL都是基于C的API。
定义了图形上下文之后,可以将该上下文传递给各种Core Graphics绘图函数来绘制。例如绘制一条4像素宽的直线:
//创建当前路径的直线为4像素,可将其看做笔刷的大小,直到再次调用函数设置的一个不同的值前,所有的直线宽度都为4
CGContextSetLineWidth(context, 4.0);
//画笔设置为红色(包括比划颜色即轮廓的颜色,填充颜色用于填充形状)
CGContextSetStrokeColorWithColor(context, [UIColor redColor].CGColor);
//将当前路径的端点移动到该位置,无需实际绘制任何图形。
CGContextMoveToPoint(context, 10.0, 10.0);
//绘制一条线到(20,20)
CGContextAddLineToPoint(context, 20.0, 20.0);
//告知Quartz使用CGContextStrokePath绘制直线。
CGContextStrokePath(context);
2.1 坐标系
//将当前路径的端点移动到该位置,无需实际绘制任何图形。
CGContextMoveToPoint(context, 10.0, 10.0);
//绘制一条线到(20,20)
CGContextAddLineToPoint(context, 20.0, 20.0);
这些浮点数表示在Core Graphics坐标系中的位置。由x和y坐标表示,我们通常用(x,y)来表示。上下文左上角为(0,0)。向下移动的时候y增加,向右移动的时候,x增加。
最后我们绘制了一条(10,10)到(20,20)的对角线。
若要获得某一点应用CGPoint,如果获得对象大小,则使用CGSize。Quartz还声明一个名为CGRect的数据类型,它用于坐标系中定义矩形。CGRect包含两个元素,一个是名为origin的CGPoint,他确定矩形的左上角,另一个是名为size的CGSize,她确定矩形的宽度和高度。
2.2 颜色
UIKit提供了一个Objective-C类:UIColor。不能在Core Graphics调用中直接使用UIColor对象,因为UIColor是CGColor的包装器,所以可以像我们之前在以下代码片段中所做的一样,使用她的CGColor属性从UIColor实例中检索CGColor引用。
//画笔设置为红色(包括比划颜色即轮廓的颜色,填充颜色用于填充形状)
CGContextSetStrokeColorWithColor(context, [UIColor redColor].CGColor);
2.2.1 IOS设备显示的颜色理论
现代计算机中,通常用4个要素(即红色,绿色,蓝色(RGB颜色)模型和透明度)表示颜色。在Quartz 2D中,这些都是CGFloat类型,并且只能在0.0到1.0之间取值。
取之范围为0.0到1.0的浮点值通常被称为限定浮点变量,有时候简称限定变量。颜色值还有个透明度alpha,颜色模型为RGBA。
2.2.2 颜色便利方法
UIColor提供了许多便利方法,如果需要可以通过 return [UIColor colorWithRed:1.0f green:0.0f blue:0.0f alpha:1.0f]自定义颜色的值;
2.3 在上下文中绘制图像
使用Quartz 2D,可以在上下文中直接绘制图像。例如UIImage,方法:
(1)制定一个CGPoint来确定图像的左上角;
(2)或者制定一个CGRect来框住图像,并根据需要调整图像大小使其合适概况。
可以在上下文中绘制一个UIImage,如下:
CGPoint drawPoint = CGPointMake(100.0f, 100.0f);
[image drawAtPoint:drawPoint];
2.4 绘制形状:多边形,直线和曲线
Quartz 2D提供了许多函数,简化了复杂形状的创建。如:绘制椭圆,定义它所适合的矩形并且让Core Graphics执行以下任务:
//绘制椭圆
//检索当前上下文
CGContextRef context = UIGraphicsGetCurrentContext();
CGRect theRect = CGRectMake(0,0,100,100);
CGContextAddEllipseInRect(context, theRect);
CGContextDrawPath(context, kCGPathFillStroke);
运行结果:
直线:
椭圆:
3 结语
以上是所有内容,希望对大家有所帮助。
补充:移动开发 , IOS ,