FastWeb之別墅3D展示-視覺化控制元件

1. 說明

  js-cloudimage-360view是一個簡單且互動性強的庫，可用於虛擬展示產品的相關功能。其原理是通過圖片序列的排序，在界面中以幻燈片的方式展示，點選不同的視角呈現不同的圖片頁面。此示例將使用目前庫關聯的控制元件TUg3DView來實現3D展示的相關功能。

  通過本範例學習，可以掌握在示例中引入3D展示的相關功能。

2. 設計明細

  開啟FastWeb設計器，分別加入下插圖之控制元件。或者點選左上角的[匯入]選擇模板檔案來打開對應模板。

  1：TUgContainerPanel元件，控制元件名稱為UgContainerPanel01。

  2：TUgLabel元件，控制元件名稱為UgLabel01。

  3：TUgLabel元件，控制元件名稱為UgLabel02。

  4：TUgLabel元件，控制元件名稱為UgLabel03。

  5：TUgLabel元件，控制元件名稱為UgLabel04。

  6：TUgContainerPanel元件，控制元件名稱為UgContainerPanel01。

  7：TUgContainerPanel元件，控制元件名稱為UgContainerPanel04。

  8：TUg3DView元件，控制元件名稱為Ug3DView01。

  9：TUgContainerPanel元件，控制元件名稱為UgContainerPanel05。

  10：TUgContainerPanel元件，控制元件名稱為UgContainerPanel03。

  11：TUgContainerPanel元件，控制元件名稱為UgContainerPanel06。

  12：TUg3DView元件，控制元件名稱為Ug3DView02。

  13：TUgContainerPanel元件，控制元件名稱為UgContainerPanel07。

• UgWebRunFrame屬性設定

  • AlignmentControl：設定其下子控制元件的對齊方式，設定為uniAlignmentClient。
  • Layout：設定顯示的佈局樣式，設定為vbox。
  • Height：設定頁面高度=600。
  • Width：設定頁面寬度=800。

• 1：UgContainerPanel01屬性設定

  • LayoutConfig：設定佈局的設定，其中Flex設定為2，Width設定為100%。

• 2：UgLabel01屬性設定

  • AutoSize：設定控制元件的尺寸是否跟隨標籤中的內容來顯示，設定為False。
  • Caption：設定顯示的字幕的內容，設定為不追求獨特風格 — 而著眼於恒久的美，採用現代簡約的設計語言，寬大的落地窗戶搭配素色外墻，讓建築歷久彌新。。

• 3：UgLabel02屬性設定

  • AutoSize：設定控制元件的尺寸是否跟隨標籤中的內容來顯示，設定為False。
  • Caption：設定顯示的字幕的內容，設定為全屋搭配智慧控制系統，預設多種居家場景，在不同的場景下呈現不同的環境效果，舒適感大幅提升。。

• 4：UgLabel03屬性設定

  • Caption：設定顯示的字幕的內容，設定為秀外。
  • Font：設定顯示的文字的字型，點選右側的[√]，打開字型設定對話方塊，設定其中的文字資訊。顯示如下。

  

• 5：UgLabel04屬性設定

  • Caption：設定顯示的字幕的內容，設定為慧中。
  • Font：設定顯示的文字的字型，點選右側的[√]，打開字型設定對話方塊，設定其中的文字資訊。顯示如下。

  

• 6：UgContainerPanel02屬性設定

  • Layout：設定子控制元件的佈局模式，設定為hbox。
  • LayoutConfig：設定佈局的設定，其中Flex設定為2，Width設定為100%。

• 7：UgContainerPanel04屬性設定

  • LayoutConfig：設定佈局的設定，其中Flex設定為2，Height設定為100%。

• 8：Ug3DView01屬性設定

  • LayoutConfig：設定佈局的設定，其中Flex設定為4，Height設定為100%。

• 9：UgContainerPanel05屬性設定

  • LayoutConfig：設定佈局的設定，其中Flex設定為2，Height設定為100%。

• 10：UgContainerPanel03屬性設定

  • Layout：設定子控制元件的佈局模式，設定為hbox。
  • LayoutConfig：設定佈局的設定，其中Flex設定為2，Width設定為100%。

