WPF中的路径渐变

时间:2016-06-23 20:01:11

标签: c# wpf system.drawing vector-graphics gradients

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

我更喜欢从WinForms做这样的解决方案: http://csharphelper.com/blog/2014/08/fill-a-polygon-with-a-pathgradientbrush-in-c/

有没有办法在WPF中实现这一目标?

编辑以澄清最终目标: 我需要一个渐变 0xFF RED在-π/ 3到π/ 3之间,线性梯度0xFF到0x00 RED从-π/ 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色轮。

1 个答案:

答案 0 :(得分:0)

我创建了三个重叠的渐变,彼此相隔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>