【问题标题】:Path Gradient in WPFWPF中的路径渐变
【发布时间】:2016-10-26 07:53:21
【问题描述】:

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

我更愿意从 WinForms 做类似的解决方案: http://csharphelper.com/blog/2014/08/fill-a-polygon-with-a-pathgradientbrush-in-c/

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

编辑以明确最终目标: 我需要一个渐变 -π/3 到 π/3 之间的 0xFF RED,以及从 -π/3 到 -2π/3 和 π/3 到 2π/3 的线性梯度 0xFF 到 0x00 RED。

0xFF BLUE 介于 π/3 到 π 之间,线性梯度 0xFF 到 0x00 BLUE 从 0 到 π/3 和 π 到 4π/3。

0xFF GREEN 介于 π 到 5π/3 之间,线性梯度 0xFF 到 0x00 GREEN 从 2π/3 到 π 和 4π/3 到 0。

换句话说,一个 HSV 色轮。

【问题讨论】:

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


    【解决方案1】:

    我创建了三个重叠的渐变,彼此成 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 与相邻颜色混合以获得所需的图案。
    • 这有点复杂。我将尝试发布更新的示例。
    猜你喜欢
    • 1970-01-01
    • 2015-05-10
    • 1970-01-01
    • 2011-09-22
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-04-06
    相关资源
    最近更新 更多