反饋已提交

網絡繁忙

點九圖填充

一、概述

  1. 報表伺服器版本為10.0.18。

  2. 功能變動:為了解決以前組件邊框圖片被拉伸漸變的問題,新版本新增一個【點九圖填充】功能。組件使用自訂圖片設定的邊框,可以通過【點九圖】功能進行填充。點九圖填充時,圖片四個角的像素不變,其餘位置拉伸,能保證大多數邊框在不同決議度效果下都不漸變。

  3. 注:使用新自適應插件時,不支援該功能。

二、功能介紹

1
功能入口。
  1. 選中組件後,進入【屬性】。

  2. 邊框選擇【自訂圖片】。

  3. 然後點擊【選擇圖片】按鈕,將一張自訂的圖片上傳進來。

  4. 點擊【點九圖填充設定】進入點九圖填充設定介面。

 

11.png

 

2
切割規則。
  1. 【點九圖】填充設定介面有 4 條可以自由拖拽的線條,它們將整張圖片分切割成了 9 個格子。

  2. 其中中間那個格子在前端顯示邊框時,會被挖空,只有四週的 8 個格子才會顯示。也就是我們可以通過調整中間格子的大小,絕對邊框的顯示範圍。

  3. 改變中間格子的大小,需要手動拖拽 4 個線條,操作如下動圖所示。

  4. 注:拖拽線條時,四條線中任意一條都不能處於最邊緣的位置,否則會報錯,也就是要留點空隙出來。

 

12.png

 

13.gif

 

三、範例

1
準備範本。
  1. 新建決策報表,建立內置資料集,如下圖1所示。

  2. ①設定頁面佈局方式為【絕對佈局】,②拖入餅圖,如下圖2所示。

  3. ①單擊餅圖,進入【屬性】,②設定文字為【Web伺服器市場佔比】,如下圖3所示。

  4. ①雙擊餅圖,進入【資料】,②設定如下圖4所示。

 

14.png

 

15.png

 

16.png

 

17.png

 

2
自訂圖片邊框。
  1. 單擊餅圖,進入【屬性】。

  2. 邊框選擇【自訂圖片】。

  3. 點擊【選擇圖片】,使用圖片 深色邊框-透明.png 自訂邊框。步驟如下圖所示。

 

18.png

 

3
切割圖片
  1. 點擊【點九圖填充設定】,如下圖切割這個邊框。

 

19.png

 

4
預覽。
  1. 點擊【預覽】,預覽效果如下圖所示。

 

110.png

 

四、注意事項

1
邊框素材壓縮。
  1. 當邊框使用的圖片素材比組件尺寸大很多時,點九圖填充方式會將四個角的像素進行壓縮,在保持四個角的比例不變的情況下縮放至適合當前組件的尺寸,所以此時邊框看起來會和素材有出入。如下圖中兩個組件邊框對比。

 

111.png

 

2
找不到控制項型別。
  1. 拖拽分割線條時,只要有任意一條線是在最邊緣位置的(如下動圖1所示),前端就無法正常預覽,且會報錯,如下圖2所示。

  2. 解決方案:分割線條不要拖曳到最邊緣位置。

 

112.gif

 

113.png

 

五、下載範本

  1. 點擊下載範本。

點九圖填充.frm

附件列表


主題: 決策報表應用
  • 有幫助
  • 沒幫助
  • 只是瀏覽
  • 圖片不清晰
  • 用語看不懂
  • 功能說明看不懂
  • 操作說明太簡單
  • 內容有錯誤
中文(繁體)

文 檔回 饋

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

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

不再提示

10s後關閉