MAUI Android中如何通过RGB滑块修改SVG颜色？

我是新手开发者，正在开发MAUI Android应用，已经实现了RGB滑块的双向绑定，能通过Color.FromRgb()生成对应颜色，但不知道怎么把这个颜色应用到指定SVG图片上。试过IconTintColorBehavior但没解决问题，只需要能将生成的颜色应用到SVG的方法。

SVG图片代码 #

<Image
    Source="color.svg"
    Grid.Row="0"
    Grid.Column="1"/>

RGB滑块代码（红色示例） #

<!-- 这里只展示红色滑块，绿、蓝滑块已实现 -->
<Slider
    x:Name="sldRed"
    Grid.Row="0"
    Grid.Column="2"
    WidthRequest="255"
    VerticalOptions="Center"
    HorizontalOptions="Center"
    Maximum="255"
    Minimum="0"
    Value="{Binding RedValue, Mode=TwoWay}"/> <!-- 绑定红色RGB值 -->
<Entry
    x:Name="entRed"
    Grid.Row="0"
    Grid.Column="3"
    HeightRequest="35"
    BackgroundColor="Transparent"
    VerticalOptions="Center"
    HorizontalOptions="Start"
    Keyboard="Numeric"
    FontFamily="QR"
    FontSize="Body"
    TextColor="{StaticResource Active}"
    Text="{Binding RedValue, Mode=TwoWay}"/> <!-- 绑定红色RGB值 -->

后台代码 #

public partial class MainPage : ContentPage
{
    private int _redValue;
    private int _greenValue;
    private int _blueValue;
    public int RedValue
    {
        get => _redValue;
        set
        {
            if (_redValue != value)
            {
                if (value < 0) _redValue = 0;
                else if (value > 255) _redValue = 255;
                _redValue = value;
                OnPropertyChanged(nameof(RedValue));
            }
        }
    }

    public MainPage()
    {
        InitializeComponent();
        BindingContext = this;
    }
}

尝试过的代码 #

<Image Source="shield.png">
<Image.Behaviors>
<toolkit:IconTintColorBehavior TintColor="Red" />
</Image.Behaviors>
</Image>

解决方案 #

方法1：用SkiaSharp直接处理SVG着色 #

MAUI默认Image控件对SVG的着色支持有限，SkiaSharp可以直接加载并修改SVG颜色，步骤如下：

1. 安装SkiaSharp.Views.Maui和SkiaSharp.Svg NuGet包。
2. 替换XAML中的Image为SkiaSharp的画布控件：

<skia:SKCanvasView x:Name="SvgCanvas" Grid.Row="0" Grid.Column="1" PaintSurface="OnSvgPaintSurface"/>

3. 后台加载SVG并实现着色逻辑：

private SKPicture? _svgPicture;

public MainPage()
{
    InitializeComponent();
    BindingContext = this;
    LoadSvg();
}

private void LoadSvg()
{
    using var stream = FileSystem.OpenAppPackageFileAsync("color.svg").Result;
    var svg = new SKSvg();
    svg.Load(stream);
    _svgPicture = svg.Picture;
}

private void OnSvgPaintSurface(object? sender, SKPaintSurfaceEventArgs e)
{
    var canvas = e.Surface.Canvas;
    canvas.Clear();

    if (_svgPicture == null) return;

    // 计算缩放比例，适配控件大小
    var scaleX = e.Info.Width / _svgPicture.CullRect.Width;
    var scaleY = e.Info.Height / _svgPicture.CullRect.Height;
    var scale = Math.Min(scaleX, scaleY);

    canvas.Scale(scale);

    // 创建着色画笔，用当前RGB值生成颜色
    using var paint = new SKPaint();
    paint.Color = new SKColor((byte)RedValue, (byte)GreenValue, (byte)BlueValue);
    paint.Style = SKPaintStyle.Fill; // 填充模式，需要描边就改成SKPaintStyle.Stroke

    // 绘制着色后的SVG
    canvas.DrawPicture(_svgPicture, paint);
}

4. 在RGB值变化时触发画布重绘：
   修改RedValue、GreenValue、BlueValue的setter，添加重绘触发：

public int RedValue
{
    get => _redValue;
    set
    {
        if (_redValue != value)
        {
            _redValue = Math.Clamp(value, 0, 255);
            OnPropertyChanged(nameof(RedValue));
            SvgCanvas.InvalidateSurface(); // 触发画布重绘
        }
    }
}
// GreenValue和BlueValue的setter同理添加InvalidateSurface调用

方法2：用MAUI Community Toolkit的SvgImage控件 #

如果不想引入SkiaSharp，可以用社区工具包的SvgImage控件，它支持TintColor绑定：

1. 安装Maui.CommunityToolkit NuGet包。
2. 替换XAML中的Image为SvgImage：

<toolkit:SvgImage
    Source="color.svg"
    Grid.Row="0"
    Grid.Column="1"
    TintColor="{Binding CurrentColor}"/>

3. 在后台添加CurrentColor属性：

public Color CurrentColor
{
    get => Color.FromRgb(RedValue, GreenValue, BlueValue);
}

4. 在RGB值变化时通知CurrentColor更新：
   修改RedValue、GreenValue、BlueValue的setter：

public int RedValue
{
    get => _redValue;
    set
    {
        if (_redValue != value)
        {
            _redValue = Math.Clamp(value, 0, 255);
            OnPropertyChanged(nameof(RedValue));
            OnPropertyChanged(nameof(CurrentColor)); // 通知颜色属性变化
        }
    }
}
// GreenValue和BlueValue的setter同理添加OnPropertyChanged(nameof(CurrentColor))调用

注意：如果SVG本身包含多种颜色，着色效果会是颜色叠加，建议使用单色（比如白色）的SVG来获得最佳的动态着色效果。

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