1. 概述
適用場景:安裝了「FVS大屏編輯模式」插件的使用者,可參考本文了解 FVS 範本的相關功能。
注:不支援行動端。
1.1 版本
報表伺服器版本 | JAR包 | 插件版本 |
---|---|---|
11.0 | 2021-11-15 | V1.0.0 |
1.2 功能簡介
在 FVS 中設定頁面背景、組件邊框背景、圖片組件和視頻組件時,都涉及到素材填充方式的設定。本文將要講解的是填充方式的種類及效果。
2. 填充方式型別
設定物件及其支援的填充方式如下表所示:
注:當存在點九圖填充時,適應、填充、拉伸分類為「普通填充」。
設定物件 | 支援的填充方式 |
---|---|
頁面背景 | 適應、填充、拉伸、點九圖填充 |
組件邊框背景 | 適應、填充、拉伸、點九圖填充 |
圖片組件內容 | 適應、填充、拉伸 |
本地視頻組件內容 | 適應、拉伸 |
3. 普通填充效果
普通填充效果如下表所示:
普通填充方式 | 說明 | 效果 |
---|---|---|
適應 | 圖片寬高比不變,等比拉大/縮減圖片,確定寬/高充滿頁面/組件即可 | ![]() |
填充 | 圖片寬高比不變,圖片大小不變,從左上角開始依次用圖片填充頁面/組件,直到填滿 | ![]() |
拉伸 | 圖片寬度拉伸至頁面/組件寬度,圖片高度拉伸至頁面/組件高度 | ![]() |
4. 點九圖填充效果
設定點九圖的目的主要是為了圖片的四個角不拉伸漸變,所以只有「組件邊框背景」和「頁面背景」支援設定點九圖。
且只有設定了圖片的「點九圖填充」之後,才可以選擇「點九圖填充」。
4.1 設定點九圖
1)若選擇素材時使用「我的資源」,需在 FVS資源複用中心 設定點九圖,將滑鼠懸浮於圖片,點選「設定點九圖」彈出設定框。如下圖所示:
2)若選擇素材時使用「自訂上傳」,上傳圖片後,選中圖片,滑鼠懸浮在選中的圖片上時,點選「設定點九圖」彈出設定框。如下圖所示:
4.2 點九圖效果說明
3)透過拉伸四條線,可以將圖片劃分為四類區域,如下圖所示:
紅色區域寬度高度不變
綠色區域高度不變,寬度拉伸,使得圖片充滿頁面寬度
黃色區域寬度不變,高度拉伸,使得圖片充滿頁面高度
藍色區域高度和寬度拉伸,使得圖片充滿整個頁面
使用「點九圖填充」時,可選擇 3 種不同的倍數效果,紅色區域的寬高會按照倍數調整。如下圖所示: