Duilib库支持类似安卓系统中所用的点九图技术。参考网络上其他点九图说明资料,在此详述其在Duilib库中的具体应用。
点九图在Duilib库中的使用,有其自身特点。无须像安卓中要在图中绘制标记,Duilib库中所用点九图,就是普通的图像,其拉伸区域的定位标记是在xml的属性参数中体现。
1.点九图原理
如上图,井字红线将原图像瓜分为九宫格。
- 上、下两区域,在贴图显示时,此区域图像会根据显示尺寸,仅长度方向进行相应拉伸;
- 左、右两区域,在贴图显示时,此区域图像会根据显示尺寸,仅高度方向进行相应拉伸;
- 中区域,在贴图显示时,此区域图像会根据显示尺寸,长度、高度方向均进行相应拉伸;
- 1、2、3、4区域,在贴图显示时,此区域内图像固定不变,即不拉伸;
- (x1,y1),(x2,y2)两点,确定了井字线的位置,其值为离相应左上,右下边的距离像素数值。
这样的规则,就可利用小像素的图像,通过九宫格方式拉伸,就可形成不同大小的,而四角不变的图像。比较常用于框格的贴图应用。无须再对不同大小的框格而裁切不同大小的图像,避免徒增资源的体积。
2.点九图在Duilib中应用
通过查看Duilib源码项目目录中的“属性列表.xml”文件,xml图像属性中支持点九图功能。
<Attribute comment="背景图片,如(bk.bmp或file='aaa.jpg' res='' restype='0' dest='0,0,0,0' source='0,0,0,0' corner='0,0,0,0' mask='#FF0000' fade='255' hole='false' xtiled='false' ytiled='false')" type="STRING" default="" name="bkimage"/>
应用实例:
以上图为例,像素120x100,圆角半径为10个像素(为显示细节在此已放大,图中“中”字是为说明应用效果而设)。
利用点九图技术在xml中进行添加此贴图,并设置点九图属性参数corner:
<Button name="bt1" width="240" height="150" bkimage="file='中.png' corner='10,10,10,10'" />
如此设置,边框四个圆角仍为10像素,未变形,而其余部分则进行相应拉伸。
若如下代码,加入hole参数,表示中间部位透明。
<Button name="bt2" width="240" height="150" bkimage="file='中.png' corner='10,10,10,10' hole='true' " />
实际应用中,图框是没有示例中那样大,也没有“中”字图,中间多为单一色或渐变色。故源图像可裁切更小,比如3x3像素。