iOS開發UI篇—Quartz2D使用（圖形上下文棧）

標籤：

iOS開發UI篇—Quartz2D使用（圖形上下文棧）

一、qurza2d是怎麼將繪圖資訊和繪圖的屬性繪製到圖形上下文中去的？

說明：

建立一個項目，自訂一個view類和storyboard關聯後，重寫該類中的drowrect方法。畫線的三個步驟：（1）擷取上下文（2）繪圖（3）渲染要求：畫兩條單獨的線代碼和：

- (void)drawRect:(CGRect)rect{    //擷取上下文    CGContextRef ctx=UIGraphicsGetCurrentContext();    //繪圖    //第一條線    CGContextMoveToPoint(ctx, 20, 100);    CGContextAddLineToPoint(ctx, 100, 320);        //第二條線    CGContextMoveToPoint(ctx, 40, 200);    CGContextAddLineToPoint(ctx, 80, 100);    //渲染    CGContextStrokePath(ctx);    }

：

 

設定線段的寬度：兩頭為圓形，顏色等。代碼和（發現第二條線也被渲染成第一條線的樣式和狀態）

- (void)drawRect:(CGRect)rect{    //擷取上下文    CGContextRef ctx=UIGraphicsGetCurrentContext();    //繪圖    //第一條線    CGContextMoveToPoint(ctx, 20, 100);    CGContextAddLineToPoint(ctx, 100, 320);        //設定第一條線的狀態    //設定線條的寬度    CGContextSetLineWidth(ctx, 12);    //設定線條的顏色    [[UIColor brownColor]set];    //設定線條兩端的樣式為圓角    CGContextSetLineCap(ctx,kCGLineCapRound);    //對線條進行渲染    CGContextStrokePath(ctx);        //第二條線    CGContextMoveToPoint(ctx, 40, 200);    CGContextAddLineToPoint(ctx, 80, 100);    //渲染    CGContextStrokePath(ctx);    }

：

 

新的需求：要讓兩條線的顏色不一樣，要求第二條線變成原版的樣子。要達到上面的要求，有以下幾種做法：

第一種做法：在對第二條線進行設定的時候，清空它的狀態

- (void)drawRect:(CGRect)rect{    //擷取上下文    CGContextRef ctx=UIGraphicsGetCurrentContext();    //繪圖    //第一條線    CGContextMoveToPoint(ctx, 20, 100);    CGContextAddLineToPoint(ctx, 100, 320);        //設定第一條線的狀態    //設定線條的寬度    CGContextSetLineWidth(ctx, 12);    //設定線條的顏色    [[UIColor brownColor]set];    //設定線條兩端的樣式為圓角    CGContextSetLineCap(ctx,kCGLineCapRound);    //對線條進行渲染    CGContextStrokePath(ctx);        //第二條線    CGContextMoveToPoint(ctx, 40, 200);    CGContextAddLineToPoint(ctx, 80, 100);        //清空狀態    CGContextSetLineWidth(ctx, 1);    [[UIColor blackColor]set];    CGContextSetLineCap(ctx,kCGLineCapButt);        //渲染    CGContextStrokePath(ctx);    }

第二種做法：把第一條線從開始繪製到渲染的代碼剪下到第二條線渲染完成之後，這樣先繪製並渲染了第一條線，該線並沒有對繪製資訊進行過設定，顯示出來的第二條線即位系統預設的效果。

- (void)drawRect:(CGRect)rect{    //擷取上下文    CGContextRef ctx=UIGraphicsGetCurrentContext();    //繪圖        //第二條線    CGContextMoveToPoint(ctx, 40, 200);    CGContextAddLineToPoint(ctx, 80, 100);        //清空狀態    //    CGContextSetLineWidth(ctx, 1);    //    [[UIColor blackColor]set];        //    CGContextSetLineCap(ctx,kCGLineCapButt);        //渲染    CGContextStrokePath(ctx);        //第一條線    CGContextMoveToPoint(ctx, 20, 100);    CGContextAddLineToPoint(ctx, 100, 320);        //設定第一條線的狀態    //設定線條的寬度    CGContextSetLineWidth(ctx, 12);    //設定線條的顏色    [[UIColor brownColor]set];    //設定線條兩端的樣式為圓角    CGContextSetLineCap(ctx,kCGLineCapRound);    //對線條進行渲染    CGContextStrokePath(ctx);}

兩種方式完成的效果相同：

 

但是有的情況下，必須要先畫第一條線再畫第二條線，要求在交叉部分，第二條線蓋在第一條線的上面。如果要求是這樣，那麼只能使用第一種做法，但是如果現在有新的需求，要求在這個基礎上再畫兩條線，那就需要清空ctx中的狀態很多次，很麻煩。為瞭解決這個問題，下面給大家介紹圖形上下文棧。 二、繪圖的完整過程程式啟動，顯示自訂的view。當程式第一次顯示在我們眼前的時候，程式會調用drawRect:方法，在裡面擷取了圖形上下文（在記憶體中擁有了），然後利用圖形上下文儲存繪圖資訊，可以理解為圖形上下文中有一塊地區用來儲存繪圖資訊，有一塊地區用來儲存繪圖的狀態（線寬，圓角，顏色）。直線不是直接繪製到view上的，可以理解為在圖形上下文中有一塊單獨的地區用來先繪製圖形，當調用渲染方法的時候，再把繪製好的圖形顯示到view上去。 在繪製繪圖區域，會去儲存繪圖狀態區域中尋找對應的狀態資訊（線寬，圓角，顏色），然後在繪圖區域把對第一條直線繪製完成。其實在渲染之前，就已經把直線在繪製繪圖區域畫好了。說明：這些和本文中的程式碼塊，不具備一一對應關係，只是為了說明繪圖的完整過程。調用渲染方法的時候，把繪製繪圖區域已經畫好的圖形直接顯示到view上，就是我們看到的樣子了。畫第二條的時候，如果沒有對繪圖狀態進行重新設定，那麼可以發現畫第一天線的時候使用的繪圖狀態還儲存在圖形上下文中，在第二條線進行渲染之前，會根據第一條線（上一份繪圖狀態）對第二條線進行相應的設定，渲染後把第二條線顯示到螢幕上。參考代碼：

- (void)drawRect:(CGRect)rect{    //擷取上下文    CGContextRef ctx=UIGraphicsGetCurrentContext();    //繪圖    //第一條線    CGContextMoveToPoint(ctx, 20, 100);    CGContextAddLineToPoint(ctx, 100, 320);        //設定第一條線的狀態    //設定線條的寬度    CGContextSetLineWidth(ctx, 12);    //設定線條的顏色    [[UIColor brownColor]set];    //設定線條兩端的樣式為圓角    CGContextSetLineCap(ctx,kCGLineCapRound);    //對線條進行渲染    CGContextStrokePath(ctx);        //第二條線    CGContextMoveToPoint(ctx, 40, 200);    CGContextAddLineToPoint(ctx, 80, 100);    //渲染    CGContextStrokePath(ctx);}

如果清空了狀態，則在渲染之前，在繪製繪圖區域對第二條線進行繪製的時候，會去尋找當前的繪圖資訊（已經更改——清空），根據繪圖資訊對第二條線進行繪製，調用渲染方法的時候把第二條線顯示到view上。參考代碼：

- (void)drawRect:(CGRect)rect{    //擷取上下文    CGContextRef ctx=UIGraphicsGetCurrentContext();    //繪圖    //第一條線    CGContextMoveToPoint(ctx, 20, 100);    CGContextAddLineToPoint(ctx, 100, 320);        //設定第一條線的狀態    //設定線條的寬度    CGContextSetLineWidth(ctx, 12);    //設定線條的顏色    [[UIColor brownColor]set];    //設定線條兩端的樣式為圓角    CGContextSetLineCap(ctx,kCGLineCapRound);    //對線條進行渲染    CGContextStrokePath(ctx);        //第二條線    CGContextMoveToPoint(ctx, 40, 200);    CGContextAddLineToPoint(ctx, 80, 100);        //清空狀態    CGContextSetLineWidth(ctx, 1);    [[UIColor blackColor]set];    CGContextSetLineCap(ctx,kCGLineCapButt);        //渲染    CGContextStrokePath(ctx);}

三、圖形上下文棧1.簡單說明在擷取圖形上下文之後，通過 CGContextSaveGState(ctx);
 方法，把當前擷取的上下文拷貝一份，儲存一份最純潔的圖形上下文。在畫第二條線之前，使用CGContextRestoreGState(ctx);方法，還原開始的時候儲存的那份最純潔的圖形上下文。代碼：

- (void)drawRect:(CGRect)rect{    //擷取上下文    CGContextRef ctx=UIGraphicsGetCurrentContext();    //儲存一份最初的圖形上下文    CGContextSaveGState(ctx);        //繪圖    //第一條線    CGContextMoveToPoint(ctx, 20, 100);    CGContextAddLineToPoint(ctx, 100, 320);        //設定第一條線的狀態    //設定線條的寬度    CGContextSetLineWidth(ctx, 12);    //設定線條的顏色    [[UIColor brownColor]set];    //設定線條兩端的樣式為圓角    CGContextSetLineCap(ctx,kCGLineCapRound);    //對線條進行渲染    CGContextStrokePath(ctx);        //還原開始的時候儲存的那份最純潔的圖形上下文    CGContextRestoreGState(ctx);    //第二條線    CGContextMoveToPoint(ctx, 40, 200);    CGContextAddLineToPoint(ctx, 80, 100);        //清空狀態//    CGContextSetLineWidth(ctx, 1);//    [[UIColor blackColor]set];//    CGContextSetLineCap(ctx,kCGLineCapButt);        //渲染    CGContextStrokePath(ctx);}

 

2.圖形上下文棧機制畫第一條線的時候，會把當前的圖形上下文拷貝一份儲存到圖形上下文棧中。畫第二條線的時候，去圖形上下文棧中取出棧頂的繪圖資訊，作為第二條線的狀態資訊，第二條線的狀態資訊也是據此（最初儲存的那份圖形上下文）進行繪製。

 

注意：在棧裡儲存了幾次，那麼就可以取幾次（比如不能儲存了1次，取兩次，在取第二次的時候，棧裡為空白會直接掛掉）。

iOS開發UI篇—Quartz2D使用（圖形上下文棧）