OrangeUI

一、开始讲最基础也是OrangeUI控件最重要的的属性
 
1.Properties
每种控件都有各自独有的属性，
这些属性都包含在Porperties中。
比如按钮控件的属性有:
默认状态的图标Icon,
按下状态的图标PushedIcon，
是否按下IsPushed,
是否自动调整尺寸AutoSize,
如下图所示:

 
 
 
2.SelfOwnMaterial
Material-素材，素材就是图片，颜色，文本绘制参数等，
SelfOwnMaterial，就是控件自己的皮肤素材以及绘制参数的设置，
 
SelfOwnMaterial中最基本的两个属性是:
BackColor:TDrawRectParam(背景色),
IsTransparent:Boolean(是否背景透明),
 
如果IsTransparent为False,
那么会使用BackColor绘制背景，
如果IsTransparent为True,
那么控件就是背景透明的，
 
比如按钮的素材有:
正常状态下的背景图片NormalPicture，
鼠标点击时的背景图片DownPicture，
按钮标题的绘制参数DrawCaptionParam，
背景图片的绘制参数DrawPictureParam,
如下图所示:

 
 
 
 

3. MaterialUseKind等

 
//组件类型使用类型
ComponentTypeUseKind:TComponentTypeUseKind;
ctukDefault使用默认的组件类型，
ctukName则使用指定名称的组件类型
 
//组件类型名称,比如”Default”,”Normal”
ComponentTypeName:String;
 
//素材使用类型
MaterialUseKind:TMaterialUseKind;
mukSelfOwn:     使用SelfOwnMaterial
mukDefault:     使用皮肤包默认的素材
mukName:        指定使用皮肤包中某名称的素材
mukRef:         使用属性RefMaterial
 
//素材名称(皮肤包里面的素材名称)
MaterialName:String;
 
//引用的素材
RefMaterial:TSkinMaterial;
 
//控件自已的素材
SelfOwnMaterial:TSkinMaterial;
 
//是否保留自己的素材，
KeepSelfOwnMaterial:Boolean;
如果为False，那么如果控件使用的是不是SelfOwnMaterial，
那么SelfOwnMaterial就为nil。
 
//控件当前所使用的素材(根据MaterialUseKind)
CurrentUseMaterial:TSkinMaterial;
 
 
 
 
 
 
 
 
 
二、OrangeUI的绘制
 
OrangeUI的绘制由uDrawCanvas单元中的TDrawCanvas类来接管，
在VCL平台使用GDI+库来实现，
在FMX平台使用自带的TCanavs来实现，
有下面四个最基本的绘制方法：
DrawText，                  绘制文本
DrawSkinPicture，           绘制图片
DrawRect，                  绘制矩形
DrawLine，                  绘制直线
 
下面介绍一下绘制参数,

1. TDrawParam:所有绘制参数的基类, 提供基本的绘制参数

 
//透明度，0~255之间的值
Alpha:Byte
 
//当前状态，表示控件当前所处的状态
EffectStates:TDPStates
dpstMouseDown:    鼠标点击状态
dpstMouseOver:    鼠标停靠状态
dpstPushed:       按下状态
 
绘制区域设置DrawRectSetting：可以设置绘制的相对区域，偏移等,
位置和尺寸：Left,Top,Width,Height(单位根据SizeType属性)
相对偏移：Right,Bottom(单位根据SizeType属性)
是否启用：Enabled
尺寸计算类型：SizeType(百分比dpstPercent,像素dpstPixel)
水平位置：PositionHorzType(dpphtNone,dpphtLeft,dpphtCenter,dpphtRight)
垂直位置：PositionVertType(dppvtNone,dppvtTop,dppvtCenter,dppvtBottom)
//效果参数设置 (重要)：可以设置动态效果
DrawEffectSetting:TDrawEffectSetting
MouseDownEffect:  鼠标按下的效果设置
MouseOverEffect:  鼠标停靠的效果设置
PushedEffect:     按下状态的效果设置
 
