3、如何布局空間UI - ANTImageView

上篇文章介紹了所有對象的基類ANTBaseObject和ANTRenderObject,在本篇文章中,將開始進行實戰操作。

在操作之前還是提一下上篇提到的渲染模型總類,如下:
本章節之介紹其中常用的渲染模型(全景、平面),其余的渲染模型自己看提供的demo使用。

// 渲染模型
typedef NS_ENUM(NSInteger, ANTRenderModel) {
    ANTVR_2D,                                   // 2d
    ANTVR_SPHERE,                               // 全景
    ANTVR_STEREO_SPHERE_LEFT_RIGHT,             // 立體全景 - 左右
    ANTVR_STEREO_SPHERE_UP_DOWN,                // 立體全景 - 上下
    ANTVR_PLANE,                                // 平面
    ANTVR_STEREO_PLANE_LEFT_RIGHT,              // 立體平面 - 上下
    ANTVR_STEREO_PLANE_UP_DOWN,                 // 立體平面 - 左右
    ANTVR_FISHSPHERE_HIGH,                      // 960 * 2560
    ANTVR_FISHSPHERE_RETINA_HIGH,               // 1520 * 2688
    ANTVR_FISHSPHERE_MEDIUM,                    // 960 * 1920
    ANTVR_FISHSPHERE_RETINA_MEDIUM,             // 1080 * 1920
};

首先實例化對象:

// 創建全景360度圖片
ANTImageView *object = [[ANTImageView alloc] initWithMode:ANTVR_SPHERE];
[object setupTextureWithImage:[UIImage imageNamed:@"test0.jpg"]];
[self.antLibrary addSubObject:object];

這樣就將全景圖添加到場景中了。
注:在全景/蟻視模式下,不需要設置對象的position,因為攝像機的位置正好在(0.0,0.0,0.0)的位置。

Paste_Image.png

添加圖片的方法多種方式 ,可以根據情況選擇:(可以添加網絡圖片,左右兩張圖片等等)

/**
 * 設置圖片紋理 圖片名
 * @param imageName 圖片image
 */
- (void)setupTextureWithImage:(UIImage *)imageName;

/**
 * 設置圖片紋理 網絡下載
 * @param url 網絡地址/自動緩存
 */
- (void)setupTextureWithUrl:(NSString *)fileUrl;

/**
 * 設置圖片紋理 圖片名
 * @param color 根據圖片顏色生成紋理
 * @param frameSize 生成圖片的尺寸
 */
- (void)setupTextureWithColor:(UIColor *)color Rect:(CGRect)frameSize;

/**
 * 設置左右屏幕圖片紋理
 */
- (void)setTextureWithLeftImage:(UIImage *)LeftImage RightImage:(UIImage *)rightImage;

- (void)setTextureWithLeftUrl:(NSString *)leftUrl RightUrl:(NSString *)rightUrl;

如果要對對象設置坐標,或者旋轉角度,或縮放系數:

[object setPosition:0.0 Y:0.0 Z:-1.0];
[object setScale:1.0 Y:1.0 Z:1.0];
[object setRotate:-90 X:0.0 Y:1.0 Z:0.0];
// 創建平面圖片
ANTImageView *object = [[ANTImageView alloc] initWithMode:ANTVR_PLANE];
[object setupTextureWithImage:[UIImage imageNamed:@"test1.jpg"]];
[object setObjectRect:16.0 Height:9.0]; // 設置圖像的寬高比,默認為2.0,2.0
[self.antLibrary addSubObject:object];
[object setPosition:0.0 Y:0.0 Z:-15.0];
Paste_Image.png

這樣就簡單的實現了加載圖到場景中。若要開啟焦點拾取對象的功能,則需滿足兩個條件:
1、[self.antlibrary setFocusPicking:YES];
2、開啟對象自身的監聽block;

[object willSelectImageViewCallBack:^(ANTImageView *imgv) {
         // 焦點剛拾取到對象邊緣    
 }];
    
[object didSelectImageViewCallBack:^(ANTImageView *imgv) {
       // 焦點已經選中對象,進度圈走完
}];
    
[object didLeaveImageViewCallBack:^(ANTImageView *imgv) {
        //  焦點離開對象邊緣
}];
Paste_Image.png

關于ANTImageView的基本動畫我就不介紹了,使用方法在上一篇章中已經涉及到了。
ANTImageView的最基本的使用大體上就是這些,其他的一些的高級效果,如剪裁、變形、圖像的各種濾波效果就不再這一一介紹了,具體使用方法看我提供的demo。

使用ANTImageView這個對象就可以輕松的布局3D空間中的UI了。放上一張之前布局的一張UI空間圖:

Paste_Image.png
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容