.NET MAUI中Path与Canvas绘图模糊问题的解决方法

这种缩放模糊不是.NET MAUI的默认行为，而是Windows和Mac平台上矢量图形渲染管线的适配差异导致的——移动平台（Android/iOS）的Canvas/Path渲染会自动适配屏幕DPI，但桌面平台需要额外处理才能保持缩放后的清晰度。以下是针对不同平台的具体解决方案：

Windows平台：手动适配DPI缩放 #

Windows平台无法直接使用ContentScaleFactor，可以通过自定义CanvasHandler，利用WinUI的DPI信息调整渲染缩放：

1. 创建自定义Canvas处理程序：

#if WINDOWS
using Microsoft.Maui.Handlers;
using Microsoft.UI.Xaml.Controls;

namespace YourAppNamespace;

public class DpiAwareCanvasHandler : CanvasHandler
{
    protected override void ConnectHandler(Microsoft.UI.Xaml.Controls.Canvas platformView)
    {
        base.ConnectHandler(platformView);
        platformView.Draw += OnCanvasDraw;
    }

    private void OnCanvasDraw(Canvas sender, CanvasDrawEventArgs args)
    {
        // 获取当前屏幕DPI缩放比例
        var dpiScale = sender.XamlRoot.RasterizationScale;
        // 调整绘图会话的缩放，确保矢量图形适配DPI
        args.DrawingSession.Scale(dpiScale, dpiScale);
    }

    protected override void DisconnectHandler(Microsoft.UI.Xaml.Controls.Canvas platformView)
    {
        platformView.Draw -= OnCanvasDraw;
        base.DisconnectHandler(platformView);
    }
}
#endif

2. 在MauiProgram.cs中注册处理程序：

builder.ConfigureMauiHandlers(handlers =>
{
#if WINDOWS
    handlers.AddHandler<Microsoft.Maui.Controls.Canvas, DpiAwareCanvasHandler>();
#endif
});

Mac平台：改用SkiaSharp渲染 #

Mac平台难以直接访问Canvas内的Path，推荐使用SkiaSharp替代原生Canvas/Path组件，它的跨平台矢量渲染对DPI的适配更一致，缩放时不会模糊：

1. 安装NuGet包：SkiaSharp.Views.Maui

2. 在XAML中使用SKCanvasView：

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:skia="clr-namespace:SkiaSharp.Views.Maui;assembly=SkiaSharp.Views.Maui"
             x:Class="YourAppNamespace.YourPage">
    <skia:SKCanvasView x:Name="SkiaCanvas" PaintSurface="OnSkiaCanvasPaintSurface" />
</ContentPage>

3. 后台代码中绘制图形：

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

    // 配置画笔，开启抗锯齿
    var paint = new SKPaint
    {
        Style = SKPaintStyle.Stroke,
        Color = SKColors.Black,
        StrokeWidth = 2,
        IsAntialias = true
    };

    // 绘制自定义Path
    var path = new SKPath();
    path.MoveTo(100, 100);
    path.LineTo(300, 300);
    path.QuadTo(400, 200, 500, 300);
    canvas.DrawPath(path, paint);
}

通用优化建议 #

• 避免使用RenderTransform做缩放：这种方式是对已渲染的位图进行拉伸，必然导致模糊；应直接基于当前缩放比例和屏幕DPI，动态调整绘图的坐标、尺寸参数，保持矢量绘制特性。
• 开启抗锯齿：所有绘图操作确保开启抗锯齿（如SkiaSharp的IsAntialias、WinUI绘图会话的Antialias属性），提升边缘清晰度。

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