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附加一条直线段从当前点到圆弧的起点。如果当前路径为空,石英弧创建一个新的子路径的起点和不添加初始直线段。

(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(图形状态)的一部分。

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


Functions for Stroking a Path 描边

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


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

Filling a Path 填充路径

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


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


    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.




最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,602评论 6 481
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,442评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 152,878评论 0 344
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,306评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,330评论 5 373
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,071评论 1 285
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,382评论 3 400
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,006评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,512评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,965评论 2 325
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,094评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,732评论 4 323
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,283评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,286评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,512评论 1 262
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,536评论 2 354
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,828评论 2 345

推荐阅读更多精彩内容

  • ps:缓慢翻译中...bezier曲线部分给我翻译吐了... 路径(path)定义了一个或多个形状, 或者子路径(...
    Falme丶阅读 1,111评论 2 2
  • 本文转载自:http://southpeak.github.io/2014/11/16/quartz2d-3/ 路...
    idiot_lin阅读 461评论 0 0
  • UIBezierPath Class Reference 译:UIBezierPath类封装了Core Graph...
    鋼鉄侠阅读 1,706评论 0 3
  • 总是因为各种限制,去不了自己想去的地方!
    点线圈阅读 106评论 0 0
  • 从大排档到高调回潮的早餐夜吃,无论是烟熏火燎的人头攒动还是温情脉脉流转岁月的豆浆油条粢饭糕,都是一次小规模的出走,...
    心念一阅读 854评论 4 7