创建 HUE 颜色条

发布于 2024-12-07 00:23:44 字数 1019 浏览 0 评论 0原文

我正在创建一个颜色选择器，我正处于需要创建 HUE 颜色条的阶段：

在此处输入图像描述

创建它的一种方法是通过 XAML 中的渐变停止点。例如：

<Rectangle Width="50" Height="100">
    <Rectangle.Fill>
        <LinearGradientBrush StartPoint="0.5,0.025" EndPoint="0.5,1" >
            <GradientStop Color="#FFFF0000" />
            <GradientStop Color="#FEFFFF00" Offset="0.15" />
            <GradientStop Color="#FE00FF00" Offset="0.3" />
            <GradientStop Color="#FE00FFFF" Offset="0.45" />
            <GradientStop Color="#FE0000FF" Offset="0.6" />
            <GradientStop Color="#FEFF00FF" Offset="0.85" />
            <GradientStop Color="#FFFF0000" Offset="1" />
        </LinearGradientBrush>
    </Rectangle.Fill>
</Rectangle>

上面将生成：

HUE Bar

但是，我不确定止损是否正确。

是否有关于如何生成这样的栏的约定？任何建议将不胜感激。

最好的问候，

凯西

原文

I'm creating a color picker and I am at a stage where I need to create a HUE color bar:

enter image description here

One way to create it would be through gradient stops in XAML. For example:

<Rectangle Width="50" Height="100">
    <Rectangle.Fill>
        <LinearGradientBrush StartPoint="0.5,0.025" EndPoint="0.5,1" >
            <GradientStop Color="#FFFF0000" />
            <GradientStop Color="#FEFFFF00" Offset="0.15" />
            <GradientStop Color="#FE00FF00" Offset="0.3" />
            <GradientStop Color="#FE00FFFF" Offset="0.45" />
            <GradientStop Color="#FE0000FF" Offset="0.6" />
            <GradientStop Color="#FEFF00FF" Offset="0.85" />
            <GradientStop Color="#FFFF0000" Offset="1" />
        </LinearGradientBrush>
    </Rectangle.Fill>
</Rectangle>

The above will generate:

HUE Bar

However, I am not sure whether the stops are correct.

Is there a convention on how to generate such a bar? Any advice would be highly appreciated.

Best Regards,

Casey

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

羞稚 2024-12-14 00:23:44

您的第二个最后一站的间隔 (+0.25) 与之前的间隔 (+0.15) 似乎不同。您基本上希望所有停止点之间的间隙相同以获得相同的效果（该颜色条只是线性分布）。

试试这个：

<Rectangle.Fill>
    <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1.0" >
        <GradientStop Color="#FFFF0000" />
        <GradientStop Color="#FEFFFF00" Offset="0.167" />
        <GradientStop Color="#FE00FF00" Offset="0.333" />
        <GradientStop Color="#FE00FFFF" Offset="0.5" />
        <GradientStop Color="#FE0000FF" Offset="0.667" />
        <GradientStop Color="#FEFF00FF" Offset="0.833" />
        <GradientStop Color="#FFFF0000" Offset="1.0" />
    </LinearGradientBrush>
</Rectangle.Fill>

看起来像：

在此处输入图像描述

It looks like your 2nd last stop is at a different interval (+0.25) to the previous ones (+0.15). You basically want the same gap between all stops to get the same effect (that colour bar is just a linear distribution).

Try this instead:

<Rectangle.Fill>
    <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1.0" >
        <GradientStop Color="#FFFF0000" />
        <GradientStop Color="#FEFFFF00" Offset="0.167" />
        <GradientStop Color="#FE00FF00" Offset="0.333" />
        <GradientStop Color="#FE00FFFF" Offset="0.5" />
        <GradientStop Color="#FE0000FF" Offset="0.667" />
        <GradientStop Color="#FEFF00FF" Offset="0.833" />
        <GradientStop Color="#FFFF0000" Offset="1.0" />
    </LinearGradientBrush>
</Rectangle.Fill>