创建 HUE 颜色条 [英] Create a HUE color bar

问题描述

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

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

创建它的一种方法是通过 XAML 中的渐变停止.例如:

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>

以上将生成:

但是，我不确定停靠点是否正确.

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.

此致，

凯西

推荐答案

看起来您的最后一站的间隔 (+0.25) 与前一站 (+0.15) 的间隔不同.您基本上希望所有停靠点之间的间隙相同以获得相同的效果(颜色条只是线性分布).

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).

<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>

看起来像:

这篇关于创建 HUE 颜色条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！