在上篇文章中,我们简单的理解了绘图上下文,今天我们来认识一下Quartz-2D中另一个重要的概念,路径(Paths)。

一、理解路径

路径定义了一个或多个形状,或是子路径。一个子路径可由直线,曲线,或者同时由两者构成。它可以是开放的,也可以是闭合的。一个子路径可以是简单的形状,如线、圆、矩形、星形;也可以是复杂的形状,如山脉的轮廓或者是涂鸦。图3-1显示了一些我们可以创建的路径。左上角的直线可以是虚线;直线也可以是实线。上边中间的路径是由多条曲线组成的开放路径。右上角的同心圆填充了颜色,但没有描边。左下角的加利福尼亚州是闭合路径,由许多曲线和直线构成,且对路径进行填充和描边。两个星形阐明了填充路径的两种方式,我们将详细描述。

二、创建及绘制路径

路径创建及路径绘制是两个独立的工作。首先我们创建路径。当我们需要渲染路径时,我们需要使用Quartz来绘制它。正如图3-1中所示,我们可以选择对路径进行描边,填充路径,或同时进行这两种操作。我们同样可以将其它对象绘制到路径所表示的范围内,即对对象进行裁减。
图3-2绘制了一个路径,该路径包含两个子路径。左边的子路径是一个矩形,右边的子路径是由直线和曲线组成的抽象形状。两个子路径都进行了填充及描边。

图3-3显示了多条独立绘制的路径。每个路径饮食随机生成的曲线,一些进行填充,另一些进行了描边。这些路径都包含在一个圆形裁减区域内。

三、构建块(Building Block)
子路径是由直线、弧和曲线构成的。Quartz同样也提供了简便的函数用于添加矩形或椭圆等形状。点也是路径最基本的构建块,因为点定义了形状的起始点与终止点。


点由x, y坐标值定义,用于在用户空间指定 一个位置。我们可以调用函数CGContextMoveToPoint来为新的子路径指定起始点。Quartz跟踪当前点,用于记录路径构建过程中最新的位置。例如,如果调用函数CGContextMoveToPoint并设置位置为(10, 10),即将当前点移动到位置(10, 10)。如果在水平位置绘制50个单位长度的直线,则直线的终点为(60, 10),该点变成当前点。直线、弧和曲线总是从当前点开始绘制。
通常我们通过传递(x, y)值给Quartz函数来指定一个点。一些函数需要我们传递一个CGPoint数据结构,该结构包含两个浮点值。

直线
直线由两个端点定义。起始点通常是当前点,所以创建直线时,我们只需要指定终止点。我们使用函数CGContextAddLineToPoint来添加一条直线到子路径中。
我们可以调用CGContextAddLines函数添加一系列相关的直线到子路径中。我们传递一个点数组给这个函数。第一个点必须是第一条直线的起始点;剩下的点是端点。Quartz从第一个点开始绘制一个新子路径,然后每两个相邻点连接成一条线段。


弧是圆弧段。Quartz提供了两个函数来创建弧。函数CGContextAddArc从圆中来创建一个曲线段。我们指定一个圆心,半径和放射角(以弧度为单位)。放射角为2 PI时,创建的是一个圆。图3-4显示了多个独立的路径。每个路径饮食一个自动生成的圆;一些是填充的,另一些是描边的。

函数CGContextAddArcToPoint用于为矩形创建内切弧的场景。Quartz使用我们提供的端点创建两条正切线。同样我们需要提供圆的半径。弧心是两条半径的交叉点,每条半径都与相应的正切线垂直。弧的两个端点是正切线的正切点,如图3-5所示。红色的部分是实际绘制的部分。

下面分别是画直线和圆弧的代码

直线:

   //    1. 获取一个与视图相关联的上下文
CGContextRef context = UIGraphicsGetCurrentContext(); // 2. 构建路径
// 2.1 设置上下文路径起点
CGContextMoveToPoint(context, , );
// 2.2 增加路径内容……
CGContextAddLineToPoint(context, , );
CGContextAddLineToPoint(context, , );
// 3. 保存上下文状态
// 4. 设置上下文状态
// 4.1 设置边线颜色
CGContextSetRGBStrokeColor(context, , , , );
// 4.2 设置线宽
CGContextSetLineWidth(context, );
// 4.3 设置线段连接样式
CGContextSetLineJoin(context, kCGLineJoinRound);
// 4.4 设置线段收尾样式
CGContextSetLineCap(context, kCGLineCapRound);
// 4.5 设置虚线样式
// 4. 绘制路径
CGContextDrawPath(context, kCGPathStroke);

圆弧:

    //    1. 获取一个与视图相关联的上下文
