iOS基礎知識

1、Quartz2D簡介app

1. 什麼是Quartz2D框架

 

  • Quartz 2D是一個二維繪圖引擎,同時支持iOS和Mac系統
  • Quartz 2D能完成的工做

 

繪製圖形 : 線條\三角形\矩形\圓\弧等函數

繪製文字網站

繪製\生成圖片(圖像)spa

讀取\生成PDF對象

截圖\裁剪圖片繼承

自定義UI控件遊戲

… …圖片

2. Quartz2D實例ip

 

  • Quartz 2D能作不少強大的事情,例如

 

 

(1)裁剪圖片

(2)塗鴉\畫板

(3)手勢解鎖

(4)報表:折線圖\餅狀圖\柱狀圖

 

3. Quartz2DiOS開發中的價值

 

  • 爲了便於搭建美觀的UI界面,iOS提供了UIKit框架,裏面有各類各樣的UI控件

 

UILabel:顯示文字

UIImageView:顯示圖片

UIButton:同時顯示圖片和文字(能點擊)

… …

 

  • 利用UIKit框架提供的控件,拼拼湊湊,能搭建和現實一些簡單、常見的UI界面
  • 可是,有些UI界面極其複雜、並且比較個性化,用普通的UI控件沒法實現,這時能夠利用Quartz2D技術將控件內部的結構畫出來,自定義控件的樣子
  • 其實,iOS中大部分控件的內容都是經過Quartz2D畫出來的
  • 所以,Quartz2D在iOS開發中很重要的一個價值是:自定義view(自定義UI控件)

 

 

2、Quartz2D的概念瞭解
1. 圖形上下文
  • 圖形上下文(Graphics Context):是一個CGContextRef類型的數據
  • 圖形上下文的做用

 

 

保存繪圖信息、繪圖狀態

 

 

決定繪製的輸出目標(繪製到什麼地方去?)

 

 

(輸出目標能夠是PDF文件、Bitmap或者顯示器的窗口上)

 

  • 相同的一套繪圖序列,指定不一樣的Graphics Context,就可將相同的圖像繪製到不一樣的目標上
  • Quartz2D提供瞭如下幾種類型的Graphics Context:
Bitmap Graphics Context
PDF Graphics Context
Window Graphics Context
Layer Graphics Context
Printer Graphics Context

2. 自定義view

 

  • 如何利用Quartz2D自定義view?(自定義UI控件)
  • 如何利用Quartz2D繪製東西到view上?

 

(1)首先,得有圖形上下文,由於它能保存繪圖信息,而且決定着繪製到什麼地方去

(2)其次,那個圖形上下文必須跟view相關聯,才能將內容繪製到view上面

 

  • 自定義view的步驟

 

(1)新建一個類,繼承自UIView

(2)實現- (void)drawRect:(CGRect)rect方法,而後在這個方法中

* 取得跟當前view相關聯的圖形上下文

* 繪製相應的圖形內容

* 利用圖形上下文將繪製的全部內容渲染顯示到view上面

3. drawRect:

 

  • 爲何要實現drawRect:方法才能繪圖到view上?

 

由於在drawRect:方法中才能取得跟view相關聯的圖形上下文

 

  • drawRect:方法在何時被調用?

 

當view第一次顯示到屏幕上時(被加到UIWindow上顯示出來)

調用view的setNeedsDisplay或者setNeedsDisplayInRect:時

  • 繪圖順序

4. Quartz2D須知
  • Quartz2D的API是純C語言的
  • Quartz2D的API來自於Core Graphics框架
  • 數據類型和函數基本都以CG做爲前綴
CGContextRef
CGPathRef
CGContextStrokePath(ctx);
……

 

3、Quartz2D的使用
1. drawRect:中取得的上下文
  • 在drawRect:方法中取得上下文後,就能夠繪製東西到view上
  • View內部有個layer(圖層)屬性,drawRect:方法中取得的是一個Layer Graphics Context,所以,繪製的東西實際上是繪製到view的layer上去了
  • View之因此能顯示東西,徹底是由於它內部的layer
2. Quartz2D繪圖的代碼步驟
(1)得到圖形上下文
CGContextRef ctx = UIGraphicsGetCurrentContext();
(2)拼接路徑(下面代碼是搞一條線段)
CGContextMoveToPoint(ctx, 10, 10);
CGContextAddLineToPoint(ctx, 100, 100);
(3)繪製路徑
CGContextStrokePath(ctx); // CGContextFillPath(ctx);

3. 經常使用拼接路徑函數

 

  • 新建一個起點

 

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)

4. 經常使用繪製路徑函數

 

  • Mode參數決定繪製的模式

 

void CGContextDrawPath(CGContextRef c, CGPathDrawingMode mode)

 

  • 繪製空心路徑

 

void CGContextStrokePath(CGContextRef c)

 

  • 繪製實心路徑

 

void CGContextFillPath(CGContextRef c)

 

  • 提示:通常以CGContextDraw、CGContextStroke、CGContextFill開頭的函數,都是用來繪製路徑的
5. 圖形上下文棧的操做
  • 將當前的上下文copy一份,保存到棧頂(那個棧叫作」圖形上下文棧」)

 

 

void CGContextSaveGState(CGContextRef c)

 

 

  • 將棧頂的上下文出棧,替換掉當前的上下文

 

 

void CGContextRestoreGState(CGContextRef c)

 

6. 矩陣操做

利用矩陣操做,能讓繪製到上下文中的全部路徑一塊兒發生變化

  • 縮放

 

void CGContextScaleCTM(CGContextRef c, CGFloat sx, CGFloat sy)

 

  • 旋轉

 

void CGContextRotateCTM(CGContextRef c, CGFloat angle)

 

  • 平移

 

void CGContextTranslateCTM(CGContextRef c, CGFloat tx, CGFloat ty)

7. Quartz2D的內存管理

 

  • 使用含有「Create」或「Copy」的函數建立的對象,使用完後必須釋放,不然將致使內存泄露
  • 使用不含有「Create」或「Copy」的函數獲取的對象,則不須要釋放
  • 若是retain了一個對象,再也不使用時,須要將其release掉
  • 可使用Quartz 2D的函數來指定retain和release一個對象。例如,若是建立了一個CGColorSpace對象,則使用函數CGColorSpaceRetain和CGColorSpaceRelease來retain和release對象。
  • 也可使用Core Foundation的CFRetain和CFRelease。注意不能傳遞NULL值給這些函數
4、Quartz2D的應用
1. 圖片水印
  • 水印:在圖片上加的防止他人盜圖的半透明logo、文字、圖標



  • 水印的做用

 

 

告訴你這個圖片從哪來的

 

 

主要是一些網站爲了版權問題、廣告而添加的

 

  • 有時候,在手機客戶端app中也須要用到水印技術
好比,用戶拍完照片後,能夠在照片上打個水印,標識這個圖片是屬於哪一個用戶的
  • 實現方式:利用Quartz2D,將水印(文字、LOGO)畫到圖片的右下角
  • 核心代碼
(1)開啓一個基於位圖的圖形上下文
void     UIGraphicsBeginImageContextWithOptions(CGSize size, BOOL opaque, CGFloat scale)
(2)從上下文中取得圖片(UIImage)
UIImage* UIGraphicsGetImageFromCurrentImageContext();
(3)結束基於位圖的圖形上下文

void     UIGraphicsEndImageContext();

2. 圖片裁剪

 

  • 不少app的頭像,都是圓形的

  • 這時須要把一張普通的圖片刻意裁剪成圓形

  • 核心代碼

 

 

void CGContextClip(CGContextRef c)

 

 

將當前上下所繪製的路徑裁剪出來(超出這個裁剪區域的都不能顯示)

 

3. 屏幕截圖

 

  • 有時候須要截取屏幕上的某一塊內容,好比捕魚達人遊戲



  • 核心代碼

 

- (void)renderInContext:(CGContextRef)ctx;

調用某個view的layer的renderInContext:方法便可

相關文章
相關標籤/搜索