愛招飛幫助手冊 愛招飛幫助手冊
  • FastERP-1
  • Smart
  • PinToo
  • FastWeb
  • FastERP-2 企業管理系統 (opens new window)
  • 印染業ERP (opens new window)
  • 工廠終端機 (opens new window)
  • TARS
  • MARS
  • TaskRunner
  • Flying
  • FastDesk
  • HiDesk
  • HiNAT
  • FastBPM
  • 設備故障診斷 (opens new window)
  • 設備最佳運轉效益 (opens new window)
  • 企業智能助手SmeGPT (opens new window)
  • 燈號管理 (opens new window)
  • 戰情室 (opens new window)
  • 能源管理 (opens new window)
  • 人車定位 (opens new window)
  • 戰情指揮系統 (opens new window)
  • FastERP-1
  • FastWeb
  • Smart
  • PinToo
  • Flying
  • TARS
  • 通用功能

    • Report
    • Script
    • Echarts
    • Chart
    • DB Install
  • FastERP-1
  • Smart
  • PinToo
  • FastWeb
  • FastERP-2 企業管理系統 (opens new window)
  • 印染業ERP (opens new window)
  • 工廠終端機 (opens new window)
  • TARS
  • MARS
  • TaskRunner
  • Flying
  • FastDesk
  • HiDesk
  • HiNAT
  • FastBPM
  • 設備故障診斷 (opens new window)
  • 設備最佳運轉效益 (opens new window)
  • 企業智能助手SmeGPT (opens new window)
  • 燈號管理 (opens new window)
  • 戰情室 (opens new window)
  • 能源管理 (opens new window)
  • 人車定位 (opens new window)
  • 戰情指揮系統 (opens new window)
  • FastERP-1
  • FastWeb
  • Smart
  • PinToo
  • Flying
  • TARS
  • 通用功能

    • Report
    • Script
    • Echarts
    • Chart
    • DB Install
  • FastWeb幫助主頁
  • 學習手冊

  • 開發手冊

    • 通訊協議

    • 互動輸出

    • 媒體存取

      • 文件媒體

        • 網路文件瀏覽(WEB)
        • 網路視訊播放(WEB)
        • 網路視訊播放(APP)
        • 傢俱3D展示(WEB)
        • 汽車3D展示(WEB)
        • 別墅3D展示(WEB)
        • 菜譜展示(WEB)
        • 環繞風景展示(WEB)
        • 全景視訊(WEB)
        • 全景汽車內飾(WEB)
          • 1. 說明
          • 2. 設計明細
          • 3. 程式設計
            • 3.1. 程式初始設定
            • 3.2. 事件設定
          • 4. 運行結果
        • 全景漫遊(WEB)
        • 傢俱3D展示-視覺化控制元件(WEB)
        • 汽車3D展示-視覺化控制元件(WEB)
        • 別墅3D展示-視覺化控制元件(WEB)
        • 菜譜展示-視覺化控制元件(WEB)
        • 環繞風景展示-視覺化控制元件(WEB)
        • 全景視訊-視覺化控制元件(WEB)
        • 全景汽車內飾-視覺化控制元件(WEB)
        • CKPlayer視訊播放(WEB)
        • 儀表展示(WEB)
        • 表格數據匯入(WEB)
      • 遠端監控

    • 人工智慧

    • 實體運用

目录

全景汽車內飾(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
    //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
    // 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
      //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
      // Make sure to add code blocks to your code group

      # 4. 運行結果

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

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

      全景視訊(WEB)
      全景漫遊(WEB)

      ← 全景視訊(WEB) 全景漫遊(WEB)→

      Copyright © 2021-2025 愛招飛IsoFace | ALL Rights Reserved
      • 跟随系统
      • 浅色模式
      • 深色模式
      • 阅读模式