環繞風景展示-視覺化控制元件(WEB)
# FastWeb之環繞風景展示-視覺化控制元件(WEB)
# 1. 說明
本示例使用egjs-view360全景顯示庫，通過匯入全景的平面圖片實現影象的圓柱形全景展示功能。以下以關聯的Ug3DAngle控制元件為例進行說明。
通過本範例學習，可以掌握匯入圓柱形全景元件的方式，從而實現引用的功能。
# 2. 設計明細
開啟FastWeb設計器，分別加入下插圖之控制元件。或者點選左上角的[匯入]選擇模板檔案來打開對應模板。
1：TUgLabel元件，控制元件名稱為UgLabel01。
2：TUg3DAngle元件，控制元件名稱為Ug3DAngle01。
3：TUgLabel元件，控制元件名稱為UgLabel02。
UgWebRunFrame屬性設定
Height：設定頁面高度=600。Width：設定頁面寬度=800。
2：Ug3DAngle屬性設定
Align：設定對齊的方式，設定為alClient。
1：UgLabel01屬性設定
Caption：設定標籤顯示的文字內容資訊，設定為全景探秘 揭開隱藏於自然的謎題。Font：設定顯示的字型資訊，點選右側的[√]打開字型設定界面，按照下面的樣式進行設定。
3：UgLabel02屬性設定
Anchors：設定錨定的標記位置，將akLeft與akTop設定為False，將akRight與akBottom設定為True。Caption：設定標籤顯示的文字內容資訊，設定為漫步於此 感受自然之美。Font：設定顯示的字型資訊，點選右側的[√]打開字型設定界面，按照下面的樣式進行設定。
# 3. 指令碼設計
點選指令碼設計界面右下角的按鈕，切換至單元選擇界面，勾選需要使用的單元。該程式指令碼無需引用單元。
# 3.1. 指令碼初始設定
該程式指令碼初始設定將全景圖片地址載入至控制元件中並顯示。
//JScript
Procedure ViewInit()
{
//設定全景圖片的來源
Ug3DAngle01.Options.image = "library/js/egjs-view360/examples/img/smartphone-panorama-picture.jpg";
//設定專案的型別
Ug3DAngle01.Options.projectionType = pt_panorama;
}
function UgWebRunFrameOnAfterRunScript(sender)
{
UGMM.LC(Self);
}
{
ViewInit();
Self.OnAfterRunScript = &UgWebRunFrameOnAfterRunScript;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//PasScript
Procedure ViewInit;
Begin
//設定全景圖片的來源
Ug3DAngle01.Options.image := 'library/js/egjs-view360/examples/img/smartphone-panorama-picture.jpg';
//設定專案的型別
Ug3DAngle01.Options.projectionType := pt_panorama;
End;
procedure UgWebRunFrameOnAfterRunScript(const sender: tobject);
begin
UGMM.LC(Self);
end;
Begin
ViewInit;
End.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// Make sure to add code blocks to your code group
# 4. 運行結果
使用滑鼠在FastWeb功能表，點選[儲存至資料庫]按鈕，將其儲存至資料庫，點選[除錯運行]確認能夠正常打開。
界面中顯示的全景圖為圓柱形全景圖，可通過滑鼠拖動界面顯示。