DuiLib中图片属性的编辑

                                    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动态填充颜色，目前仅支持单色填充。