FastWeb之傢俱3D展示-視覺化控制元件

1. 說明

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

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

2. 設計明細

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

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

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

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

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

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

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

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

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

• UgWebRunFrame屬性設定

  • Height：設定頁面高度=600。
  • Width：設定頁面寬度=800。
  • Alignmentontrol：設定此控制元件中的子控制元件的佈局對齊的模式，設定為uniAlignmentClient。
  • Layout：設定控制元件的佈局方式，設定為vbox。

• 1：UgContainerPanel02屬性設定

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

• 5：UgContainerPanel04屬性設定

  • LayoutConfig：設定佈局的相關設定，Flex設定為5，Width設定為100%。

• 2：UgContainerPanel01屬性設定

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

• 3：Ug3DView01屬性設定

  • LayoutConfig：設定佈局的相關設定，Flex設定為5，Height設定為100%。

• 4：UgContainerPanel03屬性設定

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

• 6：UgLabel01屬性設定

  • Caption：設定顯示的文字內容，設定為美式傢俱。
  • Font：設定顯示的字型，點選右側的[√]，打開字型設定對話方塊，按照下圖的方式進行設定。

  

• 7：UgLabel02屬性設定

  • AutoSize：設定控制元件是否跟隨文字變化尺寸大小，設定為False。
  • Caption：設定顯示的文字內容，設定為美式傢俱是殖民地風格傢俱中最典型的代表。是美式傢俱的典型之一。作為歐洲曾經最大的殖民地，美式傢俱融匯了歐洲各國的風格，從而創造出了一種全新的家居風格。。

• 8：UgLabel03屬性設定

  • Caption：設定顯示的文字內容，設定為以下圖形可使用滑鼠左右滑動。

3. 程式設計

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

3.1. 程式初始設定

  該程式程式初始設定用來指定專案的相關設定。

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

  ViewInit();
  Self.OnAfterRunScript = &UgWebRunFrameOnAfterRunScript;

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

Begin
  ViewInit;
End.

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

  設定顯示的初始化。

//JScript
function ViewInit()
{
  //設定圖片序列的名稱，包含了命名規則{index}
  Ug3DView01.Options.data_filename = "chair_{index}.jpg";
  //設定圖片序列的地址目錄
  Ug3DView01.Options.data_folder = "library/js/js-cloudimage-360-view/demo/chair/";
  //設定顯示的圖片數量
  Ug3DView01.Options.data_amount = 30;
  //設定圖片的放大倍數
  Ug3DView01.Options.data_magnifier = 3;
  Ug3DView01.Init;
}

//PasScript
Procedure ViewInit;
Begin
  //設定圖片序列的名稱，包含了命名規則{index}
  Ug3DView01.Options.data_filename := 'chair_{index}.jpg';
  //設定圖片序列的地址目錄
  Ug3DView01.Options.data_folder := 'library/js/js-cloudimage-360-view/demo/chair/';
  //設定顯示的圖片數量
  Ug3DView01.Options.data_amount := 30;
  //設定圖片的放大倍數
  Ug3DView01.Options.data_magnifier := 3;
  Ug3DView01.Init;
End;

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

4. 運行結果

  使用滑鼠在FastWeb功能表，點選[儲存至資料庫]按鈕，將其儲存至資料庫，點選[除錯運行]確認能夠正常打開。

  點選3D展示的圖片，使用滑鼠拖動以顯示旋轉樣式的圖片。