一捣卤、UIKit和Core Graphics的坐標(biāo)系不同
在iOS中忍抽，存在兩個(gè)坐標(biāo)系：
- 左上角為原點(diǎn)的坐標(biāo)系（upper-left-origin，ULO）腌零，例如UIKit和Core Animation
- 左下角為原點(diǎn)的坐標(biāo)系（lower-left-origin梯找，LLO），例如Core Graphics
如下圖所示：
由于兩個(gè)坐標(biāo)系不同益涧，如果直接在屏幕顯示由Core Graphics加載的圖片，那么看到的圖片效果是「上下顛倒」的驯鳖。
因此在圖片顯示之前闲询，需要手動將圖片「上下翻轉(zhuǎn)」以達(dá)到預(yù)期的效果。有兩種方式：
-
通過修改CTM（current transformation matrix）來翻轉(zhuǎn)默認(rèn)坐標(biāo)系
代碼示例：
CGContextSaveGState(graphicsContext); CGContextTranslateCTM(graphicsContext, 0.0, imageHeight); CGContextScaleCTM(graphicsContext, 1.0, -1.0); CGContextDrawImage(graphicsContext, image, CGRectMake(0, 0, imageWidth, imageHeight)); CGContextRestoreGState(graphicsContext); 在圖片顯示時(shí)手動翻轉(zhuǎn)
GPUImage采用的是第二種方式浅辙。
二扭弧、GPUImage中的texture頂點(diǎn)設(shè)置
在OpenGL ES中，texture的原始坐標(biāo)系如下：
可以看到记舆，左下角是原點(diǎn)鸽捻，從左到右、從下到上坐標(biāo)依次遞增泽腮。
對于用來render的GPUImageView來說御蒲，kGPUImageNoRotation對應(yīng)的就是將texture的坐標(biāo)系上下翻轉(zhuǎn)，其他旋轉(zhuǎn)方式則根據(jù)翻轉(zhuǎn)后的坐標(biāo)系確定诊赊。
下面是我總結(jié)的不同旋轉(zhuǎn)方式對應(yīng)的坐標(biāo)：
對應(yīng)的代碼為：
static const GLfloat noRotationTextureCoordinates[] = {
0.0f, 1.0f,
1.0f, 1.0f,
0.0f, 0.0f,
1.0f, 0.0f,
};
static const GLfloat rotateRightTextureCoordinates[] = {
1.0f, 1.0f,
1.0f, 0.0f,
0.0f, 1.0f,
0.0f, 0.0f,
};
static const GLfloat rotateLeftTextureCoordinates[] = {
0.0f, 0.0f,
0.0f, 1.0f,
1.0f, 0.0f,
1.0f, 1.0f,
};
static const GLfloat verticalFlipTextureCoordinates[] = {
0.0f, 0.0f,
1.0f, 0.0f,
0.0f, 1.0f,
1.0f, 1.0f,
};
static const GLfloat horizontalFlipTextureCoordinates[] = {
1.0f, 1.0f,
0.0f, 1.0f,
1.0f, 0.0f,
0.0f, 0.0f,
};
static const GLfloat rotateRightHorizontalFlipTextureCoordinates[] = {
1.0f, 0.0f,
1.0f, 1.0f,
0.0f, 0.0f,
0.0f, 1.0f,
};
static const GLfloat rotateRightVerticalFlipTextureCoordinates[] = {
0.0f, 1.0f,
0.0f, 0.0f,
1.0f, 1.0f,
1.0f, 0.0f,
};
static const GLfloat rotate180TextureCoordinates[] = {
1.0f, 0.0f,
0.0f, 0.0f,
1.0f, 1.0f,
0.0f, 1.0f,
};
那么對于GPUImageFilter中的坐標(biāo)呢厚满？kGPUImageNoRotation對應(yīng)的當(dāng)然是texture的原始坐標(biāo)系，但是旋轉(zhuǎn)的坐標(biāo)不能簡單地?fù)?jù)此確定碧磅，而要考慮到最終上下翻轉(zhuǎn)后可以得到預(yù)期的效果碘箍。舉例來說，如果要實(shí)現(xiàn)翻轉(zhuǎn)后是右轉(zhuǎn)的效果鲸郊，那么翻轉(zhuǎn)前對應(yīng)的應(yīng)該是左轉(zhuǎn)丰榴。其他旋轉(zhuǎn)方式可以類似地推理得到。
下面是我總結(jié)的不同旋轉(zhuǎn)對應(yīng)的坐標(biāo)：
對應(yīng)的代碼為：
static const GLfloat noRotationTextureCoordinates[] = {
0.0f, 0.0f,
1.0f, 0.0f,
0.0f, 1.0f,
1.0f, 1.0f,
};
static const GLfloat rotateLeftTextureCoordinates[] = {
1.0f, 0.0f,
1.0f, 1.0f,
0.0f, 0.0f,
0.0f, 1.0f,
};
static const GLfloat rotateRightTextureCoordinates[] = {
0.0f, 1.0f,
0.0f, 0.0f,
1.0f, 1.0f,
1.0f, 0.0f,
};
static const GLfloat verticalFlipTextureCoordinates[] = {
0.0f, 1.0f,
1.0f, 1.0f,
0.0f, 0.0f,
1.0f, 0.0f,
};
static const GLfloat horizontalFlipTextureCoordinates[] = {
1.0f, 0.0f,
0.0f, 0.0f,
1.0f, 1.0f,
0.0f, 1.0f,
};
static const GLfloat rotateRightHorizontalFlipTextureCoordinates[] = {
0.0f, 0.0f,
0.0f, 1.0f,
1.0f, 0.0f,
1.0f, 1.0f,
};
static const GLfloat rotateRightVerticalFlipTextureCoordinates[] = {
1.0f, 1.0f,
1.0f, 0.0f,
0.0f, 1.0f,
0.0f, 0.0f,
};
static const GLfloat rotate180TextureCoordinates[] = {
1.0f, 1.0f,
0.0f, 1.0f,
1.0f, 0.0f,
0.0f, 0.0f,
};
三秆撮、參考文獻(xiàn)
- 官方文檔：Coordinate Systems and Drawing in iOS
- GPUImage項(xiàng)目地址：https://github.com/BradLarson/GPUImage
