全景汽車內飾(WEB)
# FastWeb之全景汽車內飾(WEB)
# 1. 說明
本示例使用egjs-view360全景顯示庫，通過匯入全景的平面圖片實現圖片的全景展示功能。關於此元件的建立過程可參考3D球形實景-汽車內飾。
通過本範例學習，可以掌握全景圖片的引入方式，從而實現引用全景圖片的相關功能。
# 2. 設計明細
開啟FastWeb設計器，分別加入下插圖之控制元件。或者點選左上角的[匯入]選擇模板檔案來打開對應模板。
1：TUgImage元件，控制元件名稱為UgImage01。
2：TUgURLFrame元件，控制元件名稱為UgURLFrame01。
3：TUgLabel元件，控制元件名稱為UgLabel01。
4：TUgLabel元件，控制元件名稱為UgLabel02。
TUgTimer元件，控制元件名稱為UgTimer01。
UgWebRunFrame屬性設定
Height：設定頁面高度=600。Width：設定頁面寬度=800。
1：UgImage01屬性設定
Align：設定對齊的方式，設定為alClient。Picture：設定顯示的圖片，點選打開編輯器，選擇圖片進行顯示。
2：UgURLFrame01屬性設定
Anchors：設定控制元件顯示的錨點，分別為akLeft、akRight、akBottom與akTop設定錨點為True。
雙擊控制元件，打開管理器，選擇其中的
汽車內飾全景。3：UgLabel01屬性設定
Anchors：設定控制元件顯示的錨點，分別為akLeft、akTop、akRight設定錨點。Algnment：設定文字的對齊方式，設定為taCenter。Caption：設定文字顯示的內容，設定為華麗卻不失溫馨， 簡單卻不繁瑣。。Font：設定字型資訊，雙擊√打開字型設定視窗，進行字型的相關設定。
4：UgLabel02屬性設定
Anchors：設定控制元件顯示的錨點，分別為akLeft、akTop、akRight設定錨點。Algnment：設定文字的對齊方式，設定為taCenter。Caption：設定文字顯示的內容，設定為出奇不意的設計，實實在在的享受。。Font：設定字型資訊，雙擊√打開字型設定視窗，進行字型的相關設定。
UgTimer01屬性設定
Interval：設定定時器的時間間隔，單位為ms，設定為100。
# 3. 程式設計
點選程式設計界面右下角的按鈕，切換至單元選擇界面，勾選需要使用的單元。該程式的程式不需要引用單元。
# 3.1. 程式初始設定
該程式包含部分程式的初始化設定。
//JScript
//圖片來源
var param_image = "library/js/egjs-view360/examples/img/equi-car-inside.jpg";
//投影型別
var param_type = "equirectangular";
//是否使用縮放
var param_useZoom = "true";
//視角範圍
var param_yawImage = "[-180,180]";
//俯仰範圍
var param_pitchRange = "[-30,30]";
//縮放角度範圍
var param_fovRange = "[10,135]";
function UgWebRunFrameOnAfterRunScript(sender)
{
UGMM.LC(Self);
}
{
UgTimer01.OnTimer = &UgTimer01OnTimer;
Self.OnAfterRunScript = &UgWebRunFrameOnAfterRunScript;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
//PasScript
Var
//圖片來源
param_image: string = 'library/js/egjs-view360/examples/img/equi-car-inside.jpg';
//投影型別
param_type: string = 'equirectangular';
//是否使用縮放
param_useZoom: string = 'true';
//視角範圍
param_yawImage: string = '[-180,180]';
//俯仰範圍
param_pitchRange: string = '[-30,30]';
//縮放角度範圍
param_fovRange: string = '[10,135]';
procedure UgWebRunFrameOnAfterRunScript(const sender: tobject);
begin
UGMM.LC(Self);
end;
Begin
End.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// 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_yawImage + "\"," +
"\"param_pitchRange\":\"" + param_pitchRange + "\"," +
"\"param_fovRange\":\"" + param_fovRange + "\"" +
"}");
UgTimer01.Enabled = False;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
//PasScript
procedure UgTimer01OnTimer(sender: tobject);
begin
UgURLFrame01.JSONToData('{' +
'"param_image":"' + param_image + '",' +
'"param_type":"' + param_type + '",' +
'"param_useZoom":"' + param_useZoom + '",' +
'"param_yawRange":"' + param_yawImage + '",' +
'"param_pitchRange":"' + param_pitchRange + '",' +
'"param_fovRange":"' + param_fovRange + '"' +
'}');
UgTimer01.Enabled := False;
end;
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
// Make sure to add code blocks to your code group
# 4. 運行結果
使用滑鼠在FastWeb功能表，點選[儲存至資料庫]按鈕，將其儲存至資料庫，點選[除錯運行]確認能夠正常打開。
在視窗中可顯示汽車內飾的全景圖片。
