C# WPF中的路径梯度

我试图在WPF中创建一个矢量图形色轮。我目前正在计算数百个三角形的位置和颜色，并用它们的角的平均颜色值填充它们

我更愿意从WinForms执行类似于此解决方案的操作：

有没有办法在WPF中实现这一点

编辑以澄清最终目标： 我需要一个梯度 0xFF红色介于-π/3至π/3之间，线性梯度0xFF至0x00红色介于-π/3至-2π/3和π/3至2π/3之间

0xFF蓝色介于π/3到π之间，线性梯度0xFF到0x00蓝色介于0到π/3和π到4π/3之间

0xFF绿色介于π到5π/3之间，线性梯度0xFF到0x00绿色介于2π/3到π和4π/3到0之间

---

换言之，一个HSV色轮。

我创建了三个重叠的渐变，彼此相距120度以获得此效果。您可能需要调整一些参数：

请注意，在链接中的确切图像将需要其中六个，并使用二次颜色

<Window x:Class="WpfApplication2.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:WpfApplication2"
    mc:Ignorable="d"
    Title="MainWindow" Height="350" Width="525">
<Grid>
    <Ellipse Stroke="Black" Width="150" Height="150">
        <Ellipse.Fill>
            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="#0000FF00" Offset="0.496"/>
                <GradientStop Color="Lime" Offset="1"/>
            </LinearGradientBrush>
        </Ellipse.Fill>
    </Ellipse>
    <Ellipse Stroke="Black" Width="150" Height="150" RenderTransformOrigin="0.5,0.5">
        <Ellipse.RenderTransform>
            <TransformGroup>
                <ScaleTransform/>
                <SkewTransform/>
                <RotateTransform Angle="240"/>
                <TranslateTransform/>
            </TransformGroup>
        </Ellipse.RenderTransform>
        <Ellipse.Fill>
            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="#000000FF" Offset="0.504"/>
                <GradientStop Color="Blue" Offset="1"/>
            </LinearGradientBrush>
        </Ellipse.Fill>
    </Ellipse>
    <Ellipse Stroke="Black" Width="150" Height="150" RenderTransformOrigin="0.5,0.5">
        <Ellipse.RenderTransform>
            <TransformGroup>
                <ScaleTransform/>
                <SkewTransform/>
                <RotateTransform Angle="120"/>
                <TranslateTransform/>
            </TransformGroup>
        </Ellipse.RenderTransform>
        <Ellipse.Fill>
            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="#00FF0000" Offset="0.504"/>
                <GradientStop Color="Red" Offset="1"/>
            </LinearGradientBrush>
        </Ellipse.Fill>
    </Ellipse>

</Grid>

---

我创建了三个重叠的渐变，彼此相距120度以获得此效果。您可能需要调整一些参数：

请注意，在链接中的确切图像将需要其中六个，并使用二次颜色

<Window x:Class="WpfApplication2.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:WpfApplication2"
    mc:Ignorable="d"
    Title="MainWindow" Height="350" Width="525">
<Grid>
    <Ellipse Stroke="Black" Width="150" Height="150">
        <Ellipse.Fill>
            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="#0000FF00" Offset="0.496"/>
                <GradientStop Color="Lime" Offset="1"/>
            </LinearGradientBrush>
        </Ellipse.Fill>
    </Ellipse>
    <Ellipse Stroke="Black" Width="150" Height="150" RenderTransformOrigin="0.5,0.5">
        <Ellipse.RenderTransform>
            <TransformGroup>
                <ScaleTransform/>
                <SkewTransform/>
                <RotateTransform Angle="240"/>
                <TranslateTransform/>
            </TransformGroup>
        </Ellipse.RenderTransform>
        <Ellipse.Fill>
            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="#000000FF" Offset="0.504"/>
                <GradientStop Color="Blue" Offset="1"/>
            </LinearGradientBrush>
        </Ellipse.Fill>
    </Ellipse>
    <Ellipse Stroke="Black" Width="150" Height="150" RenderTransformOrigin="0.5,0.5">
        <Ellipse.RenderTransform>
            <TransformGroup>
                <ScaleTransform/>
                <SkewTransform/>
                <RotateTransform Angle="120"/>
                <TranslateTransform/>
            </TransformGroup>
        </Ellipse.RenderTransform>
        <Ellipse.Fill>
            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="#00FF0000" Offset="0.504"/>
                <GradientStop Color="Red" Offset="1"/>
            </LinearGradientBrush>
        </Ellipse.Fill>
    </Ellipse>

</Grid>

---

最后一个渐变在第一个渐变上渲染。这不是期望的效果。在任何渐变类型上似乎也没有混合模式属性来帮助解决这个问题。你是对的。我发现这是因为我的样本只在半径上混合了alpha。它应该将alpha混合到相邻的颜色中，以获得所需的图案。这有点复杂。我将尝试发布一个更新的示例。最后一个渐变渲染在第一个渐变之上。这不是期望的效果。在任何渐变类型上似乎也没有混合模式属性来帮助解决这个问题。你是对的。我发现这是因为我的样本只在半径上混合了alpha。它应该将alpha混合到相邻的颜色中，以获得所需的图案。这有点复杂。我将尝试发布一个更新的样本。