CGContextRef context = UIGraphicsGetCurrentContext(); [[UIColor redColor]set];
// 2. 添加弧线
// 2.1 上下文
// 2.2 中心点坐标
// 2.3 半径
// 2.4 开始角度,结束角度,角度的单位是“弧度”
CGContextAddArc(context, , , , M_PI, -M_PI_2, ); // 绘制路径
CGContextStrokePath(context);

曲线
二次与三次Bezier曲线是代数曲线,可以指定任意的曲线形状。曲线上的点通过一个应用于起始、终点及一个或多个控制点的多项式计算得出。这种方式定义的形状是向量图的基础。这个公式比将位数组更容易存储,并且曲线可以在任何分辨下重新创建。
图3-6显示了一些路径的曲线。每条路径包含一条随机生成的曲线;一些是填充的,另一些是描边的。

我们使用函数CGContextAddCurveToPoint将Bezier曲线连接到当前点,并传递控制点和端点作为参数,如图3-7所示。两个控制点的位置决定了曲线的形状。如果两个控制点都在两个端点上面,则曲线向上凸起。如果两个控制点都在两个端点下面,则曲线向下凹。如果第二个控制点比第一个控制点离得当前点近,则曲线自交叉,创建了一个回路。

我们也可以调用函数CGContextAddQuadCurveToPoint来创建Bezier,并传递端点及一个控制点,如图3-8所示。控制点决定了曲线弯曲的方向。由于只使用一个控制点,所以无法创建出如三次Bezier曲线一样多的曲线。例如我们无法创建出交叉的曲线

1     /*画贝塞尔曲线*/
//二次曲线
CGContextMoveToPoint(context, , );//设置Path的起点
CGContextAddQuadCurveToPoint(context,, , , );//设置贝塞尔曲线的控制点坐标和终点坐标
CGContextStrokePath(context);
//三次曲线函数
CGContextMoveToPoint(context, , );//设置Path的起点
CGContextAddCurveToPoint(context,, , , , , );//设置贝塞尔曲线的控制点坐标和控制点坐标终点坐标
CGContextStrokePath(context);

闭合路径
我们可以调用函数CGContextClosePath来闭合曲线。该函数用一条直接来连接当前点与起始点,以使路径闭合。起始与终点重合的直线、弧和曲线并不自动闭合路径,我们必须调用CGContextClosePath来闭合路径。
Quartz的一些函数将路径的子路径看成是闭合的。这些函数显示地添加一条直线来闭合 子路径,如同调用了CGContextClosePath函数。
在闭合一条子路径后,如果程序再添加直线、弧或曲线到路径,Quartz将在闭合的子路径的起点开始创建一个子路径。

椭圆
椭圆是一种特殊的圆。椭圆是通过定义两个焦点,在平面内所有与这两个焦点的距离之和相等的点所构成的图形。图3-9显示了一些独立的路径。每个路径都包含一个随机生成的椭圆;一些进行了填充,另一边进行了描边。

我们可以调用CGContextAddEllipseInRect函数来添加一个椭圆到当前路径。我们提供一个矩形来定义一个椭圆。Quartz利用一系列的Bezier曲线来模拟椭圆。椭圆的中心就是矩形的中心。如果矩形的宽与高相等,则椭圆变成了圆,且圆的半径为矩形宽度的一半。如果矩形的宽与高不相等,则定义了椭圆的长轴与短轴。
添加到路径中的椭圆开始于一个move-to操作,结束于一个close-subpath操作,所有的移动方向都是顺时针。

矩形
我们可以调用CGContextAddRect来添加一个矩形到当前路径中,并提供一个CGRect结构体(包含矩形的原点及大小)作为参数。
添加到路径的矩形开始于一个move-to操作,结束于一个close-subpath操作,所有的移动方向都是顺时针。
我们也可能调用CGContextAddRects函数来添加一系列的矩形到当前路径,并传递一个CGRect结构体的数组。图3-10显示了一些独立的路径。每个路径包含一个随机生成的矩形;一些进行了填充,另一边进行了描边。

四、创建路径

当我们需要在一个图形上下文中构建一个路径时,我们需要调用CGContextBeginPath来标记Quartz。然后,我们调用函数CGContextMovePoint来设置每一个图形或子路径的起始点。在构建起始点后,我们可以添加直线、弧、曲线。记住如下规则:

  • 在开始绘制路径前,调用函数CGContextBeginPath;
  • 直线、弧、曲线开始于当前点。空路径没有当前点;我们必须调用CGContextMoveToPoint来设置第一个子路径的起始点,或者调用一个便利函数来隐式地完成该任务。
  • 如果要闭合当前子路径,调用函数CGContextClosePath。随后路径将开始一个新的子路径,即使我们不显示设置一个新的起始点。
  • 当绘制弧时,Quartz将在当前点与弧的起始点间绘制一条直线。
  • 添加椭圆和矩形的Quartz程序将在路径中添加新的闭合子路径。
  • 我们必须调用绘制函数来填充或者描边一条路径,因为创建路径时并不会绘制路径。

