OpenGL ES学习之路(8.2) 天空盒子的图片裁剪

引言

一般在制作天空盒子的时候，UI给的图片资源都是如下图那般，对于我们来制作天空盒子的时候是还不够的，所以本着能自己解决的事，绝不找人的原则，我们需要对图片进行裁剪。

image.png

实现效果

将上图裁剪成下图的样子

image.png

思路

首先我们将图片分为六个面：前、后、左、右、上、下(如下图)，从图片中可以看出，每一个面都是正方形的，即找到每一张图的左上角顶点就可以求出单个图片的大小和位置。图片的总宽度/4 即求出单个图片的length尺寸，这样子就可以很简单地获取到每一个图片的位置和尺寸。例如：front的左上角顶点位置为(length, length)，right的左上角顶点位置是(2 * length, length);

image.png

源码实例

#import "ViewController.h"

@interface ViewController ()

@property(nonatomic,strong)UIImageView *imageView;

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    
    //1.创建一个宽100，长100*6的图片view(天空盒子图片大小:100 * 100 ,6张)
    self.imageView = [[UIImageView alloc] initWithFrame:CGRectMake(50, 88, 100, 100 * 6)];
    self.imageView.center = self.view.center;
    //2.设置图片
    UIImage *cImage = [UIImage imageNamed:@"skybox2.png"];
    
    //3.加载图片
    [self.imageView setImage:cImage];
    
    //4
    [self.view addSubview:self.imageView];
    
    //处理图片
    //1.获取图片的长度
    long length = cImage.size.width/4;
    
    //2.图片顶点索引
    long indices[] = {
        length * 2, length, // 右
        0, length, // 左
        length, 0, // 上 top
        length, length * 2, // 底bottom
        length, length ,// 顶front
        length * 3, length, // 背面
    };
    
    //3.指定图片个数
    //为什么除以2？因为包含了x，y
    long faceCount = sizeof(indices)/sizeof(indices[0])/2;
    
    //4.获取图片大小 单个图片大小：length * length， 组合起来:length,length * faceCount
    CGSize imageSize = {length, length * faceCount};
    
    //5. 创建基于位图的图形上下文并使其成为当前上下文。
    UIGraphicsBeginImageContext(imageSize);
    
    for (int i = 0; i + 2 <= faceCount * 2; i += 2) {
        
        //创建图片，从CImage。CGImage，获取位置rect上的图片
        CGImageRef cgImage = CGImageCreateWithImageInRect(cImage.CGImage, CGRectMake(indices[i], indices[i + 1], length, length));
        
        //将CGImage转换为UIImage
        UIImage *tmp = [UIImage imageWithCGImage:cgImage];
        
        //绘制图片
        [tmp drawInRect:CGRectMake(0, length * i / 2, length, length)];
    }
    
    //6.获取处理好的图片
   //UIGraphicsGetImageFromCurrentImageContext 基于当前位图基于图形上下文的内容返回图像。只有在基于位图的图形上下文是当前图形上下文时，才应该调用此函数。如果目前的情况下是零或没有通过UIGraphicsBeginImageContext创建，这个函数返回nil。
    UIImage *finalImg = UIGraphicsGetImageFromCurrentImageContext();
    
    [self.imageView setImage:finalImg];
    
    //打印图片信息
    NSLog(@"final:%@", [finalImg description]);
    
    //7.保存图片到沙河
    //指定图片路径
    NSString *path = [[NSHomeDirectory() stringByAppendingPathComponent:@"Documents"]stringByAppendingPathComponent:@"box.png"];
    
    //打印路径
    NSLog(@"image path:%@", path);
    
    //获取图片数据-png格式的图片数据
    //UIImagePNGRepresentation(imgData)以PNG格式返回指定图像的数据
    NSData *cImageData = UIImagePNGRepresentation(finalImg);
    
    //写入文件
    BOOL writeStatus = [cImageData writeToFile:path atomically:YES];
    
    if (writeStatus) {
        
        NSLog(@"处理天空盒子图片成功～～");
    }else {
        
        NSLog(@"处理图片失败！");
    }
}

GitHub代码: YSMakeSkyBoxImage.git