FastWeb之全景汽車內飾-視覺化控制元件(WEB)

1. 說明

  本示例使用egjs-view360全景顯示庫，通過匯入全景的平面圖片實現圖片的全景展示功能。本示例將使用Ug3DAngle來實現全景圖片展示的相關功能。

  通過本範例學習，可以掌握全景圖片的引入方式，從而實現引用全景圖片的相關功能。

2. 設計明細

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

  1：TUgImage元件，控制元件名稱為UgImage01。

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

  3：TUg3DAngle元件，控制元件名稱為Ug3DAngle01。

• UgWebRunFrame屬性設定

  • Height：設定頁面高度=600。
  • Width：設定頁面寬度=800。

• 1：UgImage01屬性設定

  • Align：設定控制元件的對齊方式，設定為alClient。
  • Picture：設定控制元件使用的圖片，點選右側[√]打開圖片編輯器，選擇圖片上傳。
  • Stretch：設定圖片是否根據控制元件進行拉伸操作，設定為True。

• 2：UgLabel01屬性設定

  • Alignment：設定文字內容的對齊方式，設定為taCenter。
  • Anchors：設定固定的相對錨點，其中將akLeft、akTop與akRight設定為True，akBottom設定為False。
  • Autosize：設定控制元件尺寸是否根據文字內容長度自動變化，此處設定為False。
  • Caption：設定顯示的文字內容，設定為出奇不意的設計，實實在在的享受。。
  • Font：設定顯示的字型，點選右側的[√]打開字型設定。

  

3. 指令碼設計

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

3.1. 指令碼初始設定

  該程式指令碼初始設定用於傳遞顯示的全景圖片源。

//JScript
function ViewInit()
{
  Ug3DAngle01.Options.image = "library/js/egjs-view360/examples/img/equi-car-inside.jpg";
  Ug3DAngle01.Options.projectionType = pt_equirectangular;
}

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

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

//PasScript
Procedure ViewInit;
Begin
  Ug3DAngle01.Options.image := 'library/js/egjs-view360/examples/img/equi-car-inside.jpg';
  Ug3DAngle01.Options.projectionType := pt_equirectangular;
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功能表，點選[儲存至資料庫]按鈕，將其儲存至資料庫，點選[除錯運行]確認能夠正常打開。

  在視窗中可顯示汽車內飾的全景圖片。