• 11：UgContainerPanel06屬性設定

  • LayoutConfig：設定佈局的設定，其中Flex設定為2，Height設定為100%。

• 12：Ug3DView02屬性設定

  • LayoutConfig：設定佈局的設定，其中Flex設定為4，Height設定為100%。

• 13：UgContainerPanel07屬性設定

  • LayoutConfig：設定佈局的設定，其中Flex設定為2，Height設定為100%。

3. 程式設計

  點選程式設計界面右下角的按鈕，切換至單元選擇界面，勾選需要使用的單元。該程式的程式無需引用單元。

3.1. 程式初始設定

  該程式初始設定為兩個3D展示控制元件的相關設定。

//JScript
Procedure ViewInit()
{
  //圖片序列的地址
  Ug3DView01.Options.data_folder = "library/js/js-cloudimage-360-view/demo/outdoor/";
  //圖片序列的名稱，包含命名規則{index}
  Ug3DView01.Options.data_filename = "00_Haus_000{index}.jpg";
  //圖片序列的數量
  Ug3DView01.Options.data_amount = 30;
  //是否顯示向前按鈕
  Ug3DView01.Options.button_prev = True;
  //是否顯示向後按鈕
  Ug3DView01.Options.button_next = True;
  //是否反向旋轉
  Ug3DView01.Options.data_spin_reverse = True;
  //是否設定首尾循環
  Ug3DView01.Options.data_stop_at_edges = True;
  
  //圖片序列的地址
  Ug3DView02.Options.data_folder = "library/js/js-cloudimage-360-view/demo/indoor/";
  //圖片序列的名稱，包含命名規則{index}
  Ug3DView02.Options.data_filename = "{index}.jpeg";
  //圖片序列的數量
  Ug3DView02.Options.data_amount = 30;
  //是否顯示向前按鈕
  Ug3DView02.Options.button_prev = True;
  //是否顯示向後按鈕
  Ug3DView02.Options.button_next = True;
  //是否反向旋轉
  Ug3DView02.Options.data_spin_reverse = True;
  //是否設定首尾循環
  Ug3DView02.Options.data_stop_at_edges = True;
}

function UgWebRunFrameOnAfterRunScript(sender)
{
  UGMM.LC(Self);
}

{
  ViewInit();
  Self.OnAfterRunScript = &UgWebRunFrameOnAfterRunScript;
}

//PasScript
Procedure ViewInit;
Begin
  //圖片序列的地址
  Ug3DView01.Options.data_folder := 'library/js/js-cloudimage-360-view/demo/outdoor/';
  //圖片序列的名稱，包含命名規則{index}
  Ug3DView01.Options.data_filename := '00_Haus_000{index}.jpg';
  //圖片序列的數量
  Ug3DView01.Options.data_amount := 30;
  //是否顯示向前按鈕
  Ug3DView01.Options.button_prev := True;
  //是否顯示向後按鈕
  Ug3DView01.Options.button_next := True;
  //是否反向旋轉
  Ug3DView01.Options.data_spin_reverse := True;
  //是否設定首尾循環
  Ug3DView01.Options.data_stop_at_edges := True;
  
  //圖片序列的地址
  Ug3DView02.Options.data_folder := 'library/js/js-cloudimage-360-view/demo/indoor/';
  //圖片序列的名稱，包含命名規則{index}
  Ug3DView02.Options.data_filename := '{index}.jpeg';
  //圖片序列的數量
  Ug3DView02.Options.data_amount := 30;
  //是否顯示向前按鈕
  Ug3DView02.Options.button_prev := True;
  //是否顯示向後按鈕
  Ug3DView02.Options.button_next := True;
  //是否反向旋轉
  Ug3DView02.Options.data_spin_reverse := True;
  //是否設定首尾循環
  Ug3DView02.Options.data_stop_at_edges := True;
End;

procedure UgWebRunFrameOnAfterRunScript(const sender: tobject);
begin
  UGMM.LC(Self);
end;

Begin
  ViewInit;
End.

// Make sure to add code blocks to your code group

4. 運行結果

  使用滑鼠在FastWeb功能表，點選[儲存至資料庫]按鈕，將其儲存至資料庫，點選[除錯運行]確認能夠正常打開。上下兩個場景可通過滑鼠點選來實現全景切換的功能。