如何在UWP Win2D像素着色器中支持多颜色输入？

Awesome that you’ve got your single-color replacement app working smoothly with Jet Chopper’s help! Expanding to support multiple color pairs is a great next feature—let’s break down how to implement this while building on your existing ControlSpectrum and pixel shader setup:

1. Define a Reusable Color Pair Data Structure #

First, create a model to store each source-target color relationship, and use an observable collection to track dynamic pairs (so your UI updates automatically when pairs are added/removed):

public class ColorReplacementPair : INotifyPropertyChanged
{
    private Color _sourceColor;
    private Color _targetColor;

    public Color SourceColor
    {
        get => _sourceColor;
        set { _sourceColor = value; OnPropertyChanged(); }
    }

    public Color TargetColor
    {
        get => _targetColor;
        set { _targetColor = value; OnPropertyChanged(); }
    }

    public event PropertyChangedEventHandler PropertyChanged;
    private void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

// In your viewmodel
public ObservableCollection<ColorReplacementPair> ColorReplacementPairs { get; } = new();

2. Extend the UI for Dynamic Color Pairs #

Replace your single ControlSpectrum setup with an ItemsControl that generates a pair of spectrum pickers for each color entry, plus buttons to add/remove pairs:

<StackPanel>
    <ItemsControl ItemsSource="{Binding ColorReplacementPairs}">
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <StackPanel Orientation="Horizontal" Margin="0,8">
                    <TextBlock Text="Source:" VerticalAlignment="Center" Margin="0,0,6,0"/>
                    <controls:ControlSpectrum Color="{Binding SourceColor, Mode=TwoWay}" Width="120"/>
                    <TextBlock Text="→ Target:" VerticalAlignment="Center" Margin="12,0,6,0"/>
                    <controls:ControlSpectrum Color="{Binding TargetColor, Mode=TwoWay}" Width="120"/>
                    <Button Content="Remove" 
                            Command="{Binding DataContext.RemovePairCommand, RelativeSource={RelativeSource AncestorType=ItemsControl}}"
                            CommandParameter="{Binding}"
                            Margin="12,0,0,0"/>
                </StackPanel>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>
    <Button Content="Add New Color Pair" 
            Command="{Binding AddPairCommand}"
            Margin="0,12,0,0"/>
</StackPanel>

Add corresponding commands in your viewmodel to handle adding/removing pairs:

public ICommand AddPairCommand => new RelayCommand(() => 
    ColorReplacementPairs.Add(new ColorReplacementPair()));

public ICommand RemovePairCommand => new RelayCommand<ColorReplacementPair>(pair => 
    ColorReplacementPairs.Remove(pair));

3. Modify the Pixel Shader to Handle Multiple Pairs #

Update your HLSL shader to iterate over multiple source-target color pairs. We’ll use a constant buffer to pass pair data, with a configurable maximum pair limit (adjust based on your needs):

cbuffer ColorReplacementSettings : register(b0)
{
    int numActivePairs;
    float4 sourceColors[10]; // Supports up to 10 pairs - adjust as needed
    float4 targetColors[10];
    float matchTolerance; // Optional: Allow fuzzy color matching
}

float4 main(float4 input : SV_INPUT) : SV_TARGET
{
    float4 pixel = input;

    // Check each color pair for a match
    for(int i = 0; i < numActivePairs; i++)
    {
        // Calculate color distance (RGB space - switch to HSL for better perceptual matching if needed)
        float colorDiff = distance(pixel.rgb, sourceColors[i].rgb);
        if(colorDiff < matchTolerance)
        {
            pixel.rgb = targetColors[i].rgb;
            break; // Stop at first match, or remove to allow overlapping replacements
        }
    }

    return pixel;
}

The matchTolerance value (0.0 to 1.0) lets users replace colors that are similar to the source, not just exact matches—this makes the feature more flexible.

4. Sync UI Data to the Shader #

Update your C# code to push the color pairs from the observable collection into the shader’s constant buffer whenever changes occur:

private void UpdateShaderParameters()
{
    var colorEffect = YourImageControl.Effect as PixelShaderEffect; // Replace with your effect instance
    if(colorEffect == null || ColorReplacementPairs.Count == 0) return;

    const int maxPairs = 10;
    float[] sourceColorData = new float[maxPairs * 4];
    float[] targetColorData = new float[maxPairs * 4];

    // Convert WPF Color objects to float4 values (0-1 range for RGBA)
    for(int i = 0; i < ColorReplacementPairs.Count && i < maxPairs; i++)
    {
        var pair = ColorReplacementPairs[i];
        // Source color
        sourceColorData[i*4] = pair.SourceColor.R / 255f;
        sourceColorData[i*4+1] = pair.SourceColor.G / 255f;
        sourceColorData[i*4+2] = pair.SourceColor.B / 255f;
        sourceColorData[i*4+3] = pair.SourceColor.A / 255f;
        // Target color
        targetColorData[i*4] = pair.TargetColor.R / 255f;
        targetColorData[i*4+1] = pair.TargetColor.G / 255f;
        targetColorData[i*4+2] = pair.TargetColor.B / 255f;
        targetColorData[i*4+3] = pair.TargetColor.A / 255f;
    }

    // Update shader constants
    colorEffect.SetValue("numActivePairs", ColorReplacementPairs.Count);
    colorEffect.SetValue("sourceColors", sourceColorData);
    colorEffect.SetValue("targetColors", targetColorData);
    colorEffect.SetValue("matchTolerance", 0.06f); // Default tolerance - add a slider to let users adjust this!
}

Call this method whenever the ColorReplacementPairs collection changes (subscribe to CollectionChanged) or when any color in a pair is updated.

5. Optional Enhancements #

• Add a global or per-pair tolerance slider for fine-tuning color matching
• Switch to HSL color space in the shader for more intuitive perceptual matching
• Add a preview panel to show real-time changes without modifying the original image
• Implement save/load functionality for color pair presets

内容的提问来源于stack exchange，提问作者Maximus