愛招飛幫助手冊 愛招飛幫助手冊
  • 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)
        • 全景漫遊(WEB)
        • 傢俱3D展示-視覺化控制元件(WEB)
        • 汽車3D展示-視覺化控制元件(WEB)
        • 別墅3D展示-視覺化控制元件(WEB)
        • 菜譜展示-視覺化控制元件(WEB)
        • 環繞風景展示-視覺化控制元件(WEB)
        • 全景視訊-視覺化控制元件(WEB)
          • 1. 說明
          • 2. 設計明細
          • 3. 指令碼設計
            • 3.1. 指令碼初始設定
          • 4. 運行結果
        • 全景汽車內飾-視覺化控制元件(WEB)
        • CKPlayer視訊播放(WEB)
        • 儀表展示(WEB)
        • 表格數據匯入(WEB)
      • 遠端監控

    • 人工智慧

    • 實體運用

目录

全景視訊-視覺化控制元件(WEB)

# FastWeb之全景視訊-視覺化控制元件

# 1. 說明

  本示例使用egjs-view360全景顯示庫,通過匯入全景的平面視訊實現視訊的全景展示功能。本示例將使用Ug3DVideo為例進行展示。

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

# 2. 設計明細

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

  1:TUgImage元件,控制元件名稱為UgImage01。

  2:TUgLabel元件,控制元件名稱為UgLabel01。

  3:TUg3DVideo元件,控制元件名稱為Ug3DVideo01。

  • 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:設定顯示的字型,點選右側的[√]打開字型設定。
  • Ug3DVideo屬性設定

    • Anchors:設定固定的相對錨點,其中將akLeft、akTop與akRight、akBottom設定為True。

# 3. 指令碼設計

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

# 3.1. 指令碼初始設定

  該程式的指令碼初始設定用於設定要顯示的視訊源的來源。

    //JScript
    function ViewInit()
    {
      Ug3DVideo01.Options.video = "<source src=\"library/js/egjs-view360/examples/img/seven.mp4\" type=\"video/mp4\">";
    }
    
    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
    //PasScript
    Procedure ViewInit;
    Begin
      Ug3DVideo01.Options.video := '<source src="library/js/egjs-view360/examples/img/seven.mp4" type="video/mp4">';
    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
    // Make sure to add code blocks to your code group

    # 4. 運行結果

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

      點選開啟視訊,視訊可進行自由旋轉縮放等相關操作。

    環繞風景展示-視覺化控制元件(WEB)
    全景汽車內飾-視覺化控制元件(WEB)

    ← 環繞風景展示-視覺化控制元件(WEB) 全景汽車內飾-視覺化控制元件(WEB)→

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