Quartz 2D指南3——paths

 

 

一个path有一个或者多个shapes，或者subpaths定义。一个subpath可以包含直线段，曲线或者都有。其可以是开的或者封闭的。subpath可以是一个简单的形状，如line，circle，rectangle，star，或者其他更复杂的形状，下图展示了我们可以创建的形状。直线可以是虚的，也可以是实的。

    在本篇中，将介绍如何构造path，如何stroke和paint path，以及参数影响path的表现形式。

1.path的创建和path的painting

      path的创建和path的painting是独立的任务。首先创建一个path，当想要去显示时，要请求Quartz去paint。如下图，我们可以选择path的stroke，path的fill。我们也可以使用path去限制其他对象drawing的范围，此称为clipping area。

      下图展示了一个path，包含两个subpaths。

下图的圆形区域就是一个clipping area。

2. the building blocks

subpaths是由lines，arcs，curves组建成的，Quartz也提供了一些方便的函数用于添加矩形和椭圆。

（1）points

我们可以调用函数CGContextMoveToPoint去指定一个新的subpath的开始位置。Quratz会保存当前点的记录。例如，如果我们调用函数CGContextMoveToPoint去设置位置（10，10）,则current point就为（10，10）。如果我们接着在水平方向绘制50像素，则line的最后点为（60，10），此点也变成了current point。绘制line，arcs，curve都是从current point开始的。

（2）Lines

一个line定义了他的endpoint，line的开始点为current point。所以当我们创建一个line时，我们只用指定他的endpoint。我们用函数CGContextAddLineToPoint去在subpath上添加一条线。

  我们可以通过调用函数CGContextAddLines去添加一系列lines。我们传递一个point数组给此函数，第一个点为开始点。

（3）Arcs

Arcs是圆的一部分。Quratz提供了两个函数用来创建arcs。函数CGContextAddArc用来从一个圆中创建一个曲线段。

函数CGContextAddArcToPoint是一个理想的方法用来圆一个矩形的角。Quratz使用我们提供的endpoint去创建两个切线。

（4）curves

Quadratic 和Bezier 曲线可以指定很多形状的曲线。应用多项式去计算曲线上的点，需要用到起点，终点，以及一个或者多个control 点。

      使用函数CGContextAddCurveToPoint去使用一个三次Bezier 曲线，要我们指定control point和endpoint。下图是一个三次的Bezier曲线，有两个控制点。两个控制点的定义了曲线的几何形状。如果两个控制点都在起点和终点的下面，则则曲线向上供。如果第二个控制点相比第一个控制点更接近起点，则曲线会构成一个循环。

     使用函数CGContextAddQuadCurveToPoint去使用添加一个二次Bezier曲线，要我们指定一个control point和endpoint。下图展示了相同的endpoint，不同的control point的结果。control point定义了曲线的供的方向。利用二次Bezier曲线不可能创造用三次Bezier曲线那么多的有趣的曲线。例如，用二次不可能创造一个交叉的曲线。

（5）closing a subpath

      应用程序应该调用CGContextClosePath去关闭current subpath。此函数会在current point和subpath的开始点之间添加一条直线段。line，arc，curve经常不会关闭subpath。

      当closing 一个subpath之后，如果应用程序又添加一个额外的line，arcs或者其他的，Quartz会开始一个新的subpath。

（6）ellipses

     可以在current path 下通过调用函数CGContextAddEllipseInRect：添加一个椭圆。我们可以定义一个矩形，去指定椭圆的范围。Quartz使椭圆去用Bezier曲线。

     

（7）Rectangles

   通过调用函数CGContextAddRect去在current path下添加一个矩形。

3.创建path。

当我们在graphics context下创建一个path，可应该先调用Quartz的函数CGContextBeginPath，接着设置第一个shape或者subpath的开始点，在path中调用函数CGContextMoveToPoint。当初始点设置好以后，就可以添加lines，arcs，curves，但要注意一下几点：

（1）在开始新的path之前，要调用函数CGContextBeginPath。

（2）lines，arcs，curves都是从current point开始绘制，一个空的path没有current point，我们必须调用CGContextMoveToPoint去设置或者调用一个函数隐含的设置了当前值。

（3）调用函数CGContextClosePath去关闭current subpath。接下来会开始一个新的subpath，即时我们不去那个设置开始点。

（4）当我们绘制一个arcs时，Quratz会在current point 和start point之间绘制一条直线。

（5）创建一个path不等于绘制path，所以我们必须调用paint 函数去fill 或者stroke path。

    当我们paint一个path之后，graphics context会被刷新，但是我们有些时候不想就失去此path，特别是在一些复杂的场景下我们想多次用到。出于此原因，Quartz提供了两个数据类型用于创建可重复用的path（CGPathRef和CGMutablePathRef）。我们可以调用函数CGPathCreateMutable去创建一个可变的CGPath对象，然后去添加lines，arcs，curves等。

4.Paint path

影响stroking的参数

下表就是这些参数，这些参数是graphics state的一部分

Parameters that affect how Quartz strokes the current path

Parameter

Function to set parameter value

Line width	CGContextSetLineWidth
Line join	CGContextSetLineJoin
Line cap	CGContextSetLineCap
Miter limit	CGContextSetMiterLimit
Line dash pattern	CGContextSetLineDash
Stroke color space	CGContextSetStrokeColorSpace
Stroke color	CGContextSetStrokeColorCGContextSetStrokeColorWithColor
Stroke pattern	CGContextSetStrokePattern

stroking path的函数

Functions that stroke paths

Function

Description

CGContextStrokePath	Strokes the current path.
CGContextStrokeRect	Strokes the specified rectangle.
CGContextStrokeRectWithWidth	Strokes the specified rectangle, using the specified line width.
CGContextStrokeEllipseInRect	Strokes an ellipse that fits inside the specified rectangle.
CGContextStrokeLineSegments	Strokes a sequence of lines.
CGContextDrawPath	If you pass the constant kCGPathStroke, strokes the current path. See “Filling a Path” if you want to both fill and stroke a path.

函数CGContextStrokeLineSegments等同于下面的代码：

CGContextBeginPath (context);

for (k = 0; k < count; k += 2) {

    CGContextMoveToPoint(context, s[k].x, s[k].y);

    CGContextAddLineToPoint(context, s[k+1].x, s[k+1].y);

}

CGContextStrokePath(context);