深入理解iPhone螢幕雙緩衝技術(手把手教你iphone開發 - 基礎篇)

深入理解iPhone螢幕雙緩衝技術(手把手教你iphone開發 - 基礎篇)

作者：孫東風 2009-12-21（轉載請註明出處）

 

筆者在最近項目的開發中需要使用到“螢幕雙緩衝”技術，“螢幕雙緩衝”是GUI用戶端中最經常使用的一種技術，但是這種技術在iPhone平台似乎很少被人使用到，網上的資料基本很難找到，這點讓筆者很是不解：（

 

相信大多數人都知道，所謂“螢幕雙緩衝”是指在記憶體中建立一個“圖形裝置上下文的緩衝”，所有的繪圖操作都在這個“圖形上下文緩衝”上進行，在需要顯示這個“圖形上下文”的時候，再次把它更新到螢幕裝置上。

 

iPhone平台提供了這樣一個API：

 

CGContextRef CGBitmapContextCreate (

   void *data,

   size_t width,

   size_t height,

   size_t bitsPerComponent,

   size_t bytesPerRow,

   CGColorSpaceRef colorspace,

   CGBitmapInfo bitmapInfo

);

 

這個API各個參數的意義如下：

Ø         參數data指向繪圖操作被渲染的記憶體地區，這個記憶體地區大小應該為（bytesPerRow*height）個位元組。如果對繪製操作被渲染的記憶體地區並無特別的要求，那麼可以傳遞NULL給參數date。

Ø         參數width代表被渲染記憶體地區的寬度。

Ø         參數height代表被渲染記憶體地區的高度。

Ø         參數bitsPerComponent被渲染記憶體地區中組件在螢幕每個像素點上需要使用的bits位，舉例來說，如果使用32-bit像素和RGB顏色格式，那麼RGBA顏色格式中每個組件在螢幕每個像素點上需要使用的bits位就為32/4=8。

Ø         參數bytesPerRow代表被渲染記憶體地區中每行所使用的bytes位元。

Ø         參數colorspace用於被渲染記憶體地區的“位元影像上下文”。

Ø         參數bitmapInfo指定被渲染記憶體地區的“視圖”是否包含一個alpha（透視）通道以及每個像素相應的位置，除此之外還可以指定組件式是浮點值還是整數值。

 

從介面定義中可以看出，當調用這個函數時，系統會建立一個“視圖繪製環境”，這個“視圖繪製環境”就是讀者定義的一個“視圖上下文”。當讀者在這個“視圖上下文”進行繪製操作時，系統會在定義的渲染記憶體地區中把繪製操作渲染成位元影像資料。“視圖上下文”的像素格式由三個參數來定義，也就是每個組件佔用的bits位元、colorspace以及alpha（透視），而alpha值指定了每個像素的不透明度。

 

根據上面講述的知識點，筆者定義了被渲染記憶體地區如下：

 

imageData = malloc((iFrame.size.width)*(iFrame.size.height)*32);

 

筆者這裡在螢幕每個像素上使用了32-bits來表示RGBA顏色格式，那麼參數bitsPerComponent就為32/4=8,各個參數的定義如下：

 

iDevice = CGBitmapContextCreate(imageData,iFrame.size.width,iFrame.size.height,8,32*(iFrame.size.width),iColorSpace,kCGImageAlphaPremultipliedLast);

 

這裡筆者擷取iColorSpace的方法如下：

 

iColorSpace = CGColorSpaceCreateDeviceRGB();

 

CGColorSpaceCreateDeviceRGB()方法可以擷取裝置無關的RGB色彩空間，這個色彩空間需要調用CGColorSpaceRelease()進行釋放。

 

在建立成功被渲染的記憶體地區的“視圖上下文”iDevice後，那麼讀者就可以在這個被渲染的記憶體地區的“位元影像上下文”上進行繪製操作了，正如上面所講的，所有的繪製操作將在被渲染的記憶體地區中被渲染成位元影像資料，繪製操作如下：

 

         // 繪製圖片

         CGContextDrawImage(iDevice, CGRectMake(0, 0, iFrame.size.width, iFrame.size.height), aImage);

        

         // 繪製半透明矩形

         CGRect rt;

        

         rt.origin.x = 100;

         rt.origin.y = 20;

         rt.size.width = 200;

         rt.size.height = 200;

        

         CGContextSaveGState(iDevice);

         CGContextSetRGBFillColor(iDevice, 1.0, 1.0, 1.0, 0.5);

         CGContextFillRect(iDevice, rt);

         CGContextRestoreGState(iDevice);

        

         CGContextStrokePath(iDevice);

        

         // 繪製直線

         CGContextSetRGBStrokeColor(iDevice, 1.0, 0.0, 0.0, 1.0);

         CGPoint pt0, pt1;

         CGPoint points[2];

        

         pt0.x = 10;

         pt0.y = 250;

        

         pt1.x = 310;

         pt1.y = 250;

        

         points[0] = pt0;

         points[1] = pt1;

        

         CGContextAddLines(iDevice, points, 2);

         CGContextStrokePath(iDevice);

 

可見，在被渲染的記憶體地區的“位元影像上下文”中可以進行圖片、矩形、直線等各種繪製操作，這些操作被渲染成位元影像資料，讀者可以通過如下方法擷取到這個被渲染的“位元影像”：

 

-(void)drawRect:(CGRect)rect {

    // Drawing code

         UIGraphicsGetCurrentContext();

        

         UIImage* iImage = [UIImage imageNamed:@"merry.png"];

         [iOffScreenBitmap DrawImage:iImage.CGImage];

         UIImage* iImage_1 = [UIImage imageWithCGImage:[iOffScreenBitmap Gc]];

 

         [iImage_1 drawInRect:CGRectMake(0, 0, 120, 160)];

}

 

上面的代碼中，通過iOffScreenBitmap的DrawImage:CGImageRef方法把圖片merry.png繪製到螢幕雙緩衝中，並接著進行了矩形、直線繪製，然後通過CGBitmapContextCreateImage:CGConotextRef方法擷取“視圖上下文”的“視圖快照（snapshot）”image_1，最後把這個“視圖快照”更新到螢幕上，從而實現螢幕雙緩衝的技術，效果如下：