OrangeUI

 
RoundImage是从Image继承下来的，
在Image的基础上还可以再添加一个能剪裁出圆角矩形的矩形，
这个矩形绘制在图片上面,
让图片形成一个被剪裁的效果，
 
接下来我们演示一下，
使下面这个头像剪裁成圆形的头像。
头像图片:

 
拖一个RoundImage在窗体上，
尺寸设置为100*100,
双击Properties.Picture属性，
在弹出的选择图片对话框中选择上面的头像图片，

再设置图片的绘制参数，
DrawPictureParam.IsAutoFit设置为True,
DrawPictureParam.IsStretch设置为True,

显示如下:

 
接下来我们再设置剪裁圆角矩形，
先介绍一下需要用到的几个属性:

DrawRoundOutSideRectParam:矩形设置
IsDrawClipRound:是否剪裁出圆角矩形
ClipRoundWidth:剪裁出圆角矩形的圆角宽度
ClipRoundHeight:剪裁出圆角矩形的圆角高度
ClipRoundRectSetting:剪裁出圆角矩形的绘制矩形设置
 
默认情况下,
我们只需要设置DrawRoundOutSideRectParam，
把DrawRoundOutSideRectParam.FillColor设置为红色，
DrawRoundOutSideRectParam.IsFill设置为True,

好了，效果就出来了:

头像看起来像是被剪裁成圆形的了，
 
再介绍一下ClipRoundWidth和ClipRoundHeight,
ClipRoundWidth如果是-1,表示自动为控件宽度的一半，
ClipRoundHeight如果是-1,表示自动为控件高度的一半，
我们设置RoundImage的尺寸为120*100看下效果，
如下图，因为控件宽度为120,那么ClipRoundWidth就自动为60,
因为控件高度为100,那么ClipRoundHeight就自动为50,
头像就被剪裁成一个椭圆形:

 
如果我们需要给头像看起来剪裁成圆角矩形的效果，
那么只需要给ClipRoundWidth和ClipRoundHeight一个特定的值，
在这里我们把它们设置为10,

效果如下，头像四个角都被抹去了, 画上了红色:

再给头像的四个边也加个框,
设置ClipRoundRectSetting.Enabled为True,
ClipRoundRectSetting.SizeType设置为dpstPixel,
ClipRoundRectSetting.Left,Bottom,Right,Top都设置为5,

效果如下: