RadialGradientBrush中Center、RadiusX/Y、GradientOrigin之间的关系

（不一定对，欢迎指正）
今天想搞清楚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的情况为什么是一个扇形了。

注

其实什么渲染点、渐变圆都是我临时胡诌的，显得我很专业，但是上面介绍的时候可能会弄混了，大家理解原理就好。