MAUI Blazor应用图片捏合缩放与平移手势联动问题求助

原代码的核心问题出在缩放结束后未同步偏移基准、平移边界逻辑错误，以及命名空间适配问题，以下是修复后的完整代码：

using Microsoft.Maui.Controls;

namespace YourNamespace
{
    public class ZoomPanContentView : ContentView
    {
        private double _startScale = 1;
        private double _currentScale = 1;
        private double _xOffset = 0;
        private double _yOffset = 0;

        public ZoomPanContentView()
        {
            var pinchGesture = new PinchGestureRecognizer();
            pinchGesture.PinchUpdated += OnPinchUpdated;
            GestureRecognizers.Add(pinchGesture);

            var panGesture = new PanGestureRecognizer();
            panGesture.PanUpdated += OnPanUpdated;
            GestureRecognizers.Add(panGesture);
        }

        private void OnPinchUpdated(object sender, PinchGestureUpdatedEventArgs e)
        {
            if (e.Status == GestureStatus.Started)
            {
                _startScale = Content.Scale;
                Content.AnchorX = 0;
                Content.AnchorY = 0;
            }
            else if (e.Status == GestureStatus.Running)
            {
                // 计算当前缩放比例，限制在1-5之间
                _currentScale = _startScale * e.Scale;
                _currentScale = Math.Max(1, _currentScale);
                _currentScale = Math.Min(_currentScale, 5);

                // 计算缩放原点相对于内容的位置
                var scaledContentWidth = Content.Width * _startScale;
                var scaledContentHeight = Content.Height * _startScale;
                var originX = e.ScaleOrigin.X * Width - _xOffset;
                var originY = e.ScaleOrigin.Y * Height - _yOffset;

                // 计算缩放后的目标偏移量，保证缩放中心位置不变
                var targetX = originX - (originX * _currentScale / _startScale);
                var targetY = originY - (originY * _currentScale / _startScale);

                // 限制偏移量，确保图片不会超出容器可视范围（缩放后）
                var maxX = Math.Max(0, Content.Width * (_currentScale - 1));
                var maxY = Math.Max(0, Content.Height * (_currentScale - 1));
                targetX = Math.Clamp(targetX, -maxX, 0);
                targetY = Math.Clamp(targetY, -maxY, 0);

                Content.Scale = _currentScale;
                Content.TranslationX = targetX;
                Content.TranslationY = targetY;
            }
            else if (e.Status == GestureStatus.Completed)
            {
                // 缩放结束后更新偏移基准，确保后续平移基于当前位置
                _xOffset = Content.TranslationX;
                _yOffset = Content.TranslationY;
            }
        }

        private void OnPanUpdated(object sender, PanUpdatedEventArgs e)
        {
            // 未缩放时不允许平移
            if (_currentScale <= 1) return;

            switch (e.StatusType)
            {
                case GestureStatus.Running:
                    // 计算当前平移后的临时偏移
                    var tempX = _xOffset + e.TotalX;
                    var tempY = _yOffset + e.TotalY;

                    // 限制平移范围，确保图片边缘不会超出容器
                    var maxX = Math.Max(0, Content.Width * (_currentScale - 1));
                    var maxY = Math.Max(0, Content.Height * (_currentScale - 1));
                    tempX = Math.Clamp(tempX, -maxX, 0);
                    tempY = Math.Clamp(tempY, -maxY, 0);

                    Content.TranslationX = tempX;
                    Content.TranslationY = tempY;
                    break;
                case GestureStatus.Completed:
                    // 平移结束后更新偏移基准
                    _xOffset = Content.TranslationX;
                    _yOffset = Content.TranslationY;
                    break;
            }
        }
    }
}

关键修改说明 #

• 命名空间替换：把Xamarin.Forms换成Microsoft.Maui.Controls，适配MAUI环境
• 缩放结束同步基准：新增GestureStatus.Completed分支，更新偏移变量，解决缩放后平移坐标混乱的问题
• 修正缩放偏移计算：重新计算缩放原点和目标偏移，保证捏合缩放时中心位置不变，避免图片跳变
• 平移边界逻辑修复：统一使用Math.Clamp处理边界，确保图片平移时不会超出容器可视范围，逻辑更清晰
• 变量命名优化：用下划线开头区分私有变量，代码可读性更好

使用方式 #

在MAUI Blazor的Razor组件中，把需要缩放平移的图片包裹在这个自定义ContentView里即可：

<ZoomPanContentView>
    <Image Source="your-image-path.jpg" Aspect="AspectFit" />
</ZoomPanContentView>

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