DSkinLite 使用技巧(六) – 绘制元素( image,text,rect,line)（上）

DSkinLite采用XML方式来配置界面，并将界面元素抽象为线条，矩形，图片，文本等元素。开发人员可以使用这些元素来配置界面，不需要关心底层界面绘制操作。此特性是构成DSkinLite界面库的基础。在DSkinLite中，我们称抽象的界面元素line,rect, image,text为绘制元素。我们认为任何一个软件界面均可抽象为这些元素，通过配置不同状态下的绘制元素，基本上可以完成大部分界面绘制需求。

 

1 绘制元素基础

     我们在XML中配置绘制元素，同时使用state属性来标识绘制元素所出状态。同时DSkinLite还提供一些API用于控制绘制元素是否可见，设置绘制元素相关属性。这样在应用程序中，用户也可以根据程序逻辑的需要控制绘制元素是否可见，或更改相关绘制元素属性。
例如：    

01	<window name="buttonico" type="button">

02	<property   tooltips="#default"  btransparentbk="true" width="149" height="50"/>

03	<buttoninfo subtype="push"  />

04	<image state="down" picfile="#buttonbase1" rectinfile="0,0,149,50"/>

05	<image state="over" picfile="#buttonbase1" rectinfile="149,0,149,50"/>

06	<image state="normal" picfile="#buttonbase1" rectinfile="298,0,149,50"/>

07	<image id="ico" state="all" picfile="#buttonico1" top="7" left="5" width="36" height="36" />

08	<text state="all" font="#default" horzalign="left" vertalign="top" left="50" top="5" bsingleline="true" textcolor="RGB(0,0,0)" />

09	<text state="all" id="type" font="#default" content="star" horzalign="left" left="50" top="15" bsingleline="true" textcolor="RGB(0,0,255)" />

10

</window>

在应用程序中，可以根据程序逻辑通过API

BOOL __stdcall dsSetDrawItemValue(  HWND hwnd, LPCTSTR strID, LPCTSTR strValue, BOOL bRedraw);

来设置id="ico" image元素的picfile值，即设置图片源。 

2 绘制元素详细说明

     绘制元素分为四类line，rect，text，image。这些元素的属性分为两类，一类是共有的属性，一类是不同元素自己特有的属性。其中所有元素所共有的属性列表如下：

属性名	取值类型	说明
id	string	绘制元素的标识符，用户可根据需要任意取名
index	int	绘制元素的绘制的先后顺序，默认按书写顺序绘制
bvisible	bool	指定绘制元素是否可见，也可以在程序中调用API  dsSetDrawItemVisible 来设置绘制元素是否可见
left	int	如果此值大于零，表示绘制元素左端相对于窗口左边的开始位置 如果此值小于零，表示绘制元素左端相对于窗口右边的开始位置
top	int	如果此值大于零，表示绘制元素上端相对于窗口上边的开始位置 如果此值小于零，表示绘制元素上端相对于窗口底边的开始位置
width	int	绘制元素的宽度
height	int	绘制元素的高度
right	int	如果此值大于零，表示绘制元素右端相对于窗口左边的位置 如果此值小于零，表示绘制元素右端相对于窗口右边的位置
bottom	int	如果此值大于零，表示绘制元素底端相对于窗口上边的位置 如果此值小于零，表示绘制元素底端相对于窗口底边的位置
state	组合	详见后面的state列表
relativeto	string	指定此绘制元素的开始位置相对于某个其他绘制元素。参考绘制元素的相对位置文章
relativepoint	string	指定相对其他绘制的那个位置，取值left, top,right, bottom.目前实现right

 

绘制元素位置定义的说明：

绘制元素的位置大小是相对于控件窗口的位置来定，其位置大小可能是固定值也可能是相对值。当left，top，right，bottom中有数字取负值，则意味着此值为一个相对位置。如下：

left="-150" top="20" width="50" height="20" 如果此时窗口大小为（0,0,200,300）

则此时绘制元素在窗口中位置为left=50,top=20,width=50,height=20

left="50" top="20" right="-50" height="20" 如果此时窗口大小为（0,0,200,300）

则此时绘制元素在窗口中位置为left=50,top=20,right=150,bottom=40

我们可以发现此时的绘制元素的大小随着窗口大小的改变将是变化的，即此时绘制元素大小是相对的。

left="-150" top="20" right="-100" height="20" 如果此时窗口大小为（0,0,200,300）

则此时绘制元素在窗口中位置为left=50,top=20,right=100,bottom=40

此设置也等于left="-150" top="20" width="50" height="20"

同理top及bottom值也可以取相对位置，其相对于窗口的底边位置计算。

绘制元素状态的说明：

大部分控件中绘制元素需要使用state属性来标识绘制元素在控件出于何种状态时显示，因为对某些控件而言，不同鼠标状态下，其界面显示是不一样。state取值列表如下：

"normal"	此状态为鼠标未在控件上时的状态
"over"	此状态为鼠标位于控件上的状态
"down"	鼠标按钮按下的状态
"disable"	控件窗口disable状态
"checked"	radiobutton，checkbutton 控件处于checked状态
"checkeddown"	radiobutton，checkbutton 控件处于checked状态，且此时鼠标按钮按下
"checkedover"	radiobutton，checkbutton 控件处于checked状态，且此时鼠标位于控件上
"checkeddisable"	radiobutton，checkbutton 控件处于checked状态，且控件disable
"all"	所有状态
"inactive"	Windows状态出于非active状态，此状态只对于popup的窗口有效
"default"	此状态主要针对button控件，当button控件有BS_DEFPUSHBUTTON风格时，且此时button处于normal状态时，将使用default状态代替。

同时在DSkinLite中，也允许使用组合状态，比如state="down|over"，则表示在over和down状态下此绘制元素都显示。

绘制元素image的属性说明：

image元素除具有以上公共属性外，还拥有一些其他自有属性。DSkinLite支持png,ico,bmp( 8bit, 24bit)等格式的图片。

属性	取值	描述
left_part	int	图片左侧不拉伸的距离，此值在paintmode 为"stretchparthorz" "stretchpartall"时有效。
right_part	int	图片右边不拉升的距离，此值在paintmode为"stretchparthorz" "stretchpartall"时有效
top_part	int	图片上端不拉升的距离，此值在paintmode为"stretchpartvert" "stretchpartall"时有效
bottom_part	bool	图片下端不拉升的距离，此值在paintmode为"stretchpartvert" o"stretchpartall" 时有效。
picfile	string	指定image图片值，此值定义在xml "<dsimage>" 中。
rectinfile	string	指定使用图片中的某部分来作为图片绘制源。格式如下：rectinfile="0,0,2,9" 单位为像素，表示"left,top,width,height". 表示使用改图片的0,0,2,9 这部分图像区域来绘制。 需要注意的是，rectinfile主要用于一种图片的normal,over,down等状态都做到一张图片的里的情况，比如： 如果设置了rectinfile，则不能设置paintmode为stretchparthorz, stretchpartvert, stretchpartall这些模式。即不能使用一张图片的部分区域作为绘制图片去做以上几种模式的拉申。 同时带alpha通道的png图片，目前不支持rectinfile这种模式。
paintmode	tring	绘制图片的模式，取值解释见下面列表描述。

绘制图片的模式，取值如下：

对于image元素，首先会根据属性left,top,right, bottom,width,height等计算image元素在窗口的位置。默认为控件窗口大小。我们称此时的位置为计算后位置。

模式	说明
"left"	水平方向，图片位于窗口位置左侧，图片保持原始大小。
"right"	水平方向，图片位于窗口位置右侧，图片保持原始大小。
"top"	竖直方向，图片位于窗口位置上侧，图片保持原始大小。
"bottom"	竖直方向，图片位于窗口位置下侧，图片保持原始大小。
"center"	图片位于窗口位置中间，图片保持原始大小，不拉伸。
"tilefill"	图片在窗口中平铺。即重复绘制此图片。
"stretch"	将图片拉伸绘制到“计算后位置”内。类似win32 api StretchBlt，paintmode默认值为strech。
"stretchpartvert"	竖直方向拉伸，此时"top_part","bottom_part"有效，用于指定上端和低端不拉伸的距离。
"stretchparthorz"	水平方向拉伸，此时"left_part", "right_part"有效，用于指定左边和右边不拉伸的距离
"stretchpartall"	水平竖直方向拉伸，此时"left_part", "right_part","top_part","bottom_part"有效。详见后面关于九宫格区域的描述。

 

关于绘制图片的模式，在此做详细的说明，其中stretch模式比较好理解，就是直接拿图片去做拉伸。在详细解释前，我们先了解一种常见的图片拉伸方式-九宫格。

其中DSkinLite xml中image属性设置与以上图片对应如下：

left_part           区域1的宽度（也等于区域4，7的宽度）

right_part        区域3的宽度（也等于区域6，9的宽度）

top_part          区域1的高度（也等于区域2，3的高度）

bottom_part   区域7的高度（也等于区域8，9的高度）

区域2，4，6，8中的图片内容会被用来拉伸，区域1，3，7，9的图片内容在整个图片绘制的过程中式不变的，这部分通常是带有圆角或者不规则形状。

在Windows界面中，由于Popup窗口的大小是变化的，这样窗口的背景图片需要用来做拉伸。而九宫格这种方式是使用的最多的。下面我们来看一张具体的窗口背景图片：

xml中定义如下：

<image index="0" state="all" picfile="#stardard.window.bk" paintmode="stretchpartall" left_part="11" top_part="88" right_part="11" bottom_part="42" />

图片为：

如窗口变大后，此图片也将相应的以九宫格的方式被拉伸，如下图所示：

可以看到1，3，7，9区域大小保持不变，这些区域多有圆角边框。如果被拉伸，图片将失真。其中区域2，8 被水平拉伸，区域4，6被竖直拉伸，区域5被整体拉伸。

以上九宫格即为DSkinLite中image的paintmode为“stretchpartall”。理解了stretchpartall模式，另外两种模式stretchparthorz和stretchpartvert就好理解了。比如一个界面风格中，标准button可能高度是一样的，但是其宽度会不一样。

01	<window name="button" type="button">

02	<property bclipwindow="true" tooltips="#default" clipcolor="RGB(255,0,255)" cursor="#handcur" height="21"/>

03	<buttoninfo subtype="push" drawfocus="true"  />

04

05	<image state="default" picfile="#stardard.button.default" paintmode="stretchparthorz" left_part="4" right_part="4" />

06	<image state="normal" picfile="#stardard.button.nor" paintmode="stretchparthorz" left_part="4" right_part="4" />

07	<image state="over" picfile="#stardard.button.hot" paintmode="stretchparthorz" left_part="4" right_part="4" />

08	<image state="down" picfile="#stardard.button.down" paintmode="stretchparthorz" left_part="4" right_part="4" />

09	<image state="disable" picfile="#stardard.button.disable" paintmode="stretchparthorz" left_part="4" right_part="4" />

10	<text state="all" font="#default" horzalign="center" bsingleline="true" textcolor="RGB(0,0,0)" />

11

</window>

其中图片定义paintmode使用了stretchparthorz，对应图片如下：

按照上面XML的定义，left_part及right_part即为两道紫色线划分的区域。这样在使用此图片绘制button背景时，左右两边区域将不会被拉伸即使用其大小绘制，中间的区域将根据button的宽度来拉伸。

总结：

本文主要介绍DSkinLite绘制元素的基本情况及image元素的详细内容。在下一篇文章中，将介绍其他几种绘制元素的定义及绘制元素控制等问题。