傢俱3D展示(WEB)
# FastWeb之傢俱3D展示
# 1. 說明
js-cloudimage-360view是一個簡單且互動性強的庫，可用於虛擬展示產品的相關功能。其原理是通過圖片序列的排序，在界面中以幻燈片的方式展示，點選不同的視角呈現不同的圖片頁面。關於此範例使用的jQueryFrame示例的製作過程請參考360度瀏覽-固定視角-商品自轉。
通過本範例學習，可以掌握在示例中引入3D展示的相關功能。
# 2. 設計明細
開啟FastWeb設計器，分別加入下插圖之控制元件。或者點選左上角的[匯入]選擇模板檔案來打開對應模板。
- 以下控制元件都在TUgContainerPanel元件，控制元件名稱為
UgContainerPanel01的容器中。
1：TUgContainerPanel元件，控制元件名稱為UgContainerPanel02。
2：TUgLabel元件，控制元件名稱為UgLabel01。
3：TUgLabel元件，控制元件名稱為UgLabel02。
4：TUgImage元件，控制元件名稱為UgImage02。
- 以下控制元件都在TUgContainerPanel元件，控制元件名稱為
UgContainerPanel03的容器中。
5：TUgContainerPanel元件，控制元件名稱為UgContainerPanel05。
6：TUgjQueryFrame元件，控制元件名稱為UgjQueryFrame01。
7：TUgContainerPanel元件，控制元件名稱為UgContainerPanel06。
8：TUgContainerPanel元件，控制元件名稱為UgContainerPanel04。
9：TUgImage元件，控制元件名稱為UgImage01。
UgWebRunFrame屬性設定
Height：設定頁面高度=442。Width：設定頁面寬度=960。AlignmentControl：設定控制元件的對齊模式，設定為uniAlignmentClient。
UgContainerPanel01屬性設定
此控制元件為佈局使用的控制元件。作為佈局中使用的容器。
Align：設定對齊的方式，設定為alClient。Layout：設定佈局的模式，設定為hbox。
1：UgContainerPanel02屬性設定
此控制元件為佈局使用的控制元件，作為佈局中使用的容器。
LayoutConfig：設定容器中的控制元件的佈局參數，其中的Flex設定為3，Height設定為100%。
2：UgLabel01屬性設定
Caption：設定顯示的字幕內容，設定為現代風格 弧度系列。Font：設定字型相關的資訊，點選[√]打開字型設定對話方塊，設定字型資訊。
3：UgLabel02屬性設定
Caption：設定顯示的字幕內容，設定為在現代潮流的家居生活中，沉穩內斂的奢華感是年輕群體的追求。季唯系列將意式家居的高度審美引入產品設計中，下分為真皮系列和功能系列，用材質本身的質感呼應高階品位，更是從品質控制、舒適設計、外觀美學上全面升級。。
4：UgImage02屬性設定
Picture：設定顯示的圖片內容，點選[√]，打開圖片對話方塊，選擇對應的圖片進行設定。
UgContainerPanel03屬性設定
Layout：設定佈局相關的資訊，設定為vbox。LayoutConfig：設定佈局的參數資訊，設定Flex為2，Height為100%。
5：UgContainerPanel05屬性設定
LayoutConfig：設定佈局的參數資訊，設定Flex為1。
6：UgjQueryFrame01屬性設定
雙擊控制元件，打開管理器，選擇其中的
360度瀏覽-固定視角-商品自轉選項匯入。Layout：設定佈局資訊，設定為fit。LayoutConfig：設定佈局的參數資訊，Flex設定為5，Width設定為100%。
7：UgContainerPanel06屬性設定
LayoutConfig：設定佈局的參數資訊，設定Flex為1。
8：UgContainerPanel04屬性設定
LayoutConfig：設定佈局的參數資訊，Flex設定為2，Height設定為100%。
9：UgImage01屬性設定
Align：設定對齊方式，設定為alClient。Stretch：設定是否實現拉伸的效果，設定為True。Picture：設定圖片，點選[√]，打開圖片對話方塊，選擇對應的圖片進行設定。
# 3. 程式設計
# 4. 運行結果
使用滑鼠在FastWeb功能表，點選[儲存至資料庫]按鈕，將其儲存至資料庫，點選[除錯運行]確認能夠正常打開。
點選3D展示的圖片，使用滑鼠拖動以顯示旋轉樣式的圖片。