如何在.NET Maui中通过手指触摸在画布上绘图？

核心实现思路 #

• 使用.NET Maui官方推荐的GraphicsView控件，它原生支持触摸交互，是实现绘图功能的最佳载体
• 监听触摸的三个关键动作：按下（开始记录轨迹）、移动（持续添加轨迹点）、抬起（结束当前轨迹并保存）
• 通过维护点集合记录手指移动路径，在IDrawable的Draw方法中连接这些点，实现连续线条绘制

关键代码示例 #

1. XAML布局（添加GraphicsView） #

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:DrawApp"
             x:Class="DrawApp.MainPage">
    <GraphicsView x:Name="DrawView" BackgroundColor="White">
        <GraphicsView.Drawable>
            <local:DrawCanvas/>
        </GraphicsView.Drawable>
    </GraphicsView>
</ContentPage>

2. 自定义Drawable类（负责绘图逻辑） #

using Microsoft.Maui.Graphics;

namespace DrawApp;

public class DrawCanvas : IDrawable
{
    // 当前正在绘制的轨迹点集合
    public List<PointF> ActivePath { get; } = new();
    // 所有已完成的轨迹集合
    public List<List<PointF>> SavedPaths { get; } = new();

    public void Draw(ICanvas canvas, RectF dirtyRect)
    {
        // 设置画笔样式
        canvas.StrokeColor = Colors.Black;
        canvas.StrokeSize = 3;
        canvas.StrokeLineCap = LineCap.Round;
        canvas.StrokeLineJoin = LineJoin.Round;

        // 绘制所有已保存的轨迹
        foreach (var path in SavedPaths)
        {
            if (path.Count > 1)
                canvas.DrawPath(path);
        }

        // 绘制当前正在绘制的轨迹
        if (ActivePath.Count > 1)
            canvas.DrawPath(ActivePath);
    }
}

3. 页面后台代码（处理触摸事件） #

namespace DrawApp;

public partial class MainPage : ContentPage
{
    private readonly DrawCanvas _drawCanvas;

    public MainPage()
    {
        InitializeComponent();
        _drawCanvas = (DrawCanvas)DrawView.Drawable;
        // 绑定触摸交互事件
        DrawView.TouchInteraction += HandleTouchInteraction;
    }

    private void HandleTouchInteraction(object sender, TouchInteractionEventArgs e)
    {
        foreach (var touchPoint in e.TouchPoints)
        {
            switch (touchPoint.ActionType)
            {
                case TouchActionType.Pressed:
                    // 开始新的轨迹，清空当前活跃点集合
                    _drawCanvas.ActivePath.Clear();
                    _drawCanvas.ActivePath.Add(touchPoint.Position);
                    break;
                case TouchActionType.Moved:
                    // 添加移动轨迹点，并触发重绘
                    _drawCanvas.ActivePath.Add(touchPoint.Position);
                    DrawView.Invalidate();
                    break;
                case TouchActionType.Released:
                    // 保存当前轨迹，清空活跃点集合
                    _drawCanvas.SavedPaths.Add(new List<PointF>(_drawCanvas.ActivePath));
                    _drawCanvas.ActivePath.Clear();
                    DrawView.Invalidate();
                    break;
            }
        }
    }
}

推荐查阅的官方内容 #

• .NET Maui官方文档中GraphicsView相关章节：重点掌握IDrawable接口的绘图逻辑、GraphicsView的触摸交互方式
• .NET Maui官方文档中触摸事件处理部分：了解TouchActionType的不同状态，以及多点触摸的处理逻辑
• .NET Maui官方示例库中的绘图类示例：可以参考扩展功能（如调整线条颜色/粗细、撤销操作等）的实现方式

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