.NET MAUI运行时如何向GraphicsView的Canvas添加自定义图形？

要实现点击右键菜单添加自定义矩形的功能，核心是让IDrawable实例能够存储多个图形元素，并在添加后触发GraphicsView重绘。以下是具体实现步骤：

1. 改造GraphicsDrawable类，支持多图形存储与绘制 #

先给GraphicsDrawable添加集合保存所有自定义矩形，同时修改Draw方法遍历绘制这些矩形。可以定义一个带样式的自定义矩形类，方便后续扩展属性：

// 自定义矩形类，包含位置、大小和样式属性
public class SpecialRectangle
{
    public RectF Bounds { get; set; }
    public Color StrokeColor { get; set; } = Colors.Blue;
    public float StrokeSize { get; set; } = 2;
    public Color FillColor { get; set; } = Colors.LightBlue.WithAlpha(0.5f);
}

public class GraphicsDrawable : IDrawable
{
    // 存储所有自定义矩形的集合
    public List<SpecialRectangle> Rectangles { get; } = new List<SpecialRectangle>();

    public void Draw(ICanvas canvas, RectF dirtyRect)
    {
        // 保留原有绘制内容（示例中的红线）
        canvas.StrokeColor = Colors.Red;
        canvas.StrokeSize = 6;
        canvas.DrawLine(10, 10, 90, 100);

        // 遍历绘制所有添加的矩形
        foreach (var rect in Rectangles)
        {
            canvas.StrokeColor = rect.StrokeColor;
            canvas.StrokeSize = rect.StrokeSize;
            canvas.FillColor = rect.FillColor;
            
            canvas.FillRectangle(rect.Bounds); // 填充矩形内部
            canvas.DrawRectangle(rect.Bounds); // 绘制矩形边框
        }
    }
}

2. 在页面代码中实现添加矩形与重绘逻辑 #

修改页面后台代码，获取GraphicsDrawable实例，在右键菜单点击时添加矩形，并触发GraphicsView重绘：

public partial class Modeler : ContentPage
{
    private GraphicsDrawable _drawable;

    public Modeler()
    {
        InitializeComponent();
        // 从页面资源中获取Drawable实例
        _drawable = (GraphicsDrawable)Resources["drawable"];
    }

    private void AddRectangle(object sender, EventArgs e)
    {
        // 创建一个自定义矩形（这里设置默认位置和大小，可按需调整）
        var newRect = new SpecialRectangle
        {
            Bounds = new RectF(100, 100, 150, 100) // X坐标、Y坐标、宽度、高度
        };

        // 将矩形添加到Drawable的集合中
        _drawable.Rectangles.Add(newRect);

        // 通知GraphicsView重新绘制内容
        modelerArea.Invalidate();
    }
}

3. 可选：让矩形出现在右键点击位置 #

如果希望矩形直接出现在右键点击的位置，可以通过MenuFlyout的Opening事件记录点击坐标：

修改XAML，添加Opening事件 #

<GraphicsView x:Name="modelerArea" Drawable="{StaticResource drawable}">
    <FlyoutBase.ContextFlyout>
        <MenuFlyout Opening="MenuFlyout_Opening">
            <MenuFlyoutItem Text="Add rectangle" Clicked="AddRectangle" />
        </MenuFlyout>
    </FlyoutBase.ContextFlyout>
</GraphicsView>

修改后台代码，记录并使用点击位置 #

private Point _lastClickPosition;

private void MenuFlyout_Opening(object sender, EventArgs e)
{
    // 记录右键点击的位置（相对于GraphicsView）
    if (sender is MenuFlyout flyout)
    {
        _lastClickPosition = flyout.Position;
    }
}

private void AddRectangle(object sender, EventArgs e)
{
    // 使用右键点击位置作为矩形左上角
    var newRect = new SpecialRectangle
    {
        Bounds = new RectF((float)_lastClickPosition.X, (float)_lastClickPosition.Y, 150, 100)
    };

    _drawable.Rectangles.Add(newRect);
    modelerArea.Invalidate();
}

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