在这里，我先讲一下FMX自带的圆角矩形控件TRoundRect,

圆形头像效果其实可以用TRoundRect来实现,

比如我放一个TRoundRect到窗体上,

设置它的Fill.Kind为Bitmap,

Fill.Bitmap.Bitmap设置为,

Fill.Bitmap.WrapMode设置为TileStretch,

效果如下:

它也能实现图片剪裁成圆形的效果，

因此，在普通情况下，

完全可以不使用RoundImage,

而选择使用TRoundRect.

 

那为什么我们还需要一个RoundImage控件?

比如我要让OrangeUI的ListBox中每个列表项的图标都要有剪裁成圆形的效果,

如下图所示:

如果我在ItemDesignerPanel上面放一个RoundRect,

但RoundRect只能把列表项的图标加载给Fill.Bitmap,

而不能把列表项图标的引用赋值给Fill.Bitmap,

所以这种情况下，ListBox每绘制一个列表项，

都需要把列表项的图标加载给RoundRect.Fill.Bitmap,

代码为:RoundRect.Fill.Bitmap.Bitmap.Assign(Item.Icon),

这个过程会十分的耗时，

 

为了能直接使用列表项图标的引用，

我们就需要使用RoundImage了，

代码为:RoundImage.Properties.Picture.RefPicture:=Item.Icon,

所以，使用RoundImage十分的高效.

 

 

接下来，我给大家演示一下如何在ListBox中使用RoundImage,

先准备好这样一个ListBox,

拖一个RoundImage到ItemDesignerPanel上面，

我们需要使每个列表项的头像有剪裁成圆形的效果，

只需要设置RoundImage的DrawRoundOutSideRectParam，

把DrawRoundOutSideRectParam.FillColor设置为白色，

DrawRoundOutSideRectParam.IsFill设置为True,

好了，效果就出来了:

头像看起来像是被剪裁成圆形的了，

再运行一下看下效果:

用鼠标点击第二个列表项,

发现列表项的背景颜色变为了灰色，

而头像的四个角仍旧为白色:

我们需要设置RoundImage的点击效果，

使RoundImage在点击的情况下颜色变为灰色，

在SelfOwnMaterial.DrawRoundOutSideRectParam.DrawEffectSetting.MouseDownEffect中设置:

勾选EffectTypes中的drpetFillColorChange,

FillColor设置为LightGray,

接下来我们再运行一下,

点击第二个列表项看一下效果: