.net MAUI：如何绘制 canvas

Question

我对 c# 和 maui 还很陌生。我想了解如何利用 canvas。我阅读了文档并在网上找到了一些东西。我想画简单的线。

我所做的是在 MauiProgram.cs

中创建 class

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" />
....

Answer 1

目前，对于预览版 MAUI 应用程序，您使用 GraphicsView 控件进行绘图，就像在 Canvas 控件上一样。

参见GraphicsView MAUI docs。

一个例子：

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

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);
    }
}

在 ContentPage 中的 ContentPage.Resources 部分添加对可绘制对象 class 的引用。然后将 GraphicsView 控件添加到页面布局，并使用 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>

.net MAUI：如何绘制 canvas

.net MAUI: how to draw on canvas

c#

xamarin

.net-6.0

maui