//绘制矩形设置 (重要)：可以自定义绘制矩形(位置)
DrawRectSetting:TDrawRectSetting
//是否启用自定义绘制矩形
Enabled:Boolean
//尺寸单位类型，是百分比还是像素为单位
SizeType: TDPSizeType
//位置
Left,Top:Double
//右边距
Right:Double
//底边距
Bottom:Double
//宽度
Width:Double
//高度
Height:Double
//水平位置类型
PositionHorzType:TDPPositionHorzType
dpphtNone:      无
dpphtLeft:      水平居左
dpphtCenter:    水平居中
dpphtRight:     水平居右
//垂直位置类型
PositionVertType:TDPPositionVertType
dppvtNone:      无
dppvtTop:       垂直居上
dppvtCenter:    垂直居中
dppvtBottom:    垂直居下
 
 
 
2.TDrawRectParam:矩形绘制参数
//是否填充
IsFill:Boolean
//填充的颜色
FillColor: TDrawColor
//是否圆角
IsRound:Boolean
//圆角宽高度
RoundWidth和RoundHeight:Double
//边框颜色
BorderColor:TDrawColor
//边框宽度
BorderWidth:Double
//边框
BorderEadges:TDRPBorderEadges
beLeft:         左边框
beTop:          上边框
beRight:        右边框
beBottom:       底边框
//边角
RectCorners:TDRPRectCorners
rcTopLeft:      左上角
rcTopRight:     右上角
rcBottomLeft:   左下角
rcBottomRight:  右下角
//是否是线段
IsLine:Boolean
//线段位置
LinePosition: TDRPLinePosition
lpLeft:     线段在左边
lpTop:      线段在上边
lpRight:    线段在右边
lpBottom:   线段在下边
 
 
3.TDrawTextParam:文本绘制参数
//字体
DrawFont: TDrawFont
//文本过长是否换行
IsWordWrap:Boolean
//文本显示不下时的截断类型
FontTrimming:TFontTrimmingType
fttNone:        不截断
fttCharacter:   按字母截断
fftWord:        按单词截断
//水平对齐风格
FontHorzAlign:TFontHorzAlign
fhaLeft:    水平居左
fhaCenter:  水平居中
fhaRight:   水平居右
//垂直对齐风格
FontVertAlign:TFontVertAlign
fvaTop:     垂直居上
fvaCenter:  垂直居中
fvaBottom:  垂直居下
//是否垂直绘制
IsDrawVert:Boolean
 
 
4.TDrawPictureParam图片绘制参数
//图片绘制的时候是否自适应大小
IsAutoFit:Boolean
//图片绘制的时候是否拉伸
IsStretch:Boolean
//拉伸风格
StretchStyle:TPictureStrechStyle
issTensile:             最普通的填充拉伸模式
issSquare:              九宫格拉伸模式
issSquarePro:           九宫格拉伸模式增强
issThreePartHorz:       水平三分法拉伸模式
把图片分成水平三份，中间那份缩放
issThreePartVert:       垂直三分法拉伸模式
把图片分成垂直三份，中间那份缩放
issThreePartHorzPro:    水平三分法拉伸模式增强
issThreePartVertPro:    垂直三分法拉伸模式增强
//水平对齐风格
PictureHorzAlign:TPictureHorzAlign
phaLeft:    水平居左
phaCenter:  水平居中
phaRight:   水平居右
//垂直对齐风格
PictureVertAlign:TPictureVertAlign
pvaTop:     垂直居上
pvaCenter:  垂直居中
pvaBottom: 垂直居下
 
 
5.TDrawLineParam线条绘制参数
//线条颜色
Color:TDrawColor
//线条宽度
PenWidth:Double
 
 
 
 
 
 
三、OrangeUI下面的图片类
OrangeUI下使用的图片类为TDrawPicture，
 
TDrawPicture的属性有:
 
//所绑定的SkinImageList控件
SkinImageList:
//所绘制的图片在SkinImagelist中的下标
ImageIndex:Integer
//所绘制的图片在SkinImagelist中的名称(比使用下标更具有可读性)
ImageName:String
//图片绘制的类型，绘制自身，绘制子图片，绘制图片列表
PictureDrawType:TPictureDrawType
pdtAuto:          自动判断
pdtPicture:       绘制时使用自身设置的图片
pdtImageList:     绘制时使用图片列表中由ImageIndex指定的图片来绘制
pdtImageName:     绘制时使用图片列表中由ImageName指定的图片列表
pdtReference:     绘制时使用图片引用RefPicture
pdtFile:          绘制时使用文件
pdtResource:      绘制时使用资源图片
pdtUrl:           绘制时使用链接
//图片文件路径
FileName:String
//图片资源名称
ResourceName:String
//图片链接
Url:String