将Xamarin.Forms.Shapes.Path迁移至MAUI：Grid内绘制圆形的实现

架构老林

2026-6-25

在MAUI的Grid中绘制圆形的解决方案

你可以直接复用大部分原Xamarin代码的逻辑，MAUI的API和Xamarin.Forms高度兼容，只需要做少量调整：

方法一：使用Path + EllipseGeometry（和原代码逻辑一致）

using Microsoft.Maui.Controls;
using Microsoft.Maui.Shapes;

public int DrawCircle(Brush colour, int strokeThickness, double x, double y, double radiusX, double radiusY, Grid cv)
{
    var circlePath = new Path();
    circlePath.Stroke = colour;
    circlePath.Fill = Brushes.Transparent;
    circlePath.StrokeThickness = strokeThickness;

    var ellipseGeometry = new EllipseGeometry
    {
        Center = new Point(x, y),
        RadiusX = radiusX,
        RadiusY = radiusY
    };

    circlePath.Data = ellipseGeometry;
    cv.Children.Add(circlePath);

    return cv.Children.Count - 1;
}

关键调整说明：

命名空间：确保引入Microsoft.Maui.Controls（包含Grid、Path）和Microsoft.Maui.Shapes（包含EllipseGeometry）。
透明画刷：MAUI内置了Brushes.Transparent，无需自行定义transparentBrush变量。
参数类型：将坐标和半径的int改为double，适配MAUI的浮点布局系统，避免精度问题。

方法二：使用Ellipse控件（更简洁的实现）

如果不需要用Path的复杂路径能力，直接用MAUI的Ellipse控件会更直观：

using Microsoft.Maui.Controls;

public int DrawCircle(Brush colour, int strokeThickness, double x, double y, double radiusX, double radiusY, Grid cv)
{
    var circle = new Ellipse
    {
        Stroke = colour,
        Fill = Brushes.Transparent,
        StrokeThickness = strokeThickness,
        WidthRequest = radiusX * 2,
        HeightRequest = radiusY * 2
    };

    // 定位圆心：Ellipse的左上角是布局起点，所以需要用圆心坐标减去半径
    Grid.SetLeft(circle, x - radiusX);
    Grid.SetTop(circle, y - radiusY);

    cv.Children.Add(circle);

    return cv.Children.Count - 1;
}