FVS畫布編輯及自適應

適用場景：安裝了「FVS大屏室編輯模式」插件的使用者，可參考本文了解 FVS 範本的相關功能。

注：不支援行動端。

1.1 版本

1.2 功能簡介

本文將簡單介紹 FVS 畫布的屬性及其自適應。

首先使用者需要了解下 FVS 大屏範本的構成：

一張 FVS 大屏範本，就是一張畫布。一張畫布中有多個分頁。每個分頁中有多個組件。

如下圖所示：

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

可手動輸入畫布的寬度和高度，單位為 px，寬高值範圍為 1-50000 px。

輸入自訂尺寸後，點選設計介面空白處即可儲存。畫布尺寸的調整，對當前畫布中的所有分頁均生效。

畫布自適應對整個範本所有分頁生效，共五種自適應方式：自動、高度鋪滿、寬度鋪滿、雙向鋪滿、無。

注：「雙向鋪滿」僅支援 V1.8.0 及之後的版本。

如下圖所示：

3.1 自動

畫布等比例自適應後保持一屏展示，會存在某一個方向兩邊留白，留白處會根據畫布背景適配顏色（推薦使用）：

• 左右兩側留白

• 上下兩側留白

3.2 高度鋪滿

範本預覽時畫布縱向鋪滿，橫向超出時出現捲軸：

3.3 寬度鋪滿

範本預覽時畫布橫向鋪滿，縱向超出時出現捲軸：

3.4 雙向鋪滿

範本內容橫向、縱向均鋪滿整個瀏覽器視窗：

注：雙向鋪滿時，範本頁面/組件背景在雙向鋪滿下可能會顯示錯位，建議將範本頁面/組件的背景填充方式調整為「拉伸」。如下圖所示：

3.5 無自適應

範本展示內容不跟隨瀏覽器比例變化：

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

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

也可以透過捷徑鍵實現畫布的縮放和行動，如下圖所示：

另外 V2.1.1 及之后版本支持通过快捷键 Ctrl+\ （Mac 系统为 cmd+\）进入或退出画布全屏。

.

• 画布全屏作用仅为放大展示，当前模板工具栏、配置项面板等均隐藏，无法进行功能配置，但画布内支持的操作仍可进行。

• 刚刚打开或切换进入模板时，需点击画布或任意组件后，快捷键触发才能生效。

• 不同模板之间，全屏状态独立互不影响。

• 关闭再打开模板，全屏状态不保留。

5.1 輔助線操作

V1.13.1 及之後版本的插件中，畫布支援輔助線功能，可用於定位組件座標，便於調整組件對齊。

操作方式如下：

1）滑鼠在上方或左側的標尺處行動，出現跟隨行動的虛線輔助線，並顯示當前刻度值（單位為 px）。

2）新增輔助線：在標尺上某個位置按即可新增一條輔助線。

3）新增輔助線後，滑鼠行動至已新增的輔助線上，滑鼠變成「雙箭頭」樣式時，可進行以下操作：

• 選中輔助線：按滑鼠左鍵，可選中輔助線。

• 行動輔助線：按住滑鼠左鍵，可拖動輔助線。

• 刪除輔助線：雙擊滑鼠左鍵，或選中輔助線後按下 Delete/Backspace 鍵，或直接拖動輔助線至畫布可視區域外鬆開滑鼠，均可刪除輔助線。

注：以上操作不支援多選批量操作。

4）隱藏輔助線：點選標尺左上頂角的按鈕，支援隱藏所有輔助線，不支援單條隱藏；隱藏後再次新增輔助線，所有輔助線恢復顯示。

5.2 組件座標與對齊

組件在畫布中行動時，存在以下邏輯：

• 組件在畫布中拖動時，組件左上角顯示組件座標「x,y」。

• 當「組件2」拖動與「組件1」平齊或垂直的某個位置時，會出現對齊線，並顯示組件距離。

• 畫布新增輔助線後，組件行動到輔助線位置，可快速吸附對齊輔助線。