反饋已提交

網絡繁忙

FVS組件樣式屬性

1. 概述

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

注:不支援行動端。

1.1 版本

報表伺服器版本
JAR包插件版本功能變動
11.02021-11-15V1.0.0

11.0.6-V1.5.1組件樣式支援設定圓角、毛玻璃、倒影和陰影效果,優化組件展示效果

1.2 功能簡介

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

2. 組件樣式

2.1 邊框背景

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

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

2.1.1 顔色

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

2.1.2 我的資源

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

1)選擇素材

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

2023-10-26_21-19-40.gif

2)填充方式

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

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

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

2.1.3 自訂上傳

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

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

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

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

2023-10-26_21-35-47.gif

2.2 圓角半徑

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

範例效果如下所示:

範例
效果

效果一:將圓角半徑整體設定為 20px

效果二:將圓角半徑單個設定,左上及右下圓角半徑設定為 40px,其餘圓角設定為 0px

效果三:將圓角半徑整體設定為 50%

2.3 毛玻璃

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

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

範例效果如下圖所示:

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

  • 未開啓毛玻璃效果

  • 開啓毛玻璃效果,且模糊度為 10 

2.4 倒影

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

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

範例效果如下圖所示:

2.5 陰影

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

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

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

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

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

  • 模糊度:可設定陰影的模糊度,預設為 6px 。

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

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

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

2023-10-26_21-57-03.gif

範例效果如下圖所示:

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

3. 組件名稱

3.1 名稱

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

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

  • 組件名稱不可為空。

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

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

image (1).png

3.2 尺寸

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

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

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

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

image (2).png

3.3 位置

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

image (3).png

3.4 內邊距

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

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

image (4).png

3.5 3D旋轉

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

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

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

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

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

FVS組件基礎屬性-3D旋轉.gif

3.6 不透明度

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

FVS組件基礎屬性-不透明度.gif


附件列表


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

文 檔回 饋

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

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

不再提示

10s後關閉