panorama

open

openCubic

close

hide

show

概述

panorama 封装了用 openGL 实现的一个全景展示的库，开发者只需传入全景的图片，即可实现拖动查看全景图的功能。本插件封装了两套接口：open、openCubic，调用该接口，相当于 open 一个 frame，开发者可自定义其位置和大小，亦可制定所依附的window，自定义其 fixed 属性。可通过 show、hide、close 接口显示、隐藏、关闭指定 id 的插件。

** 实现原理 **

一、open

调用本接口打开的试图，相当于插件在底层初始化一个圆柱体，然后将开发者传入的 360 图片贴在圆柱体上，观察视角在柱体的几何中心

二、openCubic

调用本接口打开的试图，相当于插件在底层初始化一个立方体，然后将开发者传入的六张图片（前、后、左、右、上、下）分别贴在立方体的六个面，观察视角在立方体的几何中心

open

打开全景展示视图

open({params}, callback(ret))

params

x：

  • 类型：数字
  • 描述：（可选项）插件左上角的 x 坐标（相对于所属的 Window 或 Frame）
  • 默认值：0

y：

  • 类型：数字
  • 描述：（可选项）插件左上角的 y 坐标（相对于所属的 Window 或 Frame）
  • 默认值：0

w：

  • 类型：数字
  • 描述：（可选项）插件的宽度
  • 默认值：当前设备屏幕的宽度

h：

  • 类型：数字
  • 描述：（可选项）插件的高度
  • 默认值：当前设备屏幕的高度

imgPath：

  • 类型：字符串
  • 描述：要展示的 360 度全景图片的路径

fixedOn：

  • 类型：字符串类型
  • 描述：（可选项）插件视图添加到指定 frame 的名字（只指 frame，传 window 无效）
  • 默认：插件依附于当前 window

callback(ret, err)

ret：

  • 类型：JSON 对象
  • 内部字段：
{
    status:true,        //布尔类型；操作成功状态值
    id: ''                //字符串类型；视图的id，据此id关闭该视图
}

示例代码

var panorama = api.require('panorama');
panorama.open({
    x: 0,
    y: 64,
    w: api.winWidth,
    h: 300,
    imgPath: 'widget://res/img/ic/360viewtest.jpg',
    fixedOn: api.frameName
}, function(ret, err) {
    if (ret) {
        api.alert({msg: JSON.stringify(ret)});
    }
});

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

openCubic

打开全景展示视图，本接口暂仅支持 iOS 平台

openCubic({params}, callback(ret))

params

rect：

  • 类型：JSON 对象
  • 描述：（可选项）插件的位置及尺寸
  • 内部字段：
{
    x: 0,   //（可选项）数字类型；插件左上角的 x 坐标（相对于所属的 Window 或 Frame）；默认值：0
    y: 0,   //（可选项）数字类型；插件左上角的 y 坐标（相对于所属的 Window 或 Frame）；默认值：0
    w: 80,  //（可选项）数字类型；插件的宽度；默认值：80
    h: 50   //（可选项）数字类型；插件的高度；默认值：50
}

imgPaths：

  • 类型：数组
  • 描述：要展示的全景图片的路径组成的数组，图片顺序为：前后左右上下

fixedOn：

  • 类型：字符串类型
  • 描述：（可选项）插件视图添加到指定 frame 的名字（只指 frame，传 window 无效）
  • 默认：插件依附于当前 window

fixed:

  • 类型：布尔
  • 描述：（可选项）是否将插件视图固定到窗口上（不跟随窗口上下滚动）
  • 默认值：true

callback(ret)

ret：

  • 类型：JSON 对象
  • 内部字段：
{
    status:true,        //布尔类型；操作成功状态值
    id: ''                //字符串类型；视图的id，据此id关闭该视图
}

示例代码

var panorama = api.require('panorama');
panorama.openCubic({
    rect: {
        x: 0,
        y: 64,
        w: api.winWidth,
        h: 300,
    },
    imgPaths: [
        'widget://res/img/ic/font1.jpg',
        'widget://res/img/ic/back2.jpg',
        'widget://res/img/ic/left3.jpg',
        'widget://res/img/ic/right4.jpg',
        'widget://res/img/ic/up5.jpg',
        'widget://res/img/ic/down6.jpg'
    ],
    fixedOn: api.frameName,
    fixed: true
}, function(ret, err) {
    if (ret) {
        api.alert({msg: JSON.stringify(ret)});
    }
});

可用性

iOS系统

可提供的1.0.0及更高版本

close

关闭全景展示视图

close({params})

params

id：

  • 类型：数字
  • 描述：要关闭的视图的id

示例代码

var panorama = api.require('panorama');
panorama.close({
    id: 1
});

可用性

iOS系统，Android系统

可提供的1.0.1及更高版本

hide

隐藏全景展示视图。隐藏视图，并没有从内存里清除

hide({params})

params

id：

  • 类型：数字
  • 描述：要关闭的视图的id

示例代码

var panorama = api.require('panorama');
panorama.hide({
    id: 1
});

可用性

iOS系统，Android系统

可提供的1.0.1及更高版本

show

显示全景展示视图，显示已隐藏的视图

show({params})

params

id：

  • 类型：数字
  • 描述：要关闭的视图的 id

示例代码

var panorama = api.require('panorama');
panorama.show({
    id: 1
});

可用性

iOS系统，Android系统

可提供的1.0.1及更高版本

是否仍需要帮助？ 请保持联络！
最后更新于 2024/04/24