全部產品
Search
文件中心

DataV:全屏切換

更新時間:Jun 19, 2024

本文介紹全屏切換組件的圖表樣式和各配置項的含義。

圖表樣式

全屏切換支援切換表徵圖和背景樣式配置,支援自訂背景的顯隱,能夠靈活地在全屏展示和小屏展示中進行切換。image

配置面板image

  • 搜尋配置:單擊配置面板右上方的搜尋配置,可在搜尋配置面板中輸入您需要搜尋的配置項名稱,快速定位到該配置項,系統支援模糊比對。詳情請參見搜尋資產配置

  • 圖表尺寸:包括組件的寬度和高度,單位為px。可單擊鎖定長寬比按鍵表徵圖鎖定組件的寬高比,等比例修改組件的寬高。再次單擊進行解鎖,解鎖後寬高比不受限制。
  • 圖表位置:包括組件的橫座標縱座標,單位為px。橫座標為組件左上方距離頁面左邊界的像素距離,縱座標為組件左上方距離頁面上邊界的像素距離。
  • 旋轉角度:以組件的中心為中心點,進行旋轉,單位為度(°)。
    • 手動輸入角度值,控制組件的旋轉角度。
    • 拖動圓圈旋轉控製圖標表徵圖內的黑點,控制組件的旋轉角度。
    • 單擊左右翻轉表徵圖表徵圖,控制組件左右翻轉樣式。
    • 單擊上下翻轉表徵圖表徵圖,控制組件上下翻轉樣式。
  • 不透明度:取值範圍為0~1。為0時,圖表隱藏;為1時,圖表全部顯示。預設為1
  • 全螢幕顯示:配置全螢幕顯示的表徵圖。如果您需要使用遠程伺服器上的圖片,請在上方的輸入框中輸入圖片的URL地址;單擊圖片框內的預覽,即可預覽圖片的大圖樣式;單擊圖片輸入框下方的虛線框內的更改,更改圖片。

  • 退出全屏:配置退出全屏的表徵圖。如果您需要使用遠程伺服器上的圖片,請在上方的輸入框中輸入圖片的URL地址;單擊圖片框內的預覽,即可預覽圖片的大圖樣式;單擊圖片輸入框下方的虛線框內的更改,更改圖片。

  • 背景顏色:圖片底部的填充色,請參見顏色選取器說明進行修改。

  • 圓角:配置組件的背景形狀。預設為50%顯示為圓形。如果為0%,則顯示為正方形。imageimage

    說明

    如果組件不是正方形,那麼圓角為50%時背景顯示為橢圓形。image

  • 始終顯示圖片背景:開啟開關,可視化應用中始終顯示圖片背景;關閉開關,只有在滑鼠移至組件上時,才顯示圖片背景。

說明

只有在預覽或發佈頁面下,才能看到您配置的樣式。全屏轉場樣式預覽

資料面板

此組件不需要進行資料配置。

互動面板

此組件不需要進行互動事件配置。

藍圖編輯器互動配置

  1. 在畫布編輯器頁面,按右鍵組件,選擇匯出到藍圖編輯器
  2. 單擊頁面左上方的藍圖表徵圖表徵圖。
  3. 在藍圖編輯器配置頁面,單擊匯入節點欄內的全屏切換組件,在畫布中可以看到如下圖所示的全屏切換的藍圖編輯器配置參數。節點編程參數配置

    • 事件

      參數

      說明

      當進入全螢幕時

      當進入全螢幕時拋出的事件,不需要參數。

      當退出全螢幕時

      當退出全螢幕時拋出的事件,不需要參數。

    • 動作

      動作

      說明

      進入全螢幕

      不需要參數。

      退出全螢幕

      不需要參數。

      更新群組件配置

      動態更新組件的樣式配置。需要先在組件的配置面板中,單擊複製配置到剪貼簿,擷取組件配置資料。再根據需要在藍圖編輯器配置頁面的資料處理節點中更改對應樣式的欄位值。

      顯示

      顯示組件,參考資料樣本如下。

      return {
        "animationType": "",
        "animationDuration": 1000,
        "animationEasing": "linear"
      };

      隱藏

      隱藏組件,參考資料樣本如下。

      return {
        "animationType": "",
        "animationDuration": 1000,
        "animationEasing": "linear"
      };

      切換顯隱狀態

      切換組件顯示或者隱藏,參考資料樣本如下。

      return {
        "animationIn": {
          "animationType": "",
          "animationDuration": 1000,
          "animationEasing": "linear"
        },
        "animationOut": {
          "animationType": "",
          "animationDuration": 1000,
          "animationEasing": "linear"
        }
      };

      移動

      將組件移動到指定位置,參考資料樣本如下。

      return {
        // 移動方式。絕對位置:to,相對定位:by。預設值:to。
        "positionType": "to",
        // 指定位置。x座標,y座標。
        "attr": {
          "x": 0,
          "y": 0
        },
        // 動畫方式。
        "animation": {
          "enable": false,
          // 動畫延時。
          "animationDuration": 1000,
          // 動畫曲線。可選值為:linear|easeInOutQuad|easeInOutExpo。
          "animationEasing": "linear"
        }
      };