反饋已提交

網絡繁忙

FVS畫布和分頁

一、 概述

  1. 本文将簡單介紹 FVS畫布、分頁的相關屬性。

  2. FVS 大屏範本的構成:一張 FVS 大屏範本,就是一張畫布。一張畫布中有多個分頁。每個分頁中有多個組件。如下圖所示。

image.png

二、畫布屬性

1
畫布尺寸。
  1. 新建 FVS 大屏範本時,可以設定畫布尺寸。使用者也可在編輯器正下方調整畫布尺寸。

  2. 可手動輸入畫布的寬度和高度,單位為px,寬高值範圍為300-50000px。

  3. 畫布尺寸的調整,對當前畫布中的所有分頁均生效。

image (1).png

2
畫布自适應。
  1. FVS大屏範本,提供四種畫布自适應方式。如下圖所示。

  2. 畫布自适應方式的調整,對當前畫布中的所有分頁均生效。

  3. 畫布自适應方案具體效果如下表所示。

image (2).png


畫布自适應方案


縮放邏輯

自動

畫布展示頁面充滿浏覽器視窗。

展示頁面寬度 = 浏覽器頁面寬度

展示頁面高度 = 浏覽器頁面高度

組件大小按照 min【浏覽器頁面高度 / 畫布尺寸高度 ,浏覽器頁面寬度 / 畫布尺寸寬度】 的比例縮放。

高度鋪滿

畫布展示頁面高度充滿浏覽器視窗高度。

展示頁面高度 = 浏覽器頁面高度

展示頁面寬度 = max【浏覽器頁面高度 / (畫布尺寸高度 / 畫布尺寸寬度),浏覽器頁面寬度】

組件與畫布等比例縮放。

寬度鋪滿

畫布展示頁面寬度充滿浏覽器視窗寬度。

展示頁面寬度 = 浏覽器頁面寬度

展示頁面高度 = max【浏覽器頁面寬度 / (畫布尺寸寬度 / 畫布尺寸高度),浏覽器頁面高度】

組件大小與畫布寬度等比例縮放。

展示頁面高度 = max【浏覽器頁面高度,畫布尺寸高度】

展示頁面寬度 = max【浏覽器頁面寬度,畫布尺寸寬度】

組件大小不縮放。



3
畫布顯示比例。
  1. 畫布顯示比例的調整,不會改變畫布實際大小,僅影響編輯器中畫布展示的大小。

  2. 支援使用者手動修改縮放值,或在下拉框中選擇預設的縮放值。縮放值需介於10-400之間。

image (3).png

三、分頁屬性

1
新建頁面。
  1. 點選【收起分頁/展開分頁】,可以将分頁區展開/折疊。

  2. 點選【+點選新建頁面】,可新增一個空白頁面。

  3. 右鍵點選選中頁面,點選【複制頁面】,在選中頁後面,新增一張與選中頁相同的頁面,

  4. 右鍵點選選中頁面,點選【删除】,即可删除選中頁面。只有一個頁面時,【删除】按鈕置灰不可用。

  5. 按住頁面拖動,可調整頁面順序。

image (4).png

2
頁面名稱。
  1. 選中頁面。

  2. 點選左上角配置欄中的【頁面】。

  3. 即可手動修改頁面名稱。如下圖所示。

image (5).png

3
頁面背景。
  1. 頁面背景支援四種配置方式:無、顔色、内置素材、自訂上傳。

  2. 詳情請參見:FVS頁面背景&組件背景 。

  3. 頁面背景的配置,僅對選中頁生效,對當前畫布中的其他頁面無影響。

image (6).png

4
分頁過渡。
  1. 提供【平滑過渡】功能。開啓【平滑過渡】按鈕後,如果上一頁與當前頁存在【名稱相同的組件】,轉場動效将有移動轉場效果,上一頁中該組件的【退出動效】将失效。

  2. 詳情請參見:FVS組件框架動畫屬性 。

淡入淡出.gif

 image (7).png

四、範本預覽

  1. 當範本中存在多個頁面時,使用者可在分頁區先為範本進行【預覽播放設定】,如下圖所示。

  2. 設定完成後,點選右上角【預覽】按鈕,即可在浏覽器中預覽該範本。

  3. 根據按鈕的選擇,最終預覽的選擇不盡相同,詳情請參見下表。

image (8).png

image (9).png


自動切換頁面


迴圈播放頁面


顯示切換按鈕


效果



不選

不選

不選

預覽範本時,只能看到範本中的第一張頁面。

滑鼠移動到左下角,出現頁面切換按鈕,點選即可切換頁面。

但是只能從前往後/從後往前切換,不支援從最後一張頁面循環切換到第一張頁面。

 

 

不選

選中

不選


不選

不選

選中

預覽範本時,預設看到第一張頁面。

滑鼠移動到左下角,點選頁面切換按鈕即可切換頁面。

但是只能從前往後/從後往前切換,不支援從最後一張頁面迴圈切換到第一張頁面。

 

不選

選中

選中

預覽範本時,預設看到第一張頁面。

滑鼠移動到右下角,點選頁面切換按鈕即可切換頁面

且可以将最後一張頁面與第一張頁面串聯,支援迴圈切換。

FVS畫布和分頁-预览2.gif

 

 

選中

不選

不選

預覽範本時,預設從第一張頁面順序播放到最後一張頁面,然後靜止在最後一張頁面上。

滑鼠移動到左下角,出現頁面暫停按鈕,點選即可暫停/開始順序播放。

滑鼠移動到左下角,出現頁面切換按鈕:

點選切換下一張,即可切換頁面,如當前暫停了播放,會自動開始順序播放。

點選切換上一張,即可切換頁面,如當前暫停了播放,不會觸發自動播放。

只能從前往後/從後往前切換,不支援從最後一張頁面迴圈切換到第一張頁面。只有重新整理頁面,才能再次預覽。

 

選中

選中

不選

預覽模板時,將最後一張頁面與第一張頁面串聯成一個迴圈,不停歇的迴圈播放。

滑鼠移動到左下角,出現頁面暫停按鈕,點選即可暫停/開始順序播放。

滑鼠移動到左下角,出現頁面切換按鈕:

點選切換下一張,即可切換頁面,如當前暫停了播放,會自動開始順序播放。

點選切換上一張,即可切換頁面,如當前暫停了播放,不會觸發自動播放。

 

選中

不選

選中

預覽範本時,預設從第一張頁面順序播放到最後一張頁面,然後靜止在最後一張頁面上。

左下角自動出現頁面切換按鈕,點選即可切換頁面。

滑鼠移動到左下角:

點選切換下一張,即可切換頁面,如當前暫停了播放,會自動開始順序播放。

點選切換上一張,即可切換頁面,如當前暫停了播放,不會觸發自動播放。

只能從前往後/從後往前切換,不支援從最後一張頁面迴圈切換到第一張頁面。

FVS畫布和分頁-预览5.gif

 

選中

選中

選中

預覽範本時,将最後一張頁面與第一張頁面串聯成一個迴圈,不停歇的從第一張頁面開始迴圈播放。

左下角自動出現頁面切換按鈕,點選即可切換頁面。

滑鼠移動到左下角:

點選切換下一張,即可切換頁面,如當前暫停了播放,會自動開始順序播放。

點選切換上一張,即可切換頁面,如當前暫停了播放,不會觸發自動播放左下角自動出現頁面暫停按鈕,點選即可暫停/開始順序播放。

FVS畫布和分頁-预览6.gif

 

 


附件列表


主題: FineVis數據視覺化
已經是第一篇
已經是最後一篇
  • 有幫助
  • 沒幫助
  • 只是瀏覽
  • 圖片不清晰
  • 用語看不懂
  • 功能說明看不懂
  • 操作說明太簡單
  • 內容有錯誤
中文(繁體)

文 檔回 饋

滑鼠選中內容,快速回饋問題

滑鼠選中存在疑惑的內容,即可快速回饋問題,我們將會跟進處理。

不再提示

10s後關閉