環繞風景展示(WEB)

# FastWeb之環繞風景展示

# 1. 說明

本示例使用egjs-view360全景顯示庫，通過匯入全景的平面圖片實現影象的圓柱形全景展示功能。關於此示例使用的元件詳情可檢視3D圓柱實景-風景瀏覽。

通過本範例學習，可以掌握匯入圓柱形全景元件的方式，從而實現引用的功能。

# 2. 設計明細

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

TUgPanel元件，控制元件名稱為UgPanel01，此控制元件是界面佈局的整體容器。

TUgContainerPanel元件，控制元件名稱為UgContainerPanel01，此控制元件為頂部佈局的容器。

1：TUgPanel元件，控制元件名稱為UgPanel02，此控制元件是頂部佈局的容器中的部分，用於顯示文字。

TUgContainerPanel元件，控制元件名稱為UgContainerPanel02，此控制元件為底部佈局的容器。

TUgContainerPanel元件，控制元件名稱為UgContainerPanel03，此控制元件為底部左側佈局的容器。

2：TUgURLFrame元件，控制元件名稱為UgURLFrame01，此控制元件用於顯示全景頁面內容。

TUgContainerPanel元件，控制元件名稱為UgContainerPanel04，此控制元件為底部右側佈局的容器。

TUgTimer元件，控制元件名稱未UgTimer01。

UgWebRunFrame屬性設定
- Height：設定頁面高度=600。
- Width：設定頁面寬度=800。
- AlignmentControl：設定控制元件對齊的方式，設定為uniAlignmentClient。
UgPanel01屬性設定
- Align：設定對齊的方式，設定為alClient。
- Layout：設定佈局的方式，設定為vbox。
- Background.Picture：設定背景圖片，點選打開圖片編輯器，選擇圖片進行上傳。
UgContainerPanel01屬性設定
- Layout：設定佈局的形式，設定為fit。
- LayoutConfig：設定佈局的參數，設定Flex為1，設定Width為100%。
1：UgPanel02屬性設定
- Caption：設定顯示的文字內容，設定為親近自然，感受世間和諧。
- Font：設定顯示的字型資訊，點選√打開字型設定界面。
UgContainerPanel02屬性設定
- Layout：設定佈局的形式，設定為hbox。
- LayoutConfig：設定佈局的參數，設定Flex為5，設定Width為100%。
UgContainerPanel03屬性設定
- LayoutConfig：設定佈局的參數，設定Flex為1。
2：UgURLFrame01屬性設定
- LayoutConfig：設定佈局的參數，設定Flex為14，Height為87%。
雙擊控制元件，打開控制元件選擇器，選擇3D圓柱實景-風景瀏覽。
UgContainerPanel04屬性設定
- LayoutConfig：設定佈局的參數，設定Flex為1。
UgTimer01屬性設定
- Interval：設定定時器的時間間隔，單位為ms，設定為100。

# 3. 程式設計

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

# 3.1. 程式初始設定

該程式包含一些初始化的相關設定。

//JScript
  //圖片源
  var param_image = "library/js/egjs-view360/examples/img/smartphone-panorama-picture.jpg";
  //型別
  var param_type = "panorama";
  //啟用縮放
  var param_useZoom = "false";
  //橫向視角範圍
  var param_yawRange = "[-180,180]";
  //縮放視角範圍
  var param_fovRange = "[0,30]";

{
  UgURLFrame01.Init("A67013FB-C32E-49D1-8304-08091D33E1F8");
  Self.OnAfterRunScript = &UgWebRunFrameOnAfterRunScript;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

//PasScript
Var
  //圖片源
  param_image: string = 'library/js/egjs-view360/examples/img/smartphone-panorama-picture.jpg';
  //型別
  param_type: string = 'panorama';
  //啟用縮放
  param_useZoom: string = 'false';
  //橫向視角範圍
  param_yawRange: string = '[-180,180]';
  //縮放視角範圍
  param_fovRange: string = '[0,30]';
  
procedure UgWebRunFrameOnAfterRunScript(const sender: tobject);
begin
  UGMM.LC(Self);
end;

Begin
  UgURLFrame01.Init('A67013FB-C32E-49D1-8304-08091D33E1F8');
End.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

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

# 3.2. 事件設定

UgTimer01-OnTimer事件

定時器的觸發事件，用於動態載入配置參數項的內容。

//JScript
function UgTimer01OnTimer(sender)
{
  UgURLFrame01.JSONToData("{" +
	"\"param_image\":\"" + param_image + "\"," + 
  "\"param_type\":\"" + param_type + "\"," + 
  "\"param_useZoom\":\"" + param_useZoom + "\"," +
  "\"param_yawRange\":\"" + param_yawRange + "\"," +
  "\"param_fovRange\":\"" + param_fovRange + "\"" +
	"}");
  UgTimer01.Enabled = False;
}

1
2
3
4
5
6
7
8
9
10
11
12

//PasScript
procedure UgTimer01OnTimer(sender: tobject);
begin
  UgURLFrame01.JSONToData('{' +
	'"param_image":"' + param_image + '",' + 
  '"param_type":"' + param_type + '",' + 
  '"param_useZoom":"' + param_useZoom + '",' +
  '"param_yawRange":"' + param_yawRange + '",' +
  '"param_fovRange":"' + param_fovRange + '"' +
	'}');
  UgTimer01.Enabled := False;
end;

1
2
3
4
5
6
7
8
9
10
11
12

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

# 4. 運行結果

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

界面中顯示的全景圖為圓柱形全景圖，可通過滑鼠拖動界面顯示。

← 菜譜展示(WEB) 全景視訊(WEB)→