Поделиться через

Графика

  • Статья

Browse sample. Обзор примера

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

Существует множество сходств между функциональными возможностями, предоставляемыми Microsoft.Maui.Graphicsи функциональными возможностями, предоставляемыми фигурами и кистью .NET MAUI. Однако каждая из них направлена на различные сценарии:

  • Microsoft.Maui.Graphics функциональность должна использоваться на холсте рисования, позволяет выполнять рисование графики и обеспечивает удобный подход к написанию графических элементов управления. Например, элемент управления, который реплика tes профиль вклада GitHub, можно легко реализовать с помощью Microsoft.Maui.Graphics фигур .NET MAUI.
  • Фигуры .NET MAUI можно использовать непосредственно на странице, а кисти можно использовать всеми элементами управления. Эта функция предоставляется для создания привлекательного пользовательского интерфейса.

Дополнительные сведения о фигурах .NET MAUI см. в разделе "Фигуры".

Рисование графики

В .NET MAUI GraphicsView позволяет использовать функциональные Microsoft.Maui.Graphics возможности. GraphicsView определяет Drawable свойство типа, 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 то, что содержит данные о размере и расположении холста рисования.

В 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>

Дополнительные сведения о графическом представлении GraphicsViewсм. в разделе "Графика".

Холст рисования

Элемент GraphicsView управления предоставляет доступ к ICanvas объекту через его IDrawable объект, для которого можно задать свойства и методы, вызываемые для рисования графических объектов. Сведения о рисовании на рисунке ICanvasсм. в разделе "Рисование графических объектов".

ICanvas определяет следующие свойства, влияющие на внешний вид объектов, нарисованных на холсте:

  • AlphafloatТип , указывает непрозрачность объекта.
  • AntialiasboolТип , указывает, включена ли защита от псевдонима.
  • BlendModeBlendModeТип , определяет режим смешения, который определяет, что происходит при отрисовке объекта на вершине существующего объекта.
  • DisplayScalefloatТип , представляет коэффициент масштабирования для масштабирования пользовательского интерфейса на холсте.
  • FillColor, типа Color, указывает цвет, используемый для рисования интерьера объекта.
  • FontIFontТип , определяет шрифт при рисовании текста.
  • FontColorТип , указывает цвет шрифта Colorпри рисовании текста.
  • FontSizefloatТип , определяет размер шрифта при рисовании текста.
  • MiterLimitfloatТип , указывает ограничение длины мизера соединения линий в объекте.
  • StrokeColorColorТип , указывает цвет, используемый для рисования контура объекта.
  • StrokeDashOffsetfloatТип , указывает расстояние в шаблоне тире, где начинается тире.
  • StrokeDashPatternfloat[]Тип , указывает шаблон дефисов и пробелов, используемых для контура объекта.
  • StrokeLineCapLineCapТип , описывает фигуру в начале и конце строки.
  • StrokeLineJoin, тип LineJoin, указывает тип соединения, который используется в вершинах фигуры.
  • StrokeSizefloatТип , указывает ширину контура объекта.

По умолчанию значение ICanvas StrokeSize 1, черное, StrokeColor StrokeLineJoin в LineJoin.Miterи StrokeLineCap в LineJoin.Cap.

Состояние холста рисования

Холст рисования на каждой платформе имеет возможность поддерживать свое состояние. Это позволяет сохранить текущее графическое состояние и восстановить его при необходимости.

Однако не все элементы холста являются элементами графического состояния. Графическое состояние не включает объекты рисования, такие как пути и объекты рисования, такие как градиенты. Типичные элементы графического состояния на каждой платформе включают в себя данные росчерка и заливки, а также данные шрифта.

Графическое состояние каждого ICanvas из них можно управлять следующими методами:

  • SaveState, который сохраняет текущее состояние графики.
  • RestoreState, который задает состояние графики в последнее сохраненное состояние.
  • ResetState, который сбрасывает состояние графики до значений по умолчанию.

Примечание.

Состояние, сохраняемое этими методами, зависит от платформы.