DuiLib中图片属性的编辑
在DuiLib中图片属性编辑还是挺麻烦的一件事情,特别是手写xml。这次介绍如何在DuiEditor中可视化操作,轻松快速选取图片。
先看一下界面:
接下来主要演示各种场景的使用,以及image属性的含义。
1,dest属性。
如下图,我想在这个按钮的确认前面加个图标,
设置foreimage,进入图片设置窗口。文件列表中选择图标文件,在Control预览区拖拉出一个区域。
可以看出来,dest就是你要显示的位置。这时候你可以通过键盘微调使得最优效果。
2,source属性。
比较常见的就是,一张图片中包含了几个小图,比如combo。
从左下角原图中选取一个区域,这一小块图片作为引用的资源。
3,corner属性。
看下图,图片拉伸之后,失真了。
如果右边的小方块和左边的边框不拉伸,就完美了。
工具栏中选中corner,这时候source窗口只显示source区域内容,这也说明corner是针对source的偏移。
在原图窗口中选取corner区域,通过微调。
这就是九宫格的具体体现,意思是corner这个区域是允许拉伸的,其他区域不要拉伸显示。
再来一张图说明一下
corner涉及到hole属性,我特意度娘了一下hole,结果我又学到了很多知识。-_-!!! hole=true效果如下:
hole的意思是洞,你看corner这个区域就是个洞,这部分没有draw。
4, fade属性,这是透明度,范围0 `255。
5, mask。bmp位图的透明色。
6, xtile横向平铺,ytile纵向平铺。
原版的duilib只有这几个常用的,下面的属性是我扩展的,嗯,或者说是抄的。
1,padding, align, valign
这三个参数主要是为了方便dest定义,外边距和对齐,dest只要提供大小就行了,位置就靠这3个属性定义了。
2,width, height, fillcolor
svg图片相关。
width,height为当前dpi所需要的大小,比如当前设定100*100, DPI设定为200%时,会以200*200载入svg图片。
fillcolor为svg动态填充颜色,目前仅支持单色填充。