在绘制路径后,将清空图形上下文。我们也许想保留路径,特别是在绘制复杂场景时,我们需要反复使用。基于此,Quartz提供了两个数据类型来创建可复用路径—CGPathRef和CGMutablePathRef。我们可以调用函数CGPathCreateMutable来创建可变的CGPath对象,并可向该对象添加直线、弧、曲线和矩形。Quartz提供了一个类似于操作图形上下文的CGPath的函数集合。这些路径函数操作CGPath对象,而不是图形上下文。这些函数包括:

  • CGPathCreateMutable,取代CGContextBeginPath
  • CGPathMoveToPoint,取代CGContextMoveToPoint
  • CGPathAddLineToPoint,取代CGContexAddLineToPoint
  • CGPathAddCurveToPoint,取代CGContexAddCurveToPoint
  • CGPathAddEllipseInRect,取代CGContexAddEllipseInRect
  • CGPathAddArc,取代CGContexAddArc
  • CGPathAddRect,取代CGContexAddRect
  • CGPathCloseSubpath,取代CGContexClosePath

如果想要添加一个路径到图形上下文,可以调用CGContextAddPath。路径将保留在图形上下文中,直到Quartz绘制它。我们可以调用CGContextAddPath再次添加路径。

五、绘制路径

我们可以绘制填充或描边的路径。描边(Stroke)是绘制路径的边框。填充是绘制路径包含的区域。Quartz提供了函数来填充或描边路径。描边线的属性(宽度、颜色等),填充色及Quartz用于计算填充区域的方法都是图形状态的一部分。

影响描边的属性
我们可以使用表3-1中的属性来决定如何对路径进行描边操作。这边属性是图形上下文的一部分,这意味着我们设置的值将会影响到后续的描边操作,直到我们个性这些值。

linewidth是线的总宽度,单位是用户空间单元。
linejoin属性指定如何绘制线段间的联接点。Quartz支持表3-2中描述的联接样式。

Table 3-2 直线联接样式

linecap指定如何绘制直线的端点。Quartz支持表3-3所示的线帽类型。默认的是butt cap。

闭合路径将起始点看作是一个联接点;起始点同样也使用选定的直线连接方法进行渲染。如果通过添加一条连接到起始点的直线来闭合路径,则路径的两个端点都使用选定的线帽类型来绘制。
Linedash pattern(虚线模式)允许我们沿着描边绘制虚线。我们通过在CGContextSetLineDash结构体中指定虚线数组和虚线相位来控制虚线的大小及位置。

CGContextSetLineDash结构如下:

 void CGContextSetLineDash (
CGContextRef ctx,
float phase,
const float lengths[],
size_t count,
);

其中lengths属性指定了虚线段的长度,该值是在绘制片断与未绘制片断之间交替。phase属性指定虚线模式的起始点。图3-11显示了虚线模式:

路径描边的函数
Quartz提供了表3-4中的函数来描边当前路径。其中一些是描边矩形及椭圆的便捷函数。
表3-4 描边路径函数

函数CGContextStrokeLineSegments等同于如下代码

 CGContextBeginPath(context);                                                                                                                                                                                                                                                                 for(k = ; k < count; k += ) {                                                                                                                                                                                                                                                                                  CGContextMoveToPoint(context,s[k].x, s[k].y); CGContextAddLineToPoint(context,s[k+].x, s[k+].y);}CGContextStrokePath(context);

当我们调用CGContextStrokeLineSegments时,我们通过点数组来指定线段,并组织成点对的形式。每一对是由线段的起始点与终止点组成。例如,数组的第一个点指定了第一条直线的起始点,第二个点是第一条直线的终点,第三个点是第二条直线的起始点,依此类推。

