FVS組件樣式屬性

適用場景：安裝了「FineVis數據可視化」插件的使用者，可參考本文了解 FVS 範本的相關功能。

注：不支援行動端。

1.1 版本

1.2 功能簡介

本文將簡單介紹組件樣式、組件屬性等設定項。如下圖所示：

2.1 邊框背景

選中一個組件，點選右側配置欄的「組件」，可設定組件邊框背景，預設為無，可設定為顔色、我的資源、自訂上傳。

注：設定組件邊框背景僅對選中的組件生效，不影響其他組件。

2.1.1 顔色

選擇邊框背景為顔色時，可以點選色塊選擇顔色，也可手動輸入色值。支援調整不透明度。如下圖所示：

2.1.2 我的資源

注：「我的資源」在 V1.12.0 之前的版本中對應功能為「內建素材」。

1）選擇素材

選擇 我的資源 後點選下方方框選擇素材，預設篩選所有圖片資源的「邊框」，也可以修改篩選條件查看其他圖片。如下圖所示：

2）填充方式

若選擇的圖片設定了 點九圖填充 ，那麼選擇該圖片後，填充方式預設為「點九圖填充」 ，可選擇三種顯示倍數，也可切換為「普通填充」。

若圖片未設定「點九圖填充」，則填充方式僅顯示「普通填充」，包括適應、填充或拉伸三種效果。

3）還可以透過改變色相、不透明度調整已選素材效果。

2.1.3 自訂上傳

1）選擇「自訂上傳」方式後，點選「選擇」，點選「 上傳圖片」，即可選擇本地圖片檔案聯集傳。

2）支援上傳的檔案格式包括 jpg、jpeg、png、apng、gif 和 webp 。

3）上傳後，選中圖片時將滑鼠懸浮於圖片，可設定「點九圖填充」。

4）選擇圖片後，同樣支援設定填充方式、色相和不透明度。如下圖所示：

2.2 圓角半徑

支援分為「整體」或「單個」設定組件圓角，可按照像素 px 或百分比 % 設定圓角半徑。如下圖所示：

範例效果如下所示：

範例	效果
效果一：將圓角半徑整體設定為 20px 效果二：將圓角半徑單個設定，左上及右下圓角半徑設定為 40px，其餘圓角設定為 0px 效果三：將圓角半徑整體設定為 50%

2.3 毛玻璃

為突出內容，弱化背景，可開啟上層組件的毛玻璃效果。

勾選「毛玻璃效果」後，組件背景呈現一種毛玻璃效果。可自訂模糊度，預設模糊度為 10 。

範例效果如下圖所示：

注：組件背景為顔色、內建素材、自訂素材時，組件需設定一定的不透明度才能看見毛玻璃效果。

• 未開啟毛玻璃效果

• 開啟毛玻璃效果，且模糊度為 10 

2.4 倒影

勾選「開啟倒影效果」，可豐富文字、邊框、圖示、3D組件等場景效果。

注：暫不支援修改倒影效果距離、不透明度調整；素材疊加時部分投影可能會出現錯位問題。

範例效果如下圖所示：

2.5 陰影

勾選「開啟陰影效果」，可增加組件立體效果。

支援新增多個陰影，點選「新增陰影」，彈出陰影設定框。設定項如下：

• 陰影名稱：預設為「未命名陰影 數字」，可自訂，不支援重名。

• 陰影樣式：可選擇為「外陰影」或「內陰影」。

• 偏移：可設定 X 和 Y 方向的偏移。偏移為正數時，X 方向陰影顯示在右側，Y 方向陰影顯示在下方；偏移為負數時，X 方向陰影顯示在左側，Y 方向陰影顯示在上方；偏移為 0 時，則四週均有陰影效果。

• 模糊度：可設定陰影的模糊度，預設為 6px 。

• 範圍：可設定陰影的範圍。

• 顔色：可設定陰影的顔色。

有多個陰影時，列表下方的陰影顯示在最外層。可透過滑鼠拖曳行動陰影順序。如下圖所示：

範例效果如下圖所示：

注：三維組件或圖片組件設定「內陰影」時，可能會被組件本身的內容改寫，而導緻看起來無陰影效果。

3.1 名稱

使用者可自行修改組件名稱，如下圖所示：

• 組件建立時，預設會賦予一個初始名稱，初始名稱的規則為【頁面名稱 組件型別 n】，如【頁面1_餅圖1】

• 組件名稱不可為空。

• 同一頁面下，組件不可重名。同一畫布不同頁面下，組件支援同名。

• 組件複制貼補時，如果當前頁有同名的組件，則貼補的組件自動修改名稱，自動新增名稱後綴【_c】。如果當前頁沒有同名組件，則貼補的組件保持原名稱。

3.2 尺寸

組件的寬高設定，單位為px。

• 組件尺寸的修改有兩種方法：可在配置欄輸入指定數值，也可在畫布中手動拖拉調整尺寸。

• 設定組件尺寸時，可在配置欄鎖定組件寬高比，防止組件漸變。預設不開啟。

• 畫布尺寸的變化，不會影響組件尺寸。

3.3 位置

組件位置，指的是組件左上角與頁面左上角的橫縱距離值。如下圖所示：

3.4 內邊距

組件內邊距，是指組件邊框和組件內容之間的留白。

可設定組件的上下左右內邊距，如下圖所示：

3.5 3D旋轉

可以分別設定x，y，z軸方向上的旋轉角度。角度調整範圍為0～360，預設為0。

可以設定組件的透視距離，設定範圍為正值，預設為500。

如果是單個組件設定3D旋轉，對應的旋轉中心為該組件中心。

如果是組合的組件設定3D旋轉，對應的旋轉中心為組的中心。

如果是多套成組巢，則組件設定的旋轉中心為上一層組的中心，不考慮再往上層級的情況。

3.6 不透明度

組件整體的不透明度，設定範圍為0～100。預設為100。