Xamarin SkiaSharp：为ScrollView内的SKCanvasView添加手势缩放功能求助

当然可以实现！给嵌在ScrollView里的SKCanvasView加手势缩放其实挺直观的，核心是结合Xamarin.Forms/.NET MAUI的手势识别器，再配合SkiaSharp的画布变换来完成。下面是具体的实现步骤和代码示例：

核心思路 #

我们会用PinchGestureRecognizer捕捉捏合缩放的手势，记录缩放比例和中心点，然后在SKCanvasView的绘制事件中，通过SKCanvas的变换方法将缩放效果应用到绘制内容上，同时处理好和ScrollView的手势冲突问题。

具体实现 #

1. XAML布局配置 #

首先在布局里给SKCanvasView添加捏合手势识别器，同时给ScrollView命名方便后续控制：

<ScrollView x:Name="mainScrollView">
    <skia:SKCanvasView x:Name="canvasView" PaintSurface="OnCanvasViewPaintSurface">
        <skia:SKCanvasView.GestureRecognizers>
            <PinchGestureRecognizer PinchUpdated="OnPinchUpdated" />
        </skia:SKCanvasView.GestureRecognizers>
    </skia:SKCanvasView>
</ScrollView>

2. 后台逻辑实现 #

在代码后台定义缩放相关的变量，然后处理手势事件和绘制事件：

// 缩放比例，初始为1（原始大小）
private float _scale = 1.0f;
// 缩放的中心点（手势捏合的位置）
private SKPoint _scaleCenter = SKPoint.Empty;

private void OnPinchUpdated(object sender, PinchGestureUpdatedEventArgs e)
{
    switch (e.Status)
    {
        case GestureStatus.Started:
            // 记录手势开始时的缩放中心点
            _scaleCenter = new SKPoint(e.ScaleOrigin.X, e.ScaleOrigin.Y);
            // 暂时禁用ScrollView的触摸响应，避免和缩放手势冲突
            mainScrollView.InputTransparent = true;
            break;

        case GestureStatus.Running:
            // 更新缩放比例，这里可以限制缩放范围（比如0.5倍到5倍）
            _scale *= e.Scale;
            _scale = Math.Max(0.5f, Math.Min(_scale, 5.0f));
            // 触发画布重绘，应用新的缩放比例
            canvasView.InvalidateSurface();
            break;

        case GestureStatus.Completed:
        case GestureStatus.Canceled:
            // 缩放结束后，恢复ScrollView的触摸响应
            mainScrollView.InputTransparent = false;
            break;
    }
}

private void OnCanvasViewPaintSurface(object sender, SKPaintSurfaceEventArgs e)
{
    SKCanvas canvas = e.Surface.Canvas;
    SKImageInfo info = e.Info;

    // 清空画布
    canvas.Clear(SKColors.White);

    // 保存当前画布状态，之后可以恢复
    canvas.Save();

    // 应用缩放变换：先平移到缩放中心点，缩放后再平移回去，确保围绕中心点缩放
    canvas.Translate(_scaleCenter.X, _scaleCenter.Y);
    canvas.Scale(_scale);
    canvas.Translate(-_scaleCenter.X, -_scaleCenter.Y);

    // --------------------------
    // 这里替换成你的自定义绘制逻辑
    // 示例：绘制一个蓝色边框的矩形
    using (var paint = new SKPaint 
    { 
        Color = SKColors.Blue, 
        Style = SKPaintStyle.Stroke, 
        StrokeWidth = 2 
    })
    {
        canvas.DrawRect(new SKRect(50, 50, 200, 200), paint);
    }
    // --------------------------

    // 恢复画布到之前的状态
    canvas.Restore();
}

额外说明 #

• 缩放中心点：代码里会以手势捏合的原点作为缩放中心，这样缩放体验更符合用户直觉。
• 缩放范围限制：你可以根据需求调整Math.Max和Math.Min的参数，设置最小和最大缩放倍数。
• 手势冲突处理：通过设置ScrollView的InputTransparent属性，在缩放时暂时让ScrollView不响应触摸，避免两种手势互相干扰。
• 平移支持：如果还需要拖拽平移功能，可以添加PanGestureRecognizer，但要注意和ScrollView的滚动手势做区分（比如可以判断手势的移动方向或速度来决定响应哪种操作）。

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