六、填充路径
当我们填充当前路径时,Quartz将路径包含的每个子路径都看作是闭合的。然后,使用这些闭合路径并计算填充的像素。 Quartz有两种方式来计算填充区域。椭圆和矩形这样的路径其区域都很明显。但是如果路径是由几个重叠的部分组成或者路径包含多个子路径(如图3-12所示),我们则有两种规则来定义填充区域。
默认的规则是非零缠绕数规则(nonzero windingnumber rule)。为了确定一个点是否需要绘制,我们从该点开始绘制一条直线穿过绘图的边界。从0开始计数,每次路径片断从左到右穿过直线是,计数加1;而从右到左穿过直线时,计数减1。如果结果为0,则不绘制该点,否则绘制。路径片断绘制的方向会影响到结果。图3-13显示了使用非缠绕数规则对内圆和外圆进行填充的结果。当两个圆绘制方向相同时,两个圆都被填充。如果方向相反,则内圆不填充。
我们也可以使用偶数-奇数规则。为了确定一个点是否被绘制,我们从该点开始绘制一条直线穿过绘图的边界。计算穿过该直线的路径片断的数目。如果是奇数,则绘制该点,如果是偶数,则不绘制该点。路径片断绘制的方向不影响结果。如图3-12所示,无论两个圆的绘制方向是什么,填充结果都是一样的。

Quartz提供了表3-5中的函数来填充当前路径。其中一些是填充矩形及椭圆的便捷函数。
表3-5 填充路径的函数

好,说了这么多下面上代码

 - (void)drawLine1
{
// 1. 获取一个与视图相关联的上下文
CGContextRef context = UIGraphicsGetCurrentContext(); // 2. 创建一个可变路径
// 2.1 创建路径
CGMutablePathRef path = CGPathCreateMutable();
// 2.2 设置路径起点
CGPathMoveToPoint(path, NULL, , );
// 2.3 增加路径内容……
CGPathAddLineToPoint(path, NULL, , );
CGPathAddLineToPoint(path, NULL, , );
// CGPathAddLineToPoint(path, NULL, 50, 50);
// 闭合路径,关闭路径,闭合路径是收尾相连的
CGPathCloseSubpath(path); // 3. 将路径添加到上下文;
CGContextAddPath(context, path); // 4. 设置上下文状态
// 4.1 设置边线颜色
// 颜色数值 = RGB数值 / 255
CGContextSetRGBStrokeColor(context, 255.0 / 255.0, 0.0, 0.0 , 1.0);
// 4.2 设置填充颜色
CGContextSetRGBFillColor(context, 0.0, 0.0, 128.0 / 255.0, 1.0);
// 4.3 设置线宽
CGContextSetLineWidth(context, );
// 4.4 设置线段连接样式
CGContextSetLineJoin(context, kCGLineJoinBevel);
// 4.5 设置线段首尾样式
CGContextSetLineCap(context, kCGLineCapRound);
// 4.6 设置虚线样式
// lengths 设置公有几条虚线,每条虚线的长度
// count 指的是lengths数组的长度
CGFloat lengthes[] = {10.0, 10.0};
CGContextSetLineDash(context, , lengthes, );
// 5. 绘制路径
/**
kCGPathStroke 绘制边线
kCGPathFill 填充
*/
CGContextDrawPath(context, kCGPathFillStroke);
// 6. 释放路径,不同对象对应着不同的release方法
CGPathRelease(path);
}

七、裁剪路径

当前裁剪区域是从路径中创建,作为一个遮罩,从而允许遮住我们不想绘制的部分。例如,我们有一个很大的图片,但只需要显示其中一小部分,则可以设置裁减区域来显示我们想显示的部分。

当我们绘制的时候,Quartz只渲染裁剪区域里面的东西。裁剪区域内的闭合路径是可见的;而在区域外的部分是不可见的。

当图形上下文初始创建时,裁减区域包含上下文所有的可绘制区域(例如,PDF上下文的media box)。我们可以通过设置当前路径来改变裁剪区域,然后使用裁减函数来取代绘制函数。裁剪函数与当前已有的裁剪区域求交集以获得路径的填充区域。因此,我们可以求交取得裁减区域,缩小图片的可视区域,但是不能扩展裁减区域。

裁减区域是图形状态的一部分。为了恢复先前的裁减区域,我们可以在裁减前保存图形状态,并在裁减绘制后恢复图形状态。

 Listing - Setting up a circular clip area
CGContextBeginPath(context);
CGContextAddArc(context, w/, h/, ((w>h) ? h : w)/, , *PI, );
CGContextClosePath(context);
CGContextClip(context);

表3-6 裁减图形上下文的函数

