Quartz 2D 之 Paths

Path Creation and Path Painting 路径的创建于绘制

  路径的创建和绘制是分开的任务。首先你创建一个路径,然后你要求Quartz渲染这个路径完成绘制。你可以选择描边或者填充,或者两个一起。你也可以约束一个路径在创建的路径范围内,效果上实现剪裁。

The Building Blocks 路径构成

子路径通过直线、圆弧、曲线构成。Quartz2D还提供了方便的功能通过一个函数调用添加矩形和椭圆。点也是必不可少的构建块的路径,因为点定义了形状的开始和结束位置。

(1) °   Point点

可以通过调用方法CGContextMoveToPoint指定自路径的起点。

Quartz 保存你构建路径的最后一个点作为当前点,当你如果继续划线的的时候就从当前点开始,线,圆弧,曲线经常是从当前点开始绘制的。

(2)Lines 线

线 通过终点来定义。它的起点已经被假设为当前点,所以设定它的终点就可以通过方法CGContextAddLineToPoint 为 路径追加一条线。             

诺伊尔可以添加有关联的线通过调用这个方法CGContextAddLines.给这个方法传一组点,第一个点默认为第一条线的起始点,剩下的点是终点。Quartz绘制路径从第一个起点开始然后依次连接每个终点。

(3)Arcs 圆弧

圆弧 是圆的部分。Quartz提供了两个方法来创建圆弧,CGContextAddArc。这个方法创建一个圆的一部分。你可以指定圆心,半径,弧度。你也可以创建一个完整的圆指定弧度为2PI即可。

CGContextAddArcToPoint   这个方法 用于你想用个矩形框将圆角围起来的时候。提供重点Quartz创建切线,中心就是半径的焦点, 半径垂直于切线。如图3-5


Quartz 2D 之 Paths_第1张图片

注意:如果当前路径已经包含一个子路径,Quartz附加一条直线段从当前点到圆弧的起点。如果当前路径为空,石英弧创建一个新的子路径的起点和不添加初始直线段。

(4)Curves 曲线

二次、三次贝塞尔曲线代数曲线,可以指定任意数量的有趣的曲线形状。

这些曲线上的点通过应用一个多项式公式计算为开始和结束点,和一个或多个控制点。以这种方式定义的形状是矢量图形的基础。一个公式是更简洁的存储相比位数组,并有优势,可以重新创建在任何分辨率的曲线。
你可以通过CGContextAddCurveToPoint 从当前点,通过你指定的控制点和终点。

你可以通过CGContextAddQuadCurveToPoint,拼接贝塞尔曲线从当前点,指定控制点和终点。

4)Closing a Subpath 闭合路径

CGContextClosePath.通过这个方法可以关闭路径。关闭子路径后,如果你的应用要添加线,圆弧或曲线路径,Quartz开始一个新的子路径开始在你刚刚关闭的子路径的起点

             1°   Ellipses 椭圆  

             创建两个焦点,满足半径和相等即可。

             CGContextAddEllipseInRect.你也可以通过这方法创建椭圆,通过 矩形框设置椭圆,顺时针闭合。

             2°Rectangles  矩形框

             CGContextAddRect。可以通过这个方法添加矩形框。逆时针闭合
             CGContextAddRects 通过这个方法添加一组矩形框。

Creating a Path  创建路径

.CGContextBeginPath.表示开始进行Quartz绘制的信号,设置完起点后调用CGContextMoveToPoint.然后就可以添加线 曲线 等等。

需要用心记住以下几点:

    1.开始新的Path前,必须调用方法CGContextBeginPath

    2.在当前点绘制直线、圆弧和曲线。一个空的路径没有当前点;你必须调用CGContextMoveToPoint设置起点的第一路径或调用一个方便的功能,隐式完成。

   3.当你想关闭当前子路径在路径,调用函数CGContextClosePath子路径的起点。后续的路径调用开始一个新的子路径,即使你没有显式设置一个新的起点。

  4.当你绘制圆弧时,Quartz在当前点和圆弧的起点之间会画一条线。

  5.Quartz添加椭圆和矩形的路径时添加一个新的封闭路径。

  6.你必须调用一个绘画函数来填充或描边路径,因为创建一个路径而不是绘制路径。看SeePainting a Pathfor detailed information.

 在你  绘制完路径后,需要刷新上下文。当你不想失去你绘制的路径,尤其是这个路径很复杂以后还可能重用。基于这个原因,Quartz提供了两种可复用的数据类型,CGPathRef 和CGMutablePahtRef;Quartz提供了一系列的路径方法,路径方法操作的是路径而不是上下文。

路径方法:

              CGPathCreateMutable, which replacesCGContextBeginPath

              CGPathMoveToPoint, which replacesCGContextMoveToPoint

              CGPathAddLineToPoint, which replacesCGContextAddLineToPoint

              CGPathAddCurveToPoint, which replacesCGContextAddCurveToPoint

              CGPathAddEllipseInRect, which replacesCGContextAddEllipseInRect

              CGPathAddArc, which replacesCGContextAddArc

              CGPathAddRect, which replacesCGContextAddRect

              CGPathCloseSubpath, which replacesCGContextClosePath

