在.NET 9 MAUI数独应用中实现候选数间直线绘制的技术求助

嘿，我之前在MAUI里做自定义绘图相关的需求时，也踩过坐标系转换的大坑，你的这个数独候选数连线需求其实挺有代表性的，咱们一步步来搞定它～

首先得明确核心问题：你现在拿到的候选数坐标大概率是局部坐标系下的数值（比如相对于单个单元格、或者StackLayout的局部位置），但绘图需要的是整个绘图容器的绝对坐标系，再加上MAUI跨平台的DPI缩放、布局偏移，直接用局部坐标画肯定会错位。

下面是我亲测有效的解决方案，附完整代码示例：

1. 先搭建正确的绘图层级 #

不要直接在原有的StackLayout上画，改用AbsoluteLayout作为容器，把数独网格和绘图画布叠在一起——推荐用SkiaSharp.Views.Maui来做绘图，这是MAUI生态里做自定义跨平台绘图最稳定的库，比原生GraphicsView灵活性高太多。

XAML代码示例：

<ContentPage ...
             xmlns:skia="clr-namespace:SkiaSharp.Views.Maui.Controls;assembly=SkiaSharp.Views.Maui.Controls">
    <AbsoluteLayout>
        <!-- 你的原有数独网格布局，保持不变 -->
        <StackLayout x:Name="SudokuGridContainer" Orientation="Vertical"
                    AbsoluteLayout.LayoutBounds="0,0,1,1"
                    AbsoluteLayout.LayoutFlags="All">
            <!-- 这里是你的9x9单元格布局，每个Cell里包含候选数控件/绘制逻辑 -->
        </StackLayout>

        <!-- 绘图用的Skia画布，叠在网格上方 -->
        <skia:SKCanvasView x:Name="CandidateLinkCanvas"
                          PaintSurface="OnCandidateLinkCanvasPaint"
                          AbsoluteLayout.LayoutBounds="0,0,1,1"
                          AbsoluteLayout.LayoutFlags="All"
                          InputTransparent="True" />
    </AbsoluteLayout>
</ContentPage>

注意：InputTransparent="True"很重要，这样画布不会拦截下面数独网格的触摸/拖拽事件，只负责显示连线。

2. 坐标转换的关键：用MAUI原生方法自动适配 #

MAUI的View类自带TranslateToParent方法，它会自动处理布局的缩放、偏移、DPI适配，帮你把局部坐标转换成父容器的绝对坐标，完全不用自己算缩放比例。

步骤分解：

• 当你拖拽选中两个候选数时，先获取候选数在所在单元格内的中心坐标（比如候选数是一个Label，就取它的中心位置）
• 用TranslateToParent把这个局部坐标转换成相对于数独网格容器的坐标
• 再转换成相对于Skia画布的绝对坐标
• 最后把坐标传给SkiaSharp去画直线

3. 完整C#逻辑代码 #

首先定义一个简单的类来存连线的起点和终点：

// 用来存储一条连线的两个端点
public class CandidateConnection
{
    public SKPoint Start { get; set; }
    public SKPoint End { get; set; }
}

然后在页面代码里维护连线列表，处理坐标转换和绘图：

private List<CandidateConnection> _activeConnections = new List<CandidateConnection>();

// 假设这个方法是你拖拽结束时触发的，startCandidate和endCandidate是选中的两个候选数控件
private void OnCandidateLinkDropped(View startCandidate, View endCandidate)
{
    // 1. 取第一个候选数的中心坐标（相对于自身控件）
    var startLocalCenter = new Point(startCandidate.Width / 2, startCandidate.Height / 2);
    // 转换成相对于数独网格容器的坐标
    var startGridPos = startCandidate.TranslateToParent(startLocalCenter);
    // 再转换成相对于Skia画布的绝对坐标
    var startCanvasPos = CandidateLinkCanvas.TranslateToParent(startGridPos);

    // 2. 对第二个候选数做同样的坐标转换
    var endLocalCenter = new Point(endCandidate.Width / 2, endCandidate.Height / 2);
    var endGridPos = endCandidate.TranslateToParent(endLocalCenter);
    var endCanvasPos = CandidateLinkCanvas.TranslateToParent(endGridPos);

    // 3. 转换成SkiaSharp需要的SKPoint
    var skStart = new SKPoint((float)startCanvasPos.X, (float)startCanvasPos.Y);
    var skEnd = new SKPoint((float)endCanvasPos.X, (float)endCanvasPos.Y);

    // 4. 添加连线到列表，刷新画布
    _activeConnections.Add(new CandidateConnection { Start = skStart, End = skEnd });
    CandidateLinkCanvas.InvalidateSurface();
}

// Skia画布的绘制事件
private void OnCandidateLinkCanvasPaint(object sender, SKPaintSurfaceEventArgs e)
{
    var canvas = e.Surface.Canvas;
    canvas.Clear(SKColors.Transparent); // 透明背景，不遮挡下面的数独网格

    // 配置画笔样式：蓝色、2px粗、抗锯齿
    var linkPaint = new SKPaint
    {
        Color = SKColors.DodgerBlue,
        StrokeWidth = 2,
        IsAntialias = true,
        Style = SKPaintStyle.Stroke
    };

    // 遍历所有连线，逐一绘制
    foreach (var connection in _activeConnections)
    {
        canvas.DrawLine(connection.Start, connection.End, linkPaint);
    }
}

4. 额外注意事项 #

• 如果你的候选数是直接绘制在单元格里的（不是独立控件），那你需要在单元格的绘制逻辑里记录每个候选数的中心坐标，再用同样的TranslateToParent方法转换到画布坐标系。
• 当屏幕旋转、窗口缩放时，数独网格的布局会变化，这时候需要清空旧的连线，重新计算坐标再画——可以在SizeChanged事件里触发刷新。
• 如果你需要支持删除连线，只需要从_activeConnections列表里移除对应项，再调用CandidateLinkCanvas.InvalidateSurface()即可。

内容来源于stack exchange