创建一个 wpf 渐变画笔编辑器。 ( RGB 颜色转 HSL/HSV )答案

【问题标题】：Create a wpf gradient brush editor. ( RGB color to HSL/HSV )创建一个 wpf 渐变画笔编辑器。 ( RGB 颜色转 HSL/HSV )
【发布时间】：2016-02-12 14:52:32
【问题描述】：

我想创建一个渐变画笔编辑器，如 MSVS 2013 画笔编辑器。

我使用下面的代码来制作我的编辑器

 <VisualBrush x:Key="MyBrush" TileMode="None">
        <VisualBrush.Visual>
            <Canvas Background="Black" Width="1" Height="1" >
                <Rectangle Width="1" Height="1" >
                    <Rectangle.Fill>
                        <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
                            <LinearGradientBrush.GradientStops>
                                <GradientStop Color="White" Offset="0" />
                                <GradientStop Color="{Binding ElementName=picker,Path=SelectedColour}" Offset="1" />
                            </LinearGradientBrush.GradientStops>
                        </LinearGradientBrush>
                    </Rectangle.Fill>
                    <Rectangle.OpacityMask>
                        <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                            <LinearGradientBrush.GradientStops>
                                <GradientStop Color="#FFFFFFFF" Offset="0"/>
                                <GradientStop Color="#00FFFFFF" Offset="1"/>
                            </LinearGradientBrush.GradientStops>
                        </LinearGradientBrush>
                    </Rectangle.OpacityMask>
                </Rectangle>
            </Canvas>
        </VisualBrush.Visual>
    </VisualBrush>

请看下图并回答我的问题

更新：

我意识到我应该将 RGB 转换为 HSV。

RGB to HSV formula

【问题讨论】：

Y轴是颜色的亮度，X轴是饱和度。您需要将 RGB 颜色转换为 HSL（色调、饱和度、亮度），然后使用这些值绘制 (x,y)。参考这里：niwa.nu/2013/05/math-behind-colorspace-conversions-rgb-hsl
@Mangist 谢谢，请发表您的评论作为答案，并告诉我如何从 HSL 值中获取 X 和 Y。

标签： c# wpf gradient

【解决方案1】：

如果您阅读了我发给您的文章，您将了解如何获得 X（饱和度 %）和 Y（亮度 %）。它们以百分比表示，您可以根据颜色框的宽度绘制该圆圈。因此，如果正方形为 200x200 像素，饱和度为 45%，则绘制 X = 90。如果亮度为 60%，则绘制 Y = 120。

XAML：

<Path Stroke="White" StrokeThickness="2" Fill="Red" >
    <Path.Data>
        <EllipseGeometry 
            Center="{Binding Path=CenterPoint}" 
            RadiusX="5" 
            RadiusY="10" />
    </Path.Data>
</Path>

视图模型：

public Point CenterPoint
{
  get { return new Point(Lightness, Saturation); }
}

您需要填写将 RGB 颜色转换为 HSL 的详细信息。

【讨论】：

啊哈，非常感谢！（已编辑问题的标题）