iOS - 加载全景图片

作者: 安处幽篁兮 | 来源:发表于2017-05-18 15:27 被阅读0次

    需求:界面部分区域展示全景图片,支持拖拽,支持陀螺仪。
    效果:如下图

    Pano.gif

    实现步骤:
    一 、工具
    ① GLKViewController
    ② PanoramaView
    选择哪种实现方式可参考这篇文章http://www.cnblogs.com/mawenqiangios/p/5884373.html

    二、思路
    ①GLKViewController是iOS对OpenGL提供了简单的封装。GLKViewController的根视图是GLKView。就像UITableViewController的根视图是UITableView一样。我们知道在使用UITableViewController的时候主要是实现<UITableViewDelegate, UITableViewDataSource>,同理,GLKViewController的实现也依靠GLKView的代理方法----GLKViewDelegate。

    GLKViewDelegate.jpeg

    ② PanoramaView继承自GLKView。那么我们要怎样结合GLKViewController和PanoramaView呢?直接替换根视图。

    三、实现
    ①自定义控制器类继承自GLKViewController
    ②初始化PanoramaView

        // 设置要展现的视图的大小
        panoramaView = [[PanoramaView alloc]initWithFrame:CGRectMake(0, 0, kWidth, (kHeight-49)/2)];
        // 设置全景图片
        [panoramaView setImage:image];
        // 是否开启陀螺仪
        [panoramaView setOrientToDevice:YES];
        // 手指拖拽
        [panoramaView setTouchToPan:YES];
        [panoramaView setPinchToZoom:YES];
        // 手指触控点经纬交叉点(十字交叉线)
        [panoramaView setShowTouches:NO];
        // 设置VR模式
        [panoramaView setVRMode:NO];
    

    ③直接实现代理
    有的人可能疑惑为什么不先遵守GLKViewDelegate?你见过UITableViewController手写遵守UITableViewDelegate?

    -(void)glkView:(GLKView *)view drawInRect:(CGRect)rect{
        // panoramaView中的绘制方法
        [panoramaView draw];
    }
    
    

    ④提取方法。我们要在实现文章开头说明的需求,那么就要开放设置全景图片image的方法

    @interface  GLKVC : GLKViewController
    
    - (void)setTitlePanoramaView:(UIImage *)image;
    
    @end
    
    
    - (void)setTitlePanoramaView:(UIImage *)image{
        // 设置要展现的视图的大小
        panoramaView = [[PanoramaView alloc]initWithFrame:CGRectMake(0, 0, kWidth, (kHeight-49)/2)];
        // 设置全景图片
        [panoramaView setImage:image];
        // 是否开启陀螺仪
        [panoramaView setOrientToDevice:YES];
        // 手指拖拽
        [panoramaView setTouchToPan:YES];
        [panoramaView setPinchToZoom:YES];
        // 手指触控点经纬交叉点(十字交叉线)
        [panoramaView setShowTouches:NO];
        // 设置VR模式
        [panoramaView setVRMode:NO];
        // 替换根视图
        [self setView:panoramaView];
    
    }
    

    ⑤最终实现
    将这个全景视图设置未tableview的头视图。

        GLKVC *vc = [[GLKVC alloc]init];
        [vc setTitlePanoramaView:img];
        self.listView.tableHeaderView = vc.view;
        // 使用GLKViewController的GLKView
        [self addChildViewController:vc];
        [vc didMoveToParentViewController:self];
        vc.view.frame = CGRectMake(0, 0, kWidth, (kHeight-49)/2);
    

    在实现这一步时GLKVC的根视图不能显示在我要实现的控制器视图上,最终在这个http://stackoverflow.com/questions/12100689/using-glkview-with-a-uiviewcontroller 找到方法

    四、总结

    需求不易,且行且珍惜。

    相关文章

      网友评论

        本文标题:iOS - 加载全景图片

        本文链接:https://www.haomeiwen.com/subject/yhuozttx.html