GraphicsView

Обзор примера

Пользовательский интерфейс многоплатформенного приложения .NET (.NET MAUI) GraphicsView — это графический холст, на котором можно нарисовать 2D-графику с помощью типов из Microsoft.Maui.Graphics пространства имен. Дополнительные сведения см. в Microsoft.Maui.Graphicsразделе " Графика".

GraphicsViewDrawable определяет свойство типа, IDrawableуказывающее содержимое, которое будет нарисовано. Это свойство поддерживается , BindablePropertyчто означает, что это может быть целевой объект привязки данных и стиль.

GraphicsView определяет следующие события:

• StartHoverInteraction, с TouchEventArgs, который вызывается, когда указатель входит в область теста попадания GraphicsView.
• MoveHoverInteraction, с TouchEventArgs, который вызывается при перемещении указателя, пока указатель остается в области теста попадания GraphicsView.
• EndHoverInteraction, который возникает, когда указатель покидает область теста попадания GraphicsView.
• StartInteraction, с TouchEventArgs, который вызывается при GraphicsView нажатии.
• DragInteraction, при TouchEventArgsэтом возникает GraphicsView при перетаскивании.
• EndInteraction, при TouchEventArgsэтом возникает при освобождении прессы, которая вызвала StartInteraction событие.
• CancelInteraction, который возникает, когда пресса сделала контакт с 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>

Размещение и размер графических объектов

Расположение и размер ICanvas страницы можно определить путем изучения свойств аргумента RectF в методе Draw .

Структуру RectF определяются следующие свойства:

• Bottomfloatтип, представляющий координату y нижнего края холста.
• CenterPointFтип , который задает координаты центра холста.
• Heightfloatтип , который определяет высоту холста.
• IsEmptyboolтип , который указывает, имеет ли холст нулевой размер и расположение.
• Leftfloatтип, представляющий координату x левого края холста.
• LocationPointFтип , который определяет координаты верхнего левого угла холста.
• Rightfloatтип, представляющий координату x правого края холста.
• SizeSizeFтип , который определяет ширину и высоту холста.
• Topfloatтип, представляющий координату y верхнего края холста.
• Widthfloatтип , который определяет ширину холста.
• Xтипа float, который определяет координату x левого верхнего угла холста.
• Yfloatтипа, который определяет координату y верхнего левого угла холста.

Эти свойства можно использовать для размещения и размера графических объектов на объекте ICanvas. Например, графические объекты можно поместить в центр с Canvas помощью Center.X и Center.Y значений в качестве аргументов в метод рисования. Сведения о рисовании на рисунке ICanvasсм. в разделе "Рисование графических объектов".

Недопустимое значение холста

GraphicsViewInvalidate имеет метод, который сообщает холсту, что он должен перераскрыть сам. Этот метод должен вызываться в экземпляре GraphicsView :

graphicsView.Invalidate();

.NET MAUI автоматически недействителен GraphicsView при необходимости в пользовательском интерфейсе. Например, когда элемент впервые отображается, вступает в представление или отображается путем перемещения элемента с его верхней части, он перезавернут. Единственный раз, когда вам нужно Invalidate вызвать, когда вы хотите принудительно GraphicsView перераскрыть сам объект, например, если вы изменили его содержимое, пока оно по-прежнему видно.