MAUI中基于Slider值动态调整SVG水杯水位的问题咨询

我正在开发MAUI应用，需要实现拖动Slider控件时，动态调整SVG水杯图片的水位。目前已完成以下工作：

• 拥有SVG格式的水杯图片
• 使用SkiaSharp进行图形渲染与处理
• 添加了可调节数值的Slider控件

已实现水位调整的基础效果，但遇到问题：降低水位时，填充区域的高度变化是从底部向顶部收缩，不符合实际水位下降的逻辑（应该是顶部向下降低，底部保持不变）。

解决方案 #

问题核心是填充矩形的坐标计算逻辑错误，同时需要通过SVG路径裁剪确保填充只显示在水杯内部。以下是修改后的完整实现：

1. 优化GlassView类（核心修改）

using SkiaSharp;
using SkiaSharp.Extended.Svg;
using System.IO;

namespace MauiApp4
{
    public class GlassView : SKCanvasView
    {
        private float _fillLevel = 0.5f;
        private SKSvg _svg;
        private SKPath _glassPath;

        public float FillLevel
        {
            get => _fillLevel;
            set
            {
                _fillLevel = Math.Clamp(value, 0f, 1f);
                InvalidateSurface();
            }
        }

        protected override void OnSizeAllocated(double width, double height)
        {
            base.OnSizeAllocated(width, height);
            LoadAndProcessSvg();
        }

        private void LoadAndProcessSvg()
        {
            if (_svg != null) return;

            // 加载SVG文件（确保glass.svg路径正确，可设置为嵌入式资源）
            using (var stream = File.OpenRead("glass.svg"))
            {
                _svg = new SKSvg();
                _svg.Load(stream);
                _glassPath = ExtractGlassPath(_svg.Picture);
            }
        }

        private SKPath ExtractGlassPath(SKPicture picture)
        {
            var path = new SKPath();
            var recorder = new SKPathRecorder(path);
            using (var canvas = new SKCanvas(recorder))
            {
                canvas.DrawPicture(picture, (float)Width, (float)Height);
            }
            return path;
        }

        protected override void OnPaintSurface(SKPaintSurfaceEventArgs e)
        {
            base.OnPaintSurface(e);
            var canvas = e.Surface.Canvas;
            canvas.Clear(SKColors.White);

            if (_svg == null || _glassPath == null) return;

            // 先绘制水杯SVG轮廓
            canvas.DrawPicture(_svg.Picture, (float)Width, (float)Height);

            // 计算正确的填充区域：底部与控件底部对齐，高度随FillLevel变化
            var fillHeight = (float)(Height * FillLevel);
            // 关键：Y坐标为控件高度减去填充高度，确保填充从底部向上延伸
            var fillRect = new SKRect(0, (float)(Height - fillHeight), (float)Width, (float)Height);

            // 创建填充画笔
            var fillPaint = new SKPaint
            {
                Color = SKColors.LightBlue,
                Style = SKPaintStyle.Fill
            };

            // 裁剪画布，让填充只显示在水杯轮廓内部
            canvas.Save();
            canvas.ClipPath(_glassPath);
            canvas.DrawRect(fillRect, fillPaint);
            canvas.Restore();
        }
    }
}

2. 绑定Slider事件（MainPage.xaml.cs）

private void Slider_ValueChanged(object sender, ValueChangedEventArgs e)
{
    glassView.FillLevel = (float)e.NewValue;
}

关键说明 #

• 坐标修正：通过Height - fillHeight计算填充矩形的Y轴起点，确保水位下降时是顶部向下收缩，底部保持固定，符合真实逻辑
• SVG路径缓存：在控件尺寸确定后仅加载一次SVG，避免重复IO操作提升性能
• 区域裁剪：提取水杯的SVG路径并裁剪画布，保证填充色不会超出水杯轮廓

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