點九圖填充

1.1 版本

1.2 應用場景

為了解決「決策報表」中組件邊框圖片被拉伸漸變的問題，針對組件「邊框」設計了一個「自訂圖片>點九圖填充」功能，能保證大多數邊框在不同解析度效果下都不漸變。

2.1 功能入口

在決策報表中，選中組件後，在屬性面板的「外沿樣式>邊框」處下拉選擇「自訂圖片」，然後點選「選擇圖片」按鈕，選擇圖片之後就可以點選下方的「點九圖填充設定」按鈕，進入點九圖填充設定介面了。

若在主題中設定，同樣在組件樣式的外沿中設定邊框即可，如下圖所示：

2.2 切割規則

「點九圖填充」設定介面有 4 條可以自由拖動的紅色虛線，圖片被線切割為九宮格。

例如我們使用圖片 深色边框-有背景.rar 設定點九圖填充，如下圖所示：

其中 ① ③ ⑦ ⑨ 四個角的像素不變，② ④ ⑥ ⑧ 位置的圖片拉伸，⑤ 位置的圖片被掏空，預覽時其效果如下圖所示：

故該功能僅推薦使用「背景透明的邊框素材」。

操作示範如下圖所示：

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