UIステップ04-Quartz 2 D

6735 ワード

Quartz2D
  • 紹介?
  • Quartz 2 Dは、iOSおよびMacシステム(プラットフォーム間)をサポートする2 Dグラフィックスエンジンです.
  • 一部のUIインタフェースは極めて複雑で、しかも比較的個性的で、普通のUIコントロールでは実現できない場合、Quartz 2 D技術を利用してコントロール内部の構造を描き出し、コントロールの様子をカスタマイズすることができる.
  • 実は、iOSのほとんどのコントロールの内容はQuartz 2 Dによって描かれているので、Quartz 2 DはiOS開発において重要な価値の一つは、カスタムview(カスタムUIコントロール)です.

  • グラフィックコンテキストCGcontextRef?
  • グラフィックコンテキスト(Graphics Context):CGcontextRefタイプのデータです.
  • グラフィックコンテキストの役割:
  • は、図面情報(パス)を保存する.
  • 図面ステータス(色、線幅、スタイルなど).
  • 描画の出力目標を決定する:出力目標はPDFファイル、Bitmapまたはディスプレイのウィンドウ上で、同じ一連の描画シーケンスで、異なるGraphics Contextを制定して、同じ画像を異なる目標に描画することができます.

  • Quartz 2 Dでは、次のタイプのGraphics Contextが用意されています.
  • Bitmap Graphics Context.
  • PDF Graphics Context.
  • Window Graphics Context.
  • Layer Graphics Context(UIコントロール).
  • Printer Graphics Context.


  • Quartz 2 D注意事項?
  • Quartz 2 DのAPIは純C言語である.
  • Quartz 2 DのAPIはCore Graphicsフレームワークから来ている.
  • データ型と関数は基本的にCGを接頭辞とする.

  • drawRect:で取得したコンテキスト?
  • drawRect:メソッドでコンテキストを取得すると、viewに物を描くことができます.
  • viewの内部にはlayer(レイヤー)属性があり、drawRect:メソッドで取得したのはLayer Graphics Contextなので、描いたものは実はviewのlayerに描かれています.
  • viewが物を表示できるのは、完全にその内部のlayerのためです.
  • なぜdrawRect:メソッドを実装してviewに描画できるのですか?なぜなら、viewに関連付けられたグラフィックコンテキストは、drawRect:メソッドでしか取得できないからである.
  • drawRect:メソッドはいつ呼び出されますか?ビューが画面に最初に表示されると(UIWindowに追加されて表示される)、ビューのsetNeedsDisplayまたはsetNeedsDisplayInRect:が呼び出される.
  • 手動でdrawRect:メソッドを呼び出さないでください.

  • Quartz 2 Dカスタムビューを利用?(カスタムUIコントロール)
  • Quartz 2 Dを使用してviewに描画する方法:
  • まず、図面情報を保存し、どこへ描くかを決定するグラフィックコンテキストが必要です.
  • 次に、コンテンツをviewに描画するには、グラフィックコンテキストがviewに関連付けられている必要があります.

  • ビューをカスタマイズするには:
  • 新しいクラスがUIViewから継承されます.
  • は、- (void)drawRect:(CGRect)rect;メソッドを実装し、このメソッドで現在のviewに関連付けられたグラフィックコンテキストを取得し、対応するグラフィックコンテンツを描画し、グラフィックコンテキストを利用して描画されたすべてのコンテンツをview上にレンダリング表示する.


  • // 1.        
    //       
    void CGContextMoveToPoint(CGContextRef c, CGFloat x, CGFloat y);
    //           
    void CGContextAddLineToPoint(CGContextRef c, CGFloat x, CGFloat y);
    //       
    void CGContextAddRect(CGContextRef c, CGRect rect);
    //       
    void CGContextAddEllipseInRect(CGContextRef context, CGRect rect);
    //       
    void CGContextAddArc(CGContextRef c, CGFloat x, CGFloat y, CGFloat radius, CGFloat startAngle, CGFloat endAngle, int clockwise);
    //          
    void CGContextSetLineCap(CGContextRef c, CGLineCap cap);
    //        
    void CGContextSetLineJoin (CGContextRef c, CGLineJoin join);
    
    // 2.        
    // Mode         
    void CGContextDrawPath(CGContextRef c, CGPathDrawingMode mode);
    //       
    void CGContextStrokePath(CGContextRef c);
    //       
    void CGContextFillPath(CGContextRef c);
    
    // 3.         
    //        copy  ,     (     “      ”)
    void CGContextSaveGState(CGContextRef c);
    //          ,         
    void CGContextRestoreGState(CGContextRef c);
    
    // 4.    ,                    
    //   
    void CGContextScaleCTM(CGContextRef c, CGFloat sx, CGFloat sy);
    //   
    void CGContextRotateCTM(CGContextRef c, CGFloat angle);
    //   
    void CGContextTranslateCTM(CGContextRef c, CGFloat tx, CGFloat ty);
    
    // 5.    
    //               
    void UIGraphicsBeginImageContextWithOptions(CGSize size, BOOL opaque, CGFloat scale);
    //          (UIImage)
    UIGraphicsGetImageFromCurrentImageContext();
    //             
    void UIGraphicsEndImageContext();
    
    // 6.    
    //                 (              )
    void CGContextClip(CGContextRef c);
    
    // 7.    
    //     view layer renderInContext:    
    - (void)renderInContext:(CGContextRef)ctx;
    
    // 8.  
    //                
    - (void)setNeedsDisplay; 
    //     
    - (void)setNeedsDisplayInRect:(CGRect)theRect
    
    // 9.      
    - (void)drawAtPoint:(CGPoint)point withAttributes:(NSDictionary *)attrs;
    - (void)drawInRect:(CGRect)rect withAttributes:(NSDictionary *)attrs;
    
    // 10.    
    - (void)drawAtPoint:(CGPoint)point;
    //            (     )
    - (void)drawInRect:(CGRect)rect;
    //            (     )
    - (void)drawAsPatternInRect:(CGRect)rect;
    
    //          ,             Fill      view 
    void CGContextFillRect (CGContextRef c, CGRect rect);
    //          ,             Stroke      view 
    void CGContextStrokeRect (CGContextRef c, CGRect rect);
    //              ,     
    void UIRectFill (CGRect rect);
    
  • Quartz 2 Dのメモリ管理?
  • CreateまたはCopyを含む関数を使用して作成されたオブジェクトは、使用後に解放する必要があります.そうしないと、メモリが漏洩します.
  • 「Create」または「Copy」を含まない関数を使用して取得したオブジェクトは、解放する必要はありません.
  • retainオブジェクトが1つ存在し、使用されなくなった場合はreleaseを削除する必要があります.
  • Quartz 2 Dの関数を使用して、retainとreleaseのオブジェクトを指定できます.たとえば、CGcolorSpaceオブジェクトを作成した場合、関数CGcolorSpaceRepainとCGcolorSpaceReleaseを使用してオブジェクトをretainおよびreleaseします.
  • は、Core Foundationを用いたCFReainおよびCFReaseであってもよい.これらの関数にNULL値を渡すことはできません.

  • パスオブジェクトを作成することで描画しますか?
  • 図形描画方式:
  • では、まずグラフィックをパスオブジェクトにキャッシュし、次にパスオブジェクトをコンテキストオブジェクトに追加し、最後にコンテキストオブジェクトを対応するデバイスにレンダリングします.

  • 関連クラス:CGPathRef、CGMutablePathRef、基本使用手順:
  • パスオブジェクトを作成します.
  • パスは、対応するパスオブジェクトに接続されます.
  • パスオブジェクトをコンテキストオブジェクトに追加します.
  • レンダリング.


  • // 1.         
    CGContextRef ref = UIGraphicsGetCurrentContext();
    // 2.     path  
    CGMutablePathRef linePath = CGPathCreateMutable();
    // 3.    
    CGContextMoveToPoint(linePath, NULL, 50, 50);
    CGPathAddLineToPoint(linePath, NULL, 150, 150);
    // 4.            
    CGContextAddPath(ref, linePath);
    // 5.     
    CGContextStrokePath(ref);
    // 6.    
    CGPathRelease(linePath);
    
  • void CGContextClip (CGContextRef c);説明?
  • による裁断は、現在のコンテキストを裁断することである.
  • 裁断が完了した後、図面を描画すると、描画した図形が裁断された領域にある場合にのみ表示されます.そうしないと表示されません.
  • 裁断する前に、コンテキストにグラフィックが描画されている場合は、UIViewに表示するには、描画したばかりの画像をUIViewにレンダリングするには、レンダリングが完了すると現在のコンテキストにグラフィックがなくなり、現在の上下文に新しいグラフィックが描画され、裁断され、現在のコンテキストを指定したグラフィックに裁断することを示します.次に描画するグラフィックは、座標が切り取られた領域にある場合に表示され、切り取られた領域にない場合に表示されません.

  • ビットマップコンテキスト?
  • Bitmap(ビットマップ)ベースのコンテキストがオン(作成)され、最終的にすべてのコンテンツがこのピクチャに描画されることを示します.
  • パラメータCGSize sizeは、このコンテキストのサイズを表します.
  • パラメータBOOL opaqueは不透明かどうかを示します.YESは不透明、NOは透明.
  • パラメータCGFloat scaleはスケールを表し、0.0は非スケールを表します.

  • //   (  )       
    void UIGraphicsBeginImageContextWithOptions (CGSize size, BOOL opaque, CGFloat scale);
    //              
    UIImage * UIGraphicsGetImageFromCurrentImageContext (void);
    //   (  )     
    UIGraphicsEndImageContext();
    //               
    NSData * UIImagePNGRepresentation (UIImage *image);
    //        ,    UIColor  
    + (UIColor *)colorWithPatternImage:(UIImage *)image;