Quartz-2D绘图之路径(Paths)详解的更多相关文章

  1. Quartz-2D绘图之图形上下文详解

    上一篇文章大概描述了下Quartz里面大体所包含的东西,但是对具体的细节实现以及如何调用相应API却没有讲.这篇文章就先讲讲图形上下文(Graphics Context)的具体操作. 所谓Graphi ...

  2. Quartz 2d绘图

    今天看了一下Quartz 2D绘图,我只想说:不要把绘图和动画那些东西当做一个很复杂的东西,其实只要你认真看还是可以理解的.他们并不难.啰嗦了几句,现在直接进入正题: 前提是我们必须新建一个singl ...

  3. iOS基础 - Quartz 2D绘图的基本步骤

    一.使用Quartz 2D绘图的基本步骤 1) 获取上下文context(绘制图形的地方) 2) 设置路径(路径是用来描述形状的) 3)  将路径添加到上下文 4)  设置上下文属性(设置颜色,线宽, ...

  4. iOS基础 - Quartz 2D绘图

    一.Quartz 2D Quartz 2D是一个二维图形绘制引擎,支持iOS环境和Mac OS X环境. Quartz 2D以PDF的规范为基础的图形库,用来绘制二维文字和图形,允许相同的绘图指令在任 ...

  5. Core Graphics框架 利用Quartz 2D绘图

    首先,什么是Core Graphics和Quartz 2D? Core Graphics:是基于Quartz 2D绘图引擎的一个C语言的API绘图框架.它也是iOS开发中最基本的框架(Framewor ...

  6. iOS 2D绘图详解(Quartz 2D)之路径(点,直线,虚线,曲线,圆弧,椭圆,矩形)

    前言:一个路径可以包含由一个或者多个shape以及子路径subpath,quartz提供了很多方便的shape可以直接调用.例如:point,line,Arc(圆弧),Curves(曲线),Ellip ...

  7. 关于Quartz 2D绘图的简单使用

    Quartz 2D是一个二维图形绘制引擎,支持iOS环境和Mac OS X环境,Quartz 2D的API可以实现许多功能,如:基于路径的绘图.透明度.阴影.颜色管理.反锯齿.PDF文档生成和PDF元 ...

  8. Python绘图之Turtle库详解(1)

    Turtle库是Python语言中一个很流行的绘制图像的函数库,想象一个小乌龟,在一个横轴为x.纵轴为y的坐标系原点,(0,0)位置开始,它根据一组函数指令的控制,在这个平面坐标系中移动,从而在它爬行 ...

  9. Quartz.net开源作业调度框架使用详解

    前言 quartz.net作业调度框架是伟大组织OpenSymphony开发的quartz scheduler项目的.net延伸移植版本.支持 cron-like表达式,集群,数据库.功能性能强大更不 ...

随机推荐

  1. android学习——环境搭建之HelloWorld

    一.在开始Android开发之旅启动之前,首先要搭建环境,然后创建一个简单的HelloWorld.本文的主题如下: 1.1.JDK安装 1.2.Eclipse安装 1.3.Android SDK安装 ...

  2. 用vmware安装gho文件

    方法1:diskgenius+ghostexp 用vm新建一个空白硬盘虚拟机, 记住虚拟机文件的存储位置, 最好将默认的scsi硬盘移除另外新建ide的硬盘(否则可能开机蓝屏),然后用host机DIS ...

  3. B. Fixed Points

    B. Fixed Points time limit per test 2 seconds memory limit per test 256 megabytes input standard inp ...

  4. InetAddress Example program in Java

    The InetAddress class has no visible constructors. To create an InetAddress object, you have to use ...

  5. 读取txt正则匹配行写入txt

    StreamReader sr = new StreamReader("C:\\Users\\Administrator\\Desktop\\blogbbs\\dd.txt",En ...

  6. Zookeeper3.4.6部署伪分布集群(Apache)

    1.下载Zookeeper http://mirrors.cnnic.cn/apache/zookeeper/zookeeper-3.4.6/ 2.创建/usr/app/zookeeper目录,并切换 ...

  7. one problem about Apple Keychain in use

    解决方案 Add Security.framework, then rebuild. Sometimes I find I have to build clean and then rebuild. ...

  8. xcode语法高亮插件

    转自http://www.cocoachina.com/bbs/read.php?tid=150107 首先感谢该楼主的亲情贡献@不胜感激! 在Xcode4.6.3中,我使用如下方法放到Plugins ...

  9. android智能天气闹钟应用开发经过

    开发这个应用的初衷是这样产生滴,和我一块租房的同学每天早上都是骑单车上班,所以手机闹钟就会定一个刚好适合骑车的起床时间点.但是呢,有一天早上起床以后发现外面下挺大雨,肯定是不能骑车去上班了,于是就只好 ...

  10. ASP.NET Web API(一):使用初探,GET和POST数据

    概述 REST(Representational State Transfer表述性状态转移)而产生的REST API的讨论越来越多,微软在ASP.NET中也添加了Web API的功能 项目建立 在安 ...