创建一个 wpf 渐变画笔编辑器。 (RGB 颜色为 HSL/HSV)
Create a wpf gradient brush editor. ( RGB color to HSL/HSV )
我想创建一个类似于 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。
如果您阅读我发给您的文章,您将了解如何获得 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。
我想创建一个类似于 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。
如果您阅读我发给您的文章,您将了解如何获得 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。