当你为图形上下文添加路径,你调用函数CGContextAddPath。路径停留在图形上下文中,直到Quartz绘制它。你可以通过调用CGContextAddPath再次添加的路径。

注意点:你可以通过CGContextReplacePathWithStrokedPath这个方法替换上下文中的路径用描边过得路径。

Painting a Path  绘制路径。

描边的线  (宽度,颜色 等等)填充的颜色 Quartz用来计算填充区域的方法都是graphics state(图形状态)的一部分。

你可以设置路径描边的参数,这些参数是图形装填的一部分,这意味着在你重置这些参数之前后续的描边都会采用这些参数。


Quartz 2D 之 Paths_第2张图片

Functions for Stroking a Path 描边

Quartz 提供了下列表中的一些方法进行描边,一些方法在对矩形或者椭圆描边更加便捷。


Quartz 2D 之 Paths_第3张图片

当你调用CGContextStrokeLineSegments,你用数据包含的一对儿点指定线段,每队儿点包括起点和重点。例如数组里指定的第一个点是起点,第二个点是第一条线的终点。第三个点指定了第二条线的起点 ,等等。

Filling a Path 填充路径

当你填充路径时,Quartz默认路径包含的自路径是闭合的 ,然后使用这些闭合路径计算像素来填充。Quartz有两种方式来计算填充区域。像椭圆和矩形这些 简单的路径有非常明确的范围。但是假如你的路径是由重叠的片段或者多个子路径,如下图的同心圆,有两种规则决定怎么填充区域。这两种规则是:非零缠绕和奇偶缠绕。


Quartz 2D 之 Paths_第4张图片

Quartz 提供了下列表中的一些方法进行填充,一些方法在对矩形或者椭圆描边更加便捷。


Quartz 2D 之 Paths_第5张图片

    Setting Blend Modes 设置混合模式

 混合模式指定了怎么用Quartz在一个背景上进行绘制。默认情况下Quartz采用的是normal blend mode 。如何进行前景的绘制与背景的绘制采用下面的公式:

         result = (alpha * foreground) + (1 - alpha) * background

Color and Color Spaces 提供了更详细的讨论关于颜色组分 alpha,alpha指定了一个颜色的不透明度,例如,你可以假设一个颜色完全不透明,对于不透明的颜色,当你采用normal blend mode 进行绘制的时候,背景上不管你绘制什么都会完全覆盖背景。

你可以通过调用CGContextSetBlendMode 实现各种各种各样的效果,只要传递一个合适的blend mode。需要注意的是,blend mode 是图形状态的一部分。当你调用CGContextSaveGState前一步修改混合模式,然后可以调CGContextRestoreGState恢复到正常模式。

笔记:你也可以使用混合模式复合两张图片,或者把一张图片复合到已经被上下文绘制的内容上。Using Blend Modes with Images 提供了更多怎么使用blend 模式去复合图片,展示了复合到两张图片上的结果。

模式分类:

Normal Blend Mode  可以使用kCGBlendModeNormal调CGContextSetBlendMode方法在你使用完其他模式之后恢复到默认设置。

Multiply Blend Mode :call the functionCGContextSetBlendModewith the constantkCGBlendModeMultiply.

Screen Blend Mode :call the functionCGContextSetBlendModewith the constantkCGBlendModeScreen.

Overlay Blend Mode:call the function CGContextSetBlendMode with the constant kCGBlendModeOverlay.

Darken Blend Mode:call the functionCGContextSetBlendModewith the constantkCGBlendModeDarken.

Lighten Blend Mode:call the functionCGContextSetBlendModewith the constantkCGBlendModeLighten.

Color Dodge Blend Mode:call the functionCGContextSetBlendModewith the constantkCGBlendModeColorDodge.

Color Burn Blend Mode:call the functionCGContextSetBlendModewith the constantkCGBlendModeColorBurn.

Soft Light Blend Mode:call the functionCGContextSetBlendModewith the constantkCGBlendModeSoftLight.

Hard Light Blend Mode:call the functionCGContextSetBlendModewith the constantkCGBlendModeHardLight.

Difference Blend Mode:call the functionCGContextSetBlendModewith the constantkCGBlendModeDifference.

Exclusion Blend Mode:call the functionCGContextSetBlendModewith the constantkCGBlendModeExclusion.

Hue Blend Mode:call the functionCGContextSetBlendModewith the constantkCGBlendModeHue.

Saturation Blend Mode:call the functionCGContextSetBlendModewith the constantkCGBlendModeSaturation.

Color Blend Mode:call the functionCGContextSetBlendModewith the constantkCGBlendModeColor.

Luminosity Blend Mode:call the functionCGContextSetBlendModewith the constantkCGBlendModeLuminosity.

Clipping to a Path  路径剪裁

路径剪裁可以显示你想要显示的,比如一个很大的位图上显示你剪裁的区域。

需要注意的是 剪裁区域是图形状态的一部分,当你在剪裁之前需要保存图形状态,在你剪裁后恢复图形状态。

下面的代码片段展示剪裁一个圆形区域,其他的例子可以参考:(For another example, seeClip the Contextin the chapterGradients.


Quartz 2D 之 Paths_第6张图片


Quartz 2D 之 Paths_第7张图片

你可能感兴趣的:(Quartz 2D 之 Paths)