今天，給大家介紹下我們偉龍智能建站系統(tǒng)的720°全景編輯功能是如何實(shí)現(xiàn)的。

全景頁面結(jié)構(gòu)

上圖是全景展開后的圖示，如你所見，它由外圈背景（2580×1306），內(nèi)圈背景（2360×1206），還有在其上方的部件構(gòu)成。為了方便描述，外圈背景和內(nèi)圈背景使用了純色表示，實(shí)際上它們是兩張圖片。將整塊東西繞著Y軸卷成一個(gè)圓柱體后，就變成了我們?cè)谑謾C(jī)上看到的720°全景：

圓柱體的上方和下方可以看到白色的區(qū)域，是由屬性“背景色”控制的，可以修改成你想要的顏色。


部件
編輯全景中的部件時(shí)，你會(huì)接觸到一個(gè)新的概念：層級(jí)。一共有10個(gè)層級(jí)，可以這樣理解，層級(jí)越小，越靠近背景；層級(jí)越大，越靠近觀看者。高層級(jí)的部件看起來會(huì)比實(shí)際尺寸更大，和我們?cè)诂F(xiàn)實(shí)中遠(yuǎn)小近大的觀感一致。

- 最大寬度

部件在每個(gè)層級(jí)中都有一個(gè)最大寬度，超過這個(gè)寬度有可能兩邊會(huì)被背景切割遮擋。各層級(jí)最大寬度參照表：

請(qǐng)嚴(yán)格遵循上表設(shè)置各層級(jí)部件尺寸，務(wù)必不能超出最大寬度。

- 面向角度

全景中所有部件都會(huì)調(diào)整成面向圓柱體的Y軸，因此即使在編輯時(shí)看起來是處于一個(gè)平面的兩個(gè)部件，實(shí)際觀看時(shí)都有可能會(huì)斜切，即使他們?cè)谕粋€(gè)層級(jí)上。

↑ 編輯時(shí)（這兩個(gè)方塊處在同一層級(jí)，且有重疊）

↑ 實(shí)際效果，由于調(diào)整了面向角度，它們相切了

要避免這種情況，有兩個(gè)方法：
a)部件之間盡量不要有重疊；

b)如果需要做重疊效果，請(qǐng)把部件水平居中對(duì)齊。示例：

↑ 編輯時(shí)將它們水平居中

↑ 實(shí)際效果
如果N個(gè)部件水平居中對(duì)齊，那么不管它們處在什么層級(jí)都不會(huì)有相切的情況


外/內(nèi)圈背景
外/內(nèi)圈背景圖片設(shè)計(jì)難度較高，如果你不是專業(yè)設(shè)計(jì)師，建議不要修改背景圖片，直接選擇合適的全景模板修改部件內(nèi)容。

- 強(qiáng)制尺寸
外圈背景2580×1306，內(nèi)圈背景 2360×1206。這是一個(gè)強(qiáng)制的尺寸，即使你的背景圖片像素區(qū)域沒那么大，也要預(yù)留空白像素，做成所要求尺寸的部分透明PNG圖片。

- 左右邊緣銜接
由于背景圖片最終要卷成圓柱狀，設(shè)計(jì)時(shí)需要留意讓圖片的左側(cè)和右側(cè)完美拼合。

- 背景內(nèi)容
全景中不宜添加尺寸過大的部件，因此你應(yīng)該把想表現(xiàn)的大部分內(nèi)容放在背景圖片上，僅保留相對(duì)較小的、需要添加點(diǎn)擊事件的部件。