FVS圖片組件

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

1.1 版本

1.2 功能簡介

圖片組件，顧名思義，可展示各類內建圖片素材、自訂圖片或線上圖片。

圖片類型支援三種：我的資源、自訂上傳、線上圖片。

圖片支援的格式包括六種：jpg、jpeg、png、apng、gif 和 webp 格式。

注：本文僅為大家介紹圖片組件特有功能，其他屬性不贅述。

組件交互請參見：FVS組件交互屬性 。圖片組件僅支援點選事件。

組件動畫請參見：FVS組件動畫 。

組件屬性請參見：FVS組件樣式屬性 。

建立一張「視覺化看板」：

在頁面中新增一個「圖片組件」，預設顯示「請在右側配置欄新增圖片」。如下圖所示：

3.1 我的資源

FVS 內建了一系列靜態和動態素材圖片，包括圖示、背景、裝飾線條、裝飾圖形、邊框等。

選中圖片組件，點選「內容」，圖片類型選擇「我的資源」，點選「選擇」。選擇需要的圖片後點選「完成」即可。如下圖所示：

3.2 自訂上傳

使用者可將自己本地準備好的素材圖片上傳至範本中，並使用它。

3.2.1 上傳圖片

選擇「自訂上傳」方式後，點選「選擇」，點選「+上傳圖片」，即可選擇本地圖片檔案聯集傳，支援多選圖片批量上傳。

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

注：請勿手動修改圖片檔案的後綴名來滿足格式要求，這可能會導致資源上傳失敗。

3.2.2 刪除圖片

在圖片列表中，滑鼠懸浮到對應圖片上，圖片右上角出現刪除按鈕。

點選「刪除」按鈕，跳出提示框「刪除素材會影響到所有使用該素材的組件，是否確認刪除？」，點選「確認刪除」，即可刪除該自訂素材。

若某個圖片組件使用了被刪除的圖片素材，那麼預覽時該組件內容為空。

3.3 線上圖片

FVS圖片組件支援呼叫線上圖片。請確定伺服器可存取填寫的圖片地址。

選中圖片組件，點選「內容」，圖片類型選擇「線上圖片」，填寫圖片地址，即可呼叫該圖片素材。如下圖所示：

圖片地址不支援相對地址，僅支援絕對地址，形如http://localhost:8075/webroot/help/picture/background/sale.gif。

選擇圖片後，支援設定圖片屬性「填充方式」和「色相」。

4.1 填充方式

圖片資源可選擇三種填充方式：

4.2 色相及更多設定

在圖片原本效果的基礎上，可調整色相、飽和度、亮度及對比度。

設定項	說明
色相	指顏色的基本屬性，範圍為 0~360 在圖片原本顏色的基礎上，疊加色相值，以改變圖片顏色
飽和度	指顏色的純度或強度，範圍為 -100~100
亮度	指影像的明暗程度，範圍為 -100~100
對比度	指影像中最亮和最暗部分之間的差異，範圍為 -100~100

點選下載範本：FVS圖片組件範例.fvs