.net MAUI：如何在画布上绘制

Question

我对c#和maui还很陌生。

我想了解如何在画布上绘制图形。我查阅了文档并在网上找到了一些资料。我想要画一条简单的线。

我的做法是在MauiProgram.cs文件中创建一个类。

namespace TestMauiX;
using Microsoft.Maui.Graphics;

public static class MauiProgram
{
    public static MauiApp CreateMauiApp()
    {
        var builder = MauiApp.CreateBuilder();
        builder
            .UseMauiApp<App>()
            .ConfigureFonts(fonts =>
            {
                fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
            });

        return builder.Build();
    }
}

public class MyFirstDrawing : IDrawable
{
    public void Draw(ICanvas canvas, RectangleF dirtyRect)
    {
        canvas.StrokeColor = Colors.Red;
        canvas.StrokeSize = 6;
        canvas.DrawLine(10, 10, 90, 100);
    }
}

然后我有一个MainPage.xaml，但是我应该如何将那个图形放进去呢？

    <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
                 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                 x:Class="TestMauiX.MainPage"
                 BackgroundColor="{DynamicResource SecondaryColor}">
    
        <ScrollView>
            <Grid RowSpacing="25" RowDefinitions="Auto,Auto,Auto,Auto,*"
                  Padding="{OnPlatform iOS='30,60,30,30', Default='30'}">
    
                <Label 
                    Text="Hello, World!"
                    Grid.Row="0"
                    SemanticProperties.HeadingLevel="Level1"
                    FontSize="32"
                    HorizontalOptions="Center" />
....

- JGeorgeJ

Answer 1

目前，在预览 MAUI 应用中，您可以使用 GraphicsView 控件进行绘制，就像在 Canvas 控件上一样。

请参阅 GraphicsView MAUI 文档。

示例：

1. 创建您的可绘制对象...

using Microsoft.Maui.Graphics;

public class MyFirstDrawing : IDrawable
{
    public void Draw(ICanvas canvas, RectangleF dirtyRect)
    {
        canvas.StrokeColor = Colors.Red;
        canvas.StrokeSize = 6;
        canvas.DrawLine(10, 10, 90, 100);
    }
}

2. 在您的ContentPage中，在ContentPage.Resources部分添加对drawable类的引用。 然后在页面布局中添加一个GraphicsView控件，并将Drawable属性设置为ContentPage.Resources部分中为您的drawable设置的Key值，使用StaticResource标记扩展。

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:drawable="clr-namespace:YOUR_APP_NAMESPACE"
             ...>
    
    <ContentPage.Resources>
        <drawable:MyFirstDrawing x:Key="MyDrawable" />
    </ContentPage.Resources>

    <ScrollView>
        <Grid RowSpacing="20" 
              RowDefinitions="Auto,*"
              Padding="{OnPlatform iOS='30,60,30,30', Default='30'}">

            <Label 
                Text="Hello, World!"          
                SemanticProperties.HeadingLevel="Level1"
                FontSize="32"
                HorizontalOptions="Center" 
                Grid.Row="0"/>

            <GraphicsView 
                x:Name="Canvas"                 
                HorizontalOptions="Fill"
                Drawable="{StaticResource MyDrawable}" 
                HeightRequest="100"           
                Grid.Row="1"/>
          </Grid>
     </ScrollView>
</ContentPage>

- Pixel Editor