Question

我的目标是实现自定义颜色选择器。除其他原因外，我不想使用xceed这样的现有实现，因为我正在RGBA FP32 ^ 4空间中工作。我知道WPF仅在int8 ^ 4空间中可以显示，但是我正在使用的坐标在FP32 ^ 4空间中。它将与具有10位显示的DirectX12资源互操作。

我需要做的一件事是从{Hue Saturation Luminosity}空间实现双梯度亮度与饱和度图。

我不知道如何在private View getCellAtPos(TableLayout table, int pos) { TableRow row = (TableRow) table.getChildAt(pos /7); return row.getChildAt(pos % 7); }中使用双梯度来做到这一点；所以我认为实现此目的的一种方法是使用单个渐变，例如

Rectangle

然后添加将重叠的水平饱和度梯度滤镜。在这里使用不透明蒙版无济于事：

<Rectangle.Fill>
    <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
    <GradientStop Color="{Binding HueColor}" Offset="1"/>
    <GradientStop Color="#00000000" Offset="0"/>
    </LinearGradientBrush>
</Rectangle.Fill>

我找不到在WPF中实现此目标的方法。我想避免使用cuda或Directx12，即使准确无误，这也是一种矫kill过正。

Answer 1

我必须手动实现2类的位图创建。

public class HSLfloat
{
    public float H { get; set; }
    public float S { get; set; }
    public float L { get; set; }

    public HSLfloat(RGBAfloat rgbafloat)
    {
        var tol = 0.000001;
        var rgb = rgbafloat.ToArrayRGB();
        var rgbTuple = rgbafloat.ToArrayTuple();
        var Cmax = rgb.Max();
        var Cmin = rgb.Min();
        var delta = Cmax - Cmin;
        L = delta / 2;
        var s = Math.Abs(delta) < tol ? 0 : delta / (1 - Math.Abs(2 * L - 1));
        var CmaxName = rgbTuple.Where(o => Math.Abs(o.Item1 - Cmax) < tol).Select(o => o.Item2).First();
        if (Math.Abs(delta) < tol)
            H = 0;
        else
        {
            switch (CmaxName)
            {
                case 'R':
                    H = 60 * ((rgbafloat.G - rgbafloat.B) / delta % 6);
                    break;
                case 'G':
                    H = 60 * ((rgbafloat.B - rgbafloat.R) / delta + 2);
                    break;
                case 'B':
                    H = 60 * ((rgbafloat.R - rgbafloat.G) / delta + 4);
                    break;
            }
        }
    }

    public HSLfloat(float h, float s, float l)
    {
        H = h;
        S = s;
        L = l;
    }

    public RGBAfloat ToRGBAfloat() => new RGBAfloat(this);
    public (float H, float S, float L) ToTuple() => (H, S, L);
}

以及RGBA空间：

public class RGBAfloat
{
    public float R { get; set; }
    public float G { get; set; }
    public float B { get; set; }
    public float A { get; set; }

    public RGBAfloat()
    {
    }

    public RGBAfloat(double r, double g, double b, double a = 1d)
    {
        R = (float)r;
        G = (float)g;
        B = (float)b;
        A = (float)a;
    }

    public RGBAfloat(float r, float g, float b, float a= 1f)
    {
        R = r;
        G = g;
        B = b;
        A = a;
    }

    public RGBAfloat(RGBAfloatStruct colorFloatStruct)
    {
        R = colorFloatStruct.R;
        G = colorFloatStruct.G;
        B = colorFloatStruct.B;
        A = colorFloatStruct.A;
    }

    public RGBAfloat(HSLfloat hslfloat)
    {
        var c = (1 - Math.Abs(2 * hslfloat.L - 1)) * hslfloat.S;
        var x = c * (1 - Math.Abs((hslfloat.H / 60) % 2 - 1));
        var m = hslfloat.L - c / 2;
        var quadrant = (int)(hslfloat.H % 360 / 60); // [0-5]
        switch (quadrant)
        {
            default:
            case 0:
                R = c + m;
                G = x + m;
                B = 0f + m;
                break;
            case 1:
                R = x + m;
                G = c + m;
                B = 0f + m;
                break;
            case 2:
                R = 0f + m;
                G = c + m;
                B = x + m;
                break;
            case 3:
                R = 0f + m;
                G = x + m;
                B =  c + m;
                break;
            case 4:
                R = x + m;
                G = 0f + m;
                B = c + m;
                break;
            case 5:
                R = c + m;
                G = 0f + m;
                B = x + m;
                break;
        }
    }

    public RGBAfloatStruct ToRGBAFloatStruct() => new RGBAfloatStruct {A = A, R = R, G = G, B = B};
    public float[] ToArrayRGB() => new[] {R, G, B};
    public float[] ToArray() => new[] {R, G, B, A};
    public (float,char)[] ToArrayTuple() => new[] { (R, 'R'), (G, 'G'), (B, 'B') };
    public (float R, float G, float B) ToTupleRGB() => (R, G, B);
    public (float R, float G, float B, float A) ToTuple() => (R, G, B, A);
    public HSLfloat ToHSLfloat() => new HSLfloat(this);

    public int ToRGBAint()
    {
        var rr = (int)(R * 255);
        var gg = (int)(G * 255);
        var bb = (int)(B * 255);
        int color = rr << 16;
        color |= gg << 8;
        color |= bb << 0;
        return color;
    }

    public WriteableBitmap ToWriteableBitmap(int size = 200)
    {
        var (h, s, l) = ToHSLfloat().ToTuple();
        var writeableBitmap = new WriteableBitmap(size, size, 96, 96, PixelFormats.Bgr32, null);
        for (int y = 0; y < size; y++)
        for (int x = 0; x < size; x++)
        {
            s = (float)x / size;
            l = (float)(size - y) / size;
            var intColor = new HSLfloat(h, s, l).ToRGBAfloat().ToRGBAint();
            unsafe
            {
                var ptr = writeableBitmap.BackBuffer;
                ptr += y * writeableBitmap.BackBufferStride;
                ptr += x * 4;
                *((IntPtr*)ptr) = (IntPtr)intColor;
            }
        }
        return writeableBitmap;
    }
}

结果，带有(r,g,b)= (0.8, 0.5, 0.3)的SL映射：

Answer 2

尝试使用可视笔刷。您可以绑定F32 Hue颜色，并使用转换器在颜色空间之间进行转换（如您在第11行中看到的）。您甚至可以摆脱视觉画笔，直接在矩形中使用线性渐变和不透明蒙版，尽管我自己也没有尝试过。

<Rectangle Width="200" Height="200">
<Rectangle.Fill>
    <VisualBrush TileMode="None">
        <VisualBrush.Visual>
            <Canvas Background="Black" Width="1" Height="1" SnapsToDevicePixels="True">
                <Rectangle Width="1" Height="1" SnapsToDevicePixels="True">
                    <Rectangle.Fill>
                        <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
                            <LinearGradientBrush.GradientStops>
                                <GradientStop Color="White" Offset="0" />
                                <GradientStop Color="{Binding HueColor, Converter={StaticResource color4Color}}" 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>
</Rectangle.Fill>
</Rectangle>

WPF双渐变色选色器

2 个答案: