(不一定对,欢迎指正)
今天想搞清楚RadialGradientBrush的各个属性之间到底是啥关系,它们是如何组合出实际的渐变效果的。根据我的理解,可以分为两种情况。但是先介绍一下基本的理解模型。
0. 基本模型
0.1 渲染点
这里我们需要将GradientOrigin理解为一个点,暂且把它称为渲染点,因为它本就是渲染效果的起始点。
0.2 渐变圆
Center+RadiusX+RadiusY理解为一个圆,其中Center当然是圆心,RadiusX/Y分别是两个方向的半径,暂且把它称为渐变圆,因为它会影响渐变效果的范围。
基于这个模型,根据渲染点和渐变圆的位置关系,有以下两种情况:
1.点在圆内
首先上代码定义和效果图:
<Border
Width="25"
Height="25"
CornerRadius="15">
<Border.Background>
<RadialGradientBrush Center="0.3,0.3" GradientOrigin="0.5,0.5" RadiusX="0.5" RadiusY="0.5">
<GradientStop Offset="0" Color="White" />
<GradientStop Offset="1" Color="Red" />
</RadialGradientBrush>
</Border.Background>
</Border>
(当然,这里给出的GradientOrigin、RadiusX/Y都是默认值,如果不显式指定,效果也是一样的,只不过为了便于说明)
效果图如下:
在图上可以看到,蓝色方框是渐变圆心,绿色方框是渲染点,蓝色圆圈就是以Border的半Width、Height为半径(因为RadiusX/Y的定义就是相对于控件本身Width、Height的占比)画出的(标准)渐变圆。
这里可以看到渲染的方式是:
- 从渲染点出发 -> 到渐变圆的边界为止,根据设置的GradientStop 进行渲染
为了更加明确,增加一个GradientStop来查看效果:
<Border
Width="25"
Height="25"
CornerRadius="15">
<Border.Background>
<RadialGradientBrush Center="0.3,0.3" GradientOrigin="0.5,0.5" RadiusX="0.5" RadiusY="0.5">
<GradientStop Offset="0" Color="White" />
<GradientStop Offset="0.5" Color="Blue" />
<GradientStop Offset="1" Color="Red" />
</RadialGradientBrush>
</Border.Background>
</Border>
这里可以很清晰的看到,从渲染点向右下出发,距离渐变圆圆周一半的位置,颜色刚好从白色渐变成蓝色,再开始从蓝色向红色渐变。这里我画的渐变圆有点挡住了最后一点渐变效果,大家可以自己尝试,在渐变圆的边界有一个很明显的蓝红色突变。
所以总结一下就是:
- 从渲染点出发,向着渐变圆的圆周方向进行渐变,渐变的范围只在渐变圆内(圆外颜色就是最后一个GradientStop的颜色);不同方向的渐变速度是不一样的,距离越小渐变速度越快
2. 点在圆外
代码效果图
<Border
Width="25"
Height="25"
CornerRadius="15">
<Border.Background>
<RadialGradientBrush Center="0.3,0.3" GradientOrigin="0.5,0.5" RadiusX="0.1" RadiusY="0.1">
<GradientStop Offset="0" Color="Blue" />
<GradientStop Offset="1" Color="Red" />
</RadialGradientBrush>
</Border.Background>
</Border>
这里将渐变圆的半径设得比较小,保证渲染点在圆外,同时改了下颜色,能够更好看清效果图
这里直接抛出结论吧:
- 从渲染点出发,向渐变圆作两条切线,则两条切线、渐变圆围成的几何图形是渲染范围;渐变方向是从渲染点到渐变圆中离渲染点最远的点(或者说是最明显的方向)
根据这两种情况,就能够理解当Center的两个取值大于1的情况为什么是一个扇形了。
注
其实什么渲染点、渐变圆都是我临时胡诌的,显得我很专业,但是上面介绍的时候可能会弄混了,大家理解原理就好。