Paths

Paths中的幾個重要元素

Pointshtml

void CGContextMoveToPoint (app

   CGContextRef c,iphone

   CGFloat x,函數

   CGFloat y測試

);ui

指定一個點成爲current pointspa

Quartz會跟蹤current point通常執行完一個相關函數後,current point都會相應的改變.code

Linescomponent

相關的幾個函數orm

void CGContextAddLineToPoint (

   CGContextRef c,

   CGFloat x,

   CGFloat y

);

建立一條直線,從current point到 (x,y)

而後current point會變成(x,y)

void CGContextAddLines (

   CGContextRef c,

   const CGPoint points[],

   size_t count

);

建立多條直線,好比points有兩個點,那麼會畫兩條直線 從current point到 (x1,y1),

而後是(x1,y1)到(x2,y2)

而後current point會變成points中的最後一個點

Arcs

兩種方法建立弧度 第一種

void CGContextAddArc (

   CGContextRef c,    

   CGFloat x,             //圓心的x座標

   CGFloat y,   //圓心的x座標

   CGFloat radius,   //圓的半徑

   CGFloat startAngle,    //開始弧度

   CGFloat endAngle,   //結束弧度

   int clockwise          //0表示順時針,1表示逆時針

);

假如想建立一個完整的圓圈,那麼 開始弧度就是0 結束弧度是 2pi, 由於圓周長是 2*pi*r.

最後,函數執行完後,current point就被重置爲(x,y).

還有一點要注意的是,假如當前path已經存在一個subpath,那麼這個函數執行的另一個效果是

會有一條直線,從current point到弧的起點

 

第二種

void CGContextAddArcToPoint (

   CGContextRef c,

   CGFloat x1, //端點1的x座標

   CGFloat y1, //端點1的y座標

   CGFloat x2, //端點2的x座標

   CGFloat y2, //端點2的y座標

   CGFloat radius //半徑

);

原理:首先畫兩條線,這兩條線分別是 current point to (x1,y1) 和(x1,y1) to (x2,y2).

這樣就是出現一個以(x1,y1)爲頂點的兩條射線,

而後定義半徑長度,這個半徑是垂直於兩條射線的,這樣就能決定一個圓了,更好的理解看下圖,不過我的認爲下圖所標的 tangent point 1的位置是錯誤的。

最後,函數執行完後,current point就被重置爲(x2,y2).

還有一點要注意的是,假如當前path已經存在一個subpath,那麼這個函數執行的另一個效果是

會有一條直線,從current point到(x1,y1)

Paths - happy dog - 又一個部落格

Curves

畫曲線,通常是一條直線,而後定義幾個控制點,使直線變彎曲。

三次曲線函數

void CGContextAddCurveToPoint (

   CGContextRef c,

   CGFloat cp1x, //控制點1 x座標

   CGFloat cp1y, //控制點1 y座標

   CGFloat cp2x, //控制點2 x座標

   CGFloat cp2y, //控制點2 y座標

   CGFloat x, //直線的終點 x座標

   CGFloat y //直線的終點 y座標

);

假如第二個控制點(cp2x,cp2y)比(cp1x,cp1y) 更接近current point,那麼會造成一個封閉的曲線

Paths - happy dog - 又一個部落格

 

二次曲線函數

void CGContextAddQuadCurveToPoint (

   CGContextRef c,

   CGFloat cpx, //控制點 x座標

   CGFloat cpy, //控制點 y座標

   CGFloat x, //直線的終點 x座標

   CGFloat y //直線的終點 y座標

);

執行完函數貌似current point不會變化,沒有具體測試過

Paths - happy dog - 又一個部落格

 

Ellipses

void CGContextAddEllipseInRect (

   CGContextRef context,

   CGRect rect //一矩形

);

若是矩形是一個正方形,那麼畫出來就是一個圓

執行完函數貌似current point不會變化,沒有具體測試過

Rectangles

void CGContextAddRect (

   CGContextRef c,

   CGRect rect

);

一次性畫出多個矩形

void CGContextAddRects (

   CGContextRef c,

   const CGRect rects[],

   size_t count

);

須要注意的是,畫矩形有一些特別,current point沒有發生變化

 

Creating a Path

調用函數 CGContextBeginPath 開始建立路徑,線調用函數CGContextMoveToPoint設置起點

而後開始畫本身想畫的路徑,注意一下幾點:

1.Lines, arcs, and curves,是從current point開始的

2.假如想封閉一條路徑,那麼調用函數 CGContextClosePath 把當前點和起點鏈接起來

3.當在畫 arcs的時候,Quartz會畫一條線從current point 到 starting point

4.畫矩形的時候不會有第三條那這樣的的一條直線

5.建立完路徑後,必須調用 painting 函數  fill or stroke the path,否則不會畫上面東東在相應的設備上】

6.開始建立一個新的路徑的時候,使用函數 CGContextBeginPath。

重複利用路徑的相關函數和數據類型

CGPathCreateMutable 相似於 CGContextBeginPath

CGPathMoveToPoint 相似於 CGContextMoveToPoint

CGPathAddLineToPoint 相似於 CGContextAddLineToPoint

CGPathAddCurveToPoint 相似於 CGContextAddCurveToPoint

CGPathAddEllipseInRect 相似於 CGContextAddEllipseInRect

CGPathAddArc 相似於 CGContextAddArc

CGPathAddRect 相似於 CGContextAddRect

CGPathCloseSubpath 相似於 CGContextClosePath

CGPathRef

CGMutablePathRef

用CGContextAddPath函數把一個路徑添加到graphics context中

void CGContextAddPath (

   CGContextRef context,

   CGPathRef path

);

 

Painting a Path

Stroking :畫出路徑

Filling :填充路徑的封閉區域

影響Stroking的參數

Line width

void CGContextSetLineWidth (

   CGContextRef c,

   CGFloat width

);

Line join:線轉彎的時候的樣式,好比圓滑的方式

void CGContextSetLineJoin (

   CGContextRef c,

   CGLineJoin join

);

Paths - happy dog - 又一個部落格Paths - happy dog - 又一個部落格

  

Line cap:線的兩端的樣式,好比兩端變的圓滑

void CGContextSetLineCap (

   CGContextRef c,

   CGLineCap cap

);

Paths - happy dog - 又一個部落格Paths - happy dog - 又一個部落格Paths - happy dog - 又一個部落格

 

Miter limit:當Line join的模式是Miter join的時候,這個參數會有影響

void CGContextSetMiterLimit (

   CGContextRef c,

   CGFloat limit

);

Line dash pattern:虛線相關

void CGContextSetLineDash (

   CGContextRef c,

   CGFloat phase,

   const CGFloat lengths[],

   size_t count

);

 

Stroke color space

void CGContextSetStrokeColorSpace (

   CGContextRef c,

   CGColorSpaceRef colorspace

);

Stroke color

void CGContextSetStrokeColor (

   CGContextRef c,

   const CGFloat components[]

);

void CGContextSetStrokeColorWithColor (

   CGContextRef c,

   CGColorRef color

);

Stroke pattern(和透明度相關)

void CGContextSetStrokePattern (

   CGContextRef c,

   CGPatternRef pattern,

   const CGFloat components[]

);

 

 

Stroking的相關函數

Strokes當前path.

void CGContextStrokePath (

   CGContextRef c

);

Strokes 指定的 矩形.

void CGContextStrokeRect (

   CGContextRef c,

   CGRect rect

);

Strokes 指定的 矩形, 使用指定的寬度.

void CGContextStrokeRectWithWidth (

   CGContextRef c,

   CGRect rect,

   CGFloat width

);

Strokes 指定的橢圓.

void CGContextStrokeEllipseInRect (

   CGContextRef context,

   CGRect rect

);

Strokes 一些直線.

void CGContextStrokeLineSegments (

   CGContextRef c,

   const CGPoint points[],

   size_t count

);

決定是Stroking 仍是Filling

void CGContextDrawPath (

   CGContextRef c,

   CGPathDrawingMode mode

);

Filling a Path

填充一個路徑的時候,路徑裏面的子路徑都是獨立填充的。

假如是重疊的路徑,決定一個點是否被填充,有兩種規則

1,nonzero winding number rule:非零繞數規則,假如一個點被從左到右跨過,計數器+1,從右到左跨過,計數器-1,最後,若是結果是0,那麼不填充,若是是非零,那麼填充。

2,even-odd rule: 奇偶規則,假如一個點被跨過,那麼+1,最後是奇數,那麼要被填充,偶數則不填充,和方向沒有關係。

 

 Function Description 
 CGContextEOFillPath  使用奇偶規則填充當前路徑
 CGContextFillPath  使用非零繞數規則填充當前路徑
 CGContextFillRect  填充指定的矩形
 CGContextFillRects  填充指定的一些矩形
 CGContextFillEllipseInRect  填充指定矩形中的橢圓
 CGContextDrawPath  兩個參數決定填充規則,kCGPathFill表示用非零繞數規則,kCGPathEOFill表示用奇偶規則,kCGPathFillStroke表示填充,kCGPathEOFillStroke表示描線,不是填充


Setting Blend Modes

設置當一個顏色覆蓋上另一個顏色,兩個顏色怎麼混合

默認方式是

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

 

CGContextSetBlendMode :設置blend mode.

CGContextSaveGState :保存blend mode.

CGContextRestoreGState:在沒有保存以前,用這個函數還原blend mode.

 

下面兩張圖,第一張是背景圖,第二張是前景圖,都是不透明的圖片

Paths(待續) - happy dog - 又一個部落格Paths(待續) - happy dog - 又一個部落格

 

 Note:  這個規則也能夠應用於圖片,用函數:CGContextSetBlendMode 來設置

   

Normal Blend Mode

這個模式,就是默認的模式,前景圖覆蓋了背景圖.

Paths(待續) - happy dog - 又一個部落格

 

Multiply Blend Mode

調用函數CGContextSetBlendMode  的時候,使用參數 kCGBlendModeMultiply.

混合了兩種顏色,最終的顏色都會比原先的兩種顏色暗。

 

Screen Blend Mode

使用參數:kCGBlendModeScreen

把前景和背景圖的顏色先反過來,而後混合,結果混合的地方比先前的顏色都要亮,前景圖沒有混合到得地方變成白色?

Paths(待續) - happy dog - 又一個部落格

 

Overlay Blend Mode

使用參數kCGBlendModeOverlay

明亮取決於背景圖

Paths(待續) - happy dog - 又一個部落格

 

Darken Blend Mode

kCGBlendModeDarken

Paths(待續) - happy dog - 又一個部落格

 

Lighten Blend Mode

kCGBlendModeLighten

Paths(待續) - happy dog - 又一個部落格

 

Color Dodge Blend Mode

kCGBlendModeColorDodge

Paths(待續) - happy dog - 又一個部落格

 

Color Burn Blend Mode

kCGBlendModeColorBurn

 

Soft Light Blend Mode

kCGBlendModeSoftLight

  Hard Light Blend Mode

kCGBlendModeHardLight

Paths(待續) - happy dog - 又一個部落格

 

Difference Blend Mode

kCGBlendModeDifference

Paths(待續) - happy dog - 又一個部落格

 

Exclusion Blend Mode

kCGBlendModeExclusion

 

Hue Blend Mode

kCGBlendModeHue

 

Saturation Blend Mode

kCGBlendModeSaturation

Paths(待續) - happy dog - 又一個部落格

 

Color Blend Mode

kCGBlendModeColor

Paths(待續) - happy dog - 又一個部落格

 

Luminosity Blend Mode

kCGBlendModeLuminosity

Paths(待續) - happy dog - 又一個部落格

 

Clipping to a Path

這個用在,假如咱們只想把圖片的部分打印到屏幕的時候
 

CGContextBeginPath (context);
CGContextAddArc (context, w/2, h/2, ((w>h) ? h : w)/2, 0, 2*PI, 0);
CGContextClosePath (context);
CGContextClip (context);

 

Function

Description

CGContextClip

 使用非零繞數規則剪輯當前圖形上下文

CGContextEOClip

使用奇偶規則剪輯當前上下文

CGContextClipToRect

設置一個矩形區域和當前的剪輯區域的交集

CGContextClipToRects

設置一些矩形區域和當前剪輯區域的交集

CGContextClipToMask

Maps a mask into the specified rectangle and intersects it with the current clipping area of the graphics context. Any subsequent path drawing you perform to the graphics context is clipped. (See 「Masking an Image by Clipping the Context.

參考http://developer.apple.com/iphone/library/documentation/GraphicsImaging/Conceptual/drawingwithquartz2d/dq_paths/dq_paths.html#//apple_ref/doc/uid/TP30001066-CH211-TPXREF101

相關文章
相關標籤/搜索