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,
如下图所示:

 
 
 
 

  1. 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