duilib显示html,Duilib 控件类html富文本绘制

效果:

类html格式文本：

Duilib使用一种经过简化的类html格式文本来描述复杂的图文格式。使用<>或{}符号来标识语法标签，支持标签嵌套，如text，但是应该避免交叉嵌套，如text。

使用标签功能需要把控件的showhtml属性设置为true。

b:表示字体是否使用粗体；

c:表示字体使用的颜色；

f:表示使用全局字体的序号，从0开始；

i:是否使用斜体或图表路径；

a:超链接功能；

n:表示换行；

p:表示一段落；

r:表示包含内容不适用标签语法功能；

s:表示内容被选中；

u:表示内容使用下划线；

x:表示从该处移动x个像素值；

y:表示该行固定位y个像素值；

例子如下：

text 表示text的内容使用粗体

text 表示text内容使用#xxxxxx颜色，#xxxxxx表示16进制的RGB值

text表示text内容使用x序号的字体

text 表示text内容使用斜体

表示此次插入图片，x表示图片名称，y表示此图片包含几张字图片(可不填，默认值1)，z表示当前使用的字图片id(可不填，默认值0)

text 表示text内容有链接功能，x表示链接地址(可不填)，用法如app:notepad or http:www.xxx.com，此字符串需要在用户程序中解析处理。

 表示此次换行

text

 表示text内容是一个段落(从这里开始换行)，x表示此段落文字水平距离(可不填)

text表示text内容不使用语法标签功能

text 表示text内容被选中(显示选中的背景颜色)

text 表示text内容使用下划线

 表示从此处向后面移动x个像素值

 表示该行高度固定为y个像素值

属性二：corner

有时候我们贴图时，图片的大小小于控件本身的大小，而我们需要将图片贴到控件的某个位置上，这时通常会用dest属性来解决这个问题。但是dest属性有个缺点就是贴的位置是固定的，他不可以让图片随控件的大小改变而自动改变图片的位置和大小。如果要把图片贴到控件的四个边的其中一个，或者贴到某个角上，使用corner属性可以完美实现。如下我们来了解一下九宫格贴图技术：

九宫格是利用一张很小的图片来绘制大区域图片的技术，用户可以制作九宫格图片，并设置拉伸的位置，图片会在贴图时只拉伸中心的部分，边角却不会被拉伸，这样只要设计时图片中心的颜色是纯色，那即使拉伸的再大也会保持原有的效果。

正常情况下九宫格绘制会遵循下面的规则：

a. 保持4个角部分不变形

b. 单向拉伸4条边(即在4个角两两之间的边，比如上边，只做横向拉伸)

c. 双向拉伸中间部分(即九宫格的中间部分，横向，纵向同时拉伸，PS：拉伸比例不一定相同)

或

t_l、t_r、b_r、b_l这四个角是不被拉伸的，而m_l、t_m、m_r、b_m四条边就是corner要拉伸的边，

在duilib里面corner是一个4元组属性值，4个字分别表示左、上、右、下四边需要拉伸的宽度或高度；

如图片大小为100*80,如果corner=“100,8,0,10"表示图片的左边100个像素宽度需要拉伸(也就是所有宽度突变拉伸)，距离顶部8个像素高度需要拉伸，剩下的72(此时不考虑下面指定10的值)不需要拉伸；距离右侧0个像素宽度需要拉伸(即右侧不需要拉伸)；距离底部10个像素的高度需要拉伸；除了以上指定四边长度或宽度拉伸外，其他的不拉伸；

在实际开发中，如果skin目录下文件很多，需要建子目录分类，使用富文本要使用相对目录：

CLabelUI *pLabel = newCLabelUI;

_stprintf_s(text,_T("{x 4}{i %s 1 0}{x 4} %s"),_T("image\Big_Folder.png"), _("新建文件夹"));//image是相对目录//_stprintf_s(text,_T("%s"),_T("Big_Folder.png"), _("新建文件夹"));

pLabel->SetText(text);//控件属性就根据需求设置吧,我简单设置一下

pLabel->SetName(_("新建文件夹"));//控件属性就根据需求设置吧,我简单设置一下

pLabel->SetTextStyle(DT_LEFT|DT_VCENTER);

pLabel->SetAttribute(_T("endellipsis"), _T("true"));

pLabel->SetAttribute(_T("showhtml"), _T("true"));

动态创建控件时，给控件设置属性:

CButtonUI *pBtnUI = newCButtonUI;

pBtnUI->SetName(_T("delete"));

pBtnUI->SetFixedWidth(26);//pBtnUI->SetAttribute(_T("pushedimage"), _T("image\button_down.bmp"));

pBtnUI->SetAttribute(_T("hotimage"), _T("image\delete.png"));

pBtnUI->SetAttribute(_T("normalimage"), _T("image\delete.png"));