意派Epub360高级教程：全景容器

全景容器组件，可以将长宽比例为2:1的画面，以Y轴为中心轴，使画面首尾相连，360°旋转查看，目前已有该组件案例供大家参考。

全景组件可实现的效果

作品链接：http://www.epub360.com/manage/book/xpooaa/present/

一、全景组件结构解析

全景容器组件我们简单将其结构拆为三个层级结构： 1.最外层元素／背景 2.中层元素／背景

3.最内层元素（交互元素放置层，简称：交互层）

最外层元素／背景是由全景容器组件最外层的图片元素层组成，在手机上观看时，距离我们的视线最远；

中层元素／背景是由全景容器组件中层的图片元素层组成在手机上观看时，相比最外层背景，距离视线较近，处于最内层与最外层中间。 最内层元素，在手机上观看时，相比最外层背景，距离视线最近；一般我们用一个layer页面来做这一层，可以在这一层做一些交互触发的设置。

可以使用最外层背景（2:1图）作为全景容器本身的背景，也可使用中层背景（2:1图），也可以直接用页面作为全景容器的背景（普通满屏尺寸740X1136分辨率72dpi）。

举例为大家说明下三层背景的格式该怎样设置：

1.如想要让最外层背景可见，至少中层背景不能是JPG格式的，可以是PNG格式的带有透明区域的图片，同时，layer层内也不能放置尺寸比例2:1的JPG格式大图，否则会

二、相关尺寸规范：

默认的大背景尺寸比例为2:1，所有的元素其他的小型元素都是在PS中设计好后逐个导出。

大图的尺寸因为相对较大，但还是要控制下大小，尽可能压缩。 三、将所有的元素或者大图在PS等设计软件中完成

将元素在PS等设计软件中设计排版完成后逐个导出PNG或JPG后，再上传到Epub360编辑器设置。PS中的设计示例如图：

只要保证每个小的元素跟大背景的比例正常即可，所有零散的PNG图片都是放在全景容器的layer层里。如图：

也可以将多个小元素放在一张PNG大图（尺寸比例2:1）上导出，作为单独的一层，放在中层背景或Layer层里，看个人的需求。 小技巧：层次之间在滑动屏幕时，会产生错位视觉差效果，做的层次越多，视觉差效果越丰富。 四、在哪里添加设置？

1.高级组件——交互组件——全景容器