panorama

来自于:官方立即使用

open openCubic close hide show

概述

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

实现原理

一、open

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

二、openCubic

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

panorama - 图1

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 对象
  • 内部字段:
  1. {
  2. status:true, //布尔类型;操作成功状态值
  3. id: '' //字符串类型;视图的id,据此id关闭该视图
  4. }

示例代码

  1. var panorama = api.require('panorama');
  2. panorama.open({
  3. x: 0,
  4. y: 64,
  5. w: api.winWidth,
  6. h: 300,
  7. imgPath: 'widget://res/img/ic/360viewtest.jpg',
  8. fixedOn: api.frameName
  9. }, function(ret, err) {
  10. if (ret) {
  11. alert(JSON.stringify(ret));
  12. }
  13. });

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

openCubic

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

openCubic({params}, callback(ret))

params

rect:

  • 类型:JSON 对象
  • 描述:(可选项)模块的位置及尺寸
  • 内部字段:
  1. {
  2. x: 0, //(可选项)数字类型;模块左上角的 x 坐标(相对于所属的 Window 或 Frame);默认值:0
  3. y: 0, //(可选项)数字类型;模块左上角的 y 坐标(相对于所属的 Window 或 Frame);默认值:0
  4. w: 80, //(可选项)数字类型;模块的宽度;默认值:80
  5. h: 50 //(可选项)数字类型;模块的高度;默认值:50
  6. }

imgPaths:

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

fixedOn:

  • 类型:字符串类型
  • 描述:(可选项)模块视图添加到指定 frame 的名字(只指 frame,传 window 无效)
  • 默认:模块依附于当前 window

fixed:

  • 类型:布尔
  • 描述:(可选项)是否将模块视图固定到窗口上(不跟随窗口上下滚动)
  • 默认值:true

callback(ret)

ret:

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

示例代码

  1. var panorama = api.require('panorama');
  2. panorama.openCubic({
  3. rect: {
  4. x: 0,
  5. y: 64,
  6. w: api.winWidth,
  7. h: 300,
  8. },
  9. imgPaths: [
  10. 'widget://res/img/ic/font1.jpg',
  11. 'widget://res/img/ic/back2.jpg',
  12. 'widget://res/img/ic/left3.jpg',
  13. 'widget://res/img/ic/right4.jpg',
  14. 'widget://res/img/ic/up5.jpg',
  15. 'widget://res/img/ic/down6.jpg'
  16. ],
  17. fixedOn: api.frameName,
  18. fixed: true
  19. }, function(ret, err) {
  20. if (ret) {
  21. alert(JSON.stringify(ret));
  22. }
  23. });

可用性

iOS系统

可提供的1.0.0及更高版本

close

关闭全景展示视图

close({params})

params

id:

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

示例代码

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

可用性

iOS系统,Android系统

可提供的1.0.1及更高版本

hide

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

hide({params})

params

id:

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

示例代码

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

可用性

iOS系统,Android系统

可提供的1.0.1及更高版本

show

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

show({params})

params

id:

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

示例代码

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

可用性

iOS系统,Android系统

可提供的1.0.1及更高版本