如何将变量数据传入.NET MAUI GraphicsView画布？

1. 修改GraphicsDrawable类，添加数据接收属性 #

给GraphicsDrawable类添加公共集合属性用于存储线条数据，在Draw方法中遍历集合绘制所有线条：

internal class GraphicsDrawable : IDrawable
{
    // 存储线条数据，每个元素包含线条的起点和终点Vector2
    public List<(Vector2 Start, Vector2 End)> Lines { get; set; } = new();

    public void Draw(ICanvas canvas, RectF dirtyRect)
    {
        canvas.StrokeColor = Colors.Red;
        canvas.StrokeSize = 6;

        // 遍历线条数据并绘制
        foreach (var line in Lines)
        {
            canvas.DrawLine(line.Start.X, line.Start.Y, line.End.X, line.End.Y);
        }
    }
}

2. 在MainPage中直接管理Drawable实例 #

放弃XAML静态资源声明的方式，在代码后台创建Drawable实例，直接控制数据传递和画布刷新：

MainPage.xaml修改： #

<GraphicsView x:Name="MyGraphicsView"
              HeightRequest="300"
              WidthRequest="400" />

MainPage.xaml.cs修改： #

public partial class MainPage : ContentPage
{
    private GraphicsDrawable _drawable;
    // 存储你的Vector2线条数据
    private Vector2[] _lineData = new[]
    {
        new Vector2(10, 10),
        new Vector2(90, 100),
        new Vector2(100, 50),
        new Vector2(200, 150)
    };

    public MainPage()
    {
        InitializeComponent();
        // 初始化Drawable并绑定到GraphicsView
        _drawable = new GraphicsDrawable();
        MyGraphicsView.Drawable = _drawable;
        
        // 加载初始数据
        UpdateCanvas();
    }

    // 更新Drawable数据并刷新画布
    private void UpdateCanvas()
    {
        _drawable.Lines.Clear();
        // 将数组转换为线条集合（每两个Vector2为一条线）
        for (int i = 0; i < _lineData.Length; i += 2)
        {
            if (i + 1 < _lineData.Length)
            {
                _drawable.Lines.Add((_lineData[i], _lineData[i + 1]));
            }
        }
        // 触发画布重新绘制
        MyGraphicsView.Invalidate();
    }

    // 示例：实时更新数据的触发方法（比如按钮点击）
    private void RefreshCanvas_Clicked(object sender, EventArgs e)
    {
        // 修改线条数据
        _lineData = new[]
        {
            new Vector2(50, 50),
            new Vector2(250, 200),
            new Vector2(150, 100),
            new Vector2(300, 50)
        };
        // 更新并刷新画布
        UpdateCanvas();
    }
}

3. 实现实时更新逻辑 #

每当需要更新画布时，修改_lineData数组后调用UpdateCanvas()方法即可——该方法会同步Drawable的数据，并调用Invalidate()强制GraphicsView重新绘制。

可选：MVVM场景适配 #

如果采用MVVM架构，可让GraphicsDrawable实现INotifyPropertyChanged接口，监听数据变化：

internal class GraphicsDrawable : IDrawable, INotifyPropertyChanged
{
    private List<(Vector2 Start, Vector2 End)> _lines = new();
    public List<(Vector2 Start, Vector2 End)> Lines
    {
        get => _lines;
        set
        {
            _lines = value;
            OnPropertyChanged();
        }
    }

    public void Draw(ICanvas canvas, RectF dirtyRect)
    {
        canvas.StrokeColor = Colors.Red;
        canvas.StrokeSize = 6;
        foreach (var line in Lines)
        {
            canvas.DrawLine(line.Start.X, line.Start.Y, line.End.X, line.End.Y);
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;
    protected void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

在ViewModel中更新Lines集合后，调用GraphicsView的Invalidate()即可完成刷新。

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