GraphicsView

项目
05/14/2024

.NET Multi-platform App UI (.NET MAUI) GraphicsView 是一个图形画布，可以使用 Microsoft.Maui.Graphics 命名空间中的类型在其上绘制 2D 图形。有关 Microsoft.Maui.Graphics 的详细信息，请参阅图形。

GraphicsView 定义类型为 IDrawable 的 Drawable 属性，用于指定要绘制的内容。此属性由 BindableProperty 提供支持，这意味着可以将它作为数据绑定的目标，也可以对其进行样式设置。

GraphicsView 定义以下事件：

StartHoverInteraction，附带 TouchEventArgs，当指针进入 GraphicsView 的点击测试区域时引发。
MoveHoverInteraction，附带 TouchEventArgs，当指针停留在 GraphicsView 的点击测试区域内并移动时引发。
EndHoverInteraction，当指针离开 GraphicsView 的点击测试区域时引发。
StartInteraction，附带 TouchEventArgs，按下 GraphicsView 时引发。
DragInteraction，附带 TouchEventArgs，拖动 GraphicsView 时引发。
EndInteraction，附带 TouchEventArgs，松开引发 StartInteraction 事件的按键时引发。
CancelInteraction，从与 GraphicsView 接触的按键上松开时引发。

创建 GraphicsView

GraphicsView 必须定义一个 IDrawable 对象，指定要在控件上绘制的内容。可以通过创建派生自 IDrawable 的对象并实现其 Draw 方法来达到此目的：

namespace MyMauiApp
{
    public class GraphicsDrawable : IDrawable
    {
        public void Draw(ICanvas canvas, RectF dirtyRect)
        {
            // Drawing code goes here
        }      
    }
}

Draw 方法包含 ICanvas 和 RectF 参数。 ICanvas 参数是在其上绘制图形对象的画布。 RectF 参数是 struct，其中包含有关画布大小和位置的数据。有关在 ICanvas 上进行绘制的更多信息，请参阅绘制图形对象。

在 XAML 中，可以将 IDrawable 对象声明为资源，然后由 GraphicsView 使用，方法是将其键指定为 Drawable 属性的值：

<ContentPage xmlns=http://schemas.microsoft.com/dotnet/2021/maui
             xmlns:x=http://schemas.microsoft.com/winfx/2009/xaml
             xmlns:drawable="clr-namespace:MyMauiApp"
             x:Class="MyMauiApp.MainPage">
    <ContentPage.Resources>
        <drawable:GraphicsDrawable x:Key="drawable" />
    </ContentPage.Resources>
    <VerticalStackLayout>
        <GraphicsView Drawable="{StaticResource drawable}"
                      HeightRequest="300"
                      WidthRequest="400" />
    </VerticalStackLayout>
</ContentPage>

定位和调整图形对象的大小

通过检查 Draw 方法中 RectF 参数的属性，可以确定 ICanvas 在页面上的位置和大小。

RectF 结构定义以下属性：

Bottom，类型为 float，表示画布下边缘的 Y 坐标。
Center，类型为 PointF，指定画布中心坐标。
Height，类型为 float，用于定义画布的高度。
IsEmpty，类型为 bool，指示画布的大小和位置是否为零。
Left，类型为 float，表示画布左边缘的 x 坐标。
Location，类型为 PointF，用于定义画布左上角的坐标。
Right，类型为 float，表示画布右边缘的 x 坐标。
Size，类型为 SizeF，用于定义画布的宽度和高度。
Top，类型为 float，表示画布上边缘的 y 坐标。
Width，类型为 float，用于定义画布的宽度。
X，类型为 float，用于定义画布左上角的 x 坐标。
Y，类型为 float，用于定义画布左上角的 y 坐标。

这些属性可用于在 ICanvas 上定位和调整图形对象的大小。例如，通过使用 Center.X 和 Center.Y 值作为绘图方法的参数，可以将图形对象放置在 Canvas 的中心。有关在 ICanvas 上绘制的信息，请参阅绘制图形对象。

使画布失效

GraphicsView 包含一种 Invalidate 方法，用于通知画布需要重新绘制其自身。此方法必须在 GraphicsView 实例上调用：

graphicsView.Invalidate();

.NET MAUI 会根据 UI 的需要自动使 GraphicsView 失效。例如，当元素首次显示、进入视图或通过移动其上方的元素而显示出来时，就会重新绘制该元素。唯一需要调用 Invalidate 的情况是需要强制 GraphicsView 重新绘制其自身时，例如在其仍然可见时更改了它的内容。

通过

GraphicsView

创建 GraphicsView

定位和调整图形对象的大小

使画布失效

反馈

其他资源