iOS開發與OpenGL ES 繪製圖片上下顛倒

• 使用CGContextDrawImage繪製圖片上下顛倒

• 首先要說的是，在iOS的不同framework中使用着不同的座標系：

  • UIKit － y軸向下
  • Core Graphics(Quartz) － y軸向上
  • OpenGL ES － y軸向上

  UIKit是iPhone SDK的CocoaTouch層的核心framework，是iPhone應用程序圖形界面和事件驅動的基礎，它和傳統的windows桌面一樣，座標系是y軸向下的;Core Graphics(Quartz)一個基於2D的圖形繪製引擎，它的座標系則是y軸向上的；而OpenGL ES是iPhoneSDK的2D和3D繪製引擎，它使用左手座標系，它的座標系也是y軸向上的，如果不考慮z軸，在二維下它的座標系和Quartz是一樣的。

  現在回到問題，當通過CGContextDrawImage繪製圖片到一個context中時，如果傳入的是UIImage的CGImageRef，因爲UIKit和CG座標系y軸相反，所以圖片繪製將會上下顛倒。解決方法有以下幾種，

  解決方法一：在繪製到context前通過矩陣垂直翻轉座標系

  1	//uiImage是將要繪製的UIImage圖片，width和height是它的寬高

  2	CGContextTranslateCTM(context, 0,height);

  3	CGContextScaleCTM(context, 1.0,-1.0);

  4	CGContextDrawImage(context, CGRectMake(0, 0,width, height), uiImage.CGImage);

  解決方法二：使用UIImage的drawInRect函數，該函數內部能自動處理圖片的正確方向

  1	//uiImage是將要繪製的UIImage圖片，width和height是它的寬高

  2	UIGraphicsPushContext( context );

  3	[uiImage drawInRect:CGRectMake(0, 0, width,height)];

  4	UIGraphicsPopContext();

  解決方法三：垂直翻轉投影矩陣
  這種方法通過設置上下顛倒的投影矩陣，使得原本y軸向上的GL座標系看起來變成了y軸向下，並且座標原點從屏幕左下角移到了屏幕左上角。如果你習慣使用y軸向下的座標系進行二維操作，可以使用這種方法，同時原本顛倒的圖片經過再次顛倒後回到了正確的方向：

  1	//uiImage是將要繪製的UIImage圖片，width和height是它的寬高

  2

  3	// 圖片被顛倒的繪製到context

  4	CGContextDrawImage(context, CGRectMake(0, 0,width, height), uiImage.CGImage);

  5

  6	// 設置上下顛倒的投影矩陣（則原來顛倒的圖片回到了正確的方向）

  7	glMatrixMode(GL_PROJECTION);

  8	glLoadIdentity();

  9	glOrthof( 0, framebufferWidth,framebufferHeight, 0, -1, 1 );

This entry was posted in 

GameProgramming, iOS andtagged CGContextDrawImage, CoreGraphics, ios, opengles, UIKit, 上下顛倒, 座標系, 方向.Bookmark the permalink.