Язык программирования C#9 и платформа .NET5 - Эндрю Троелсен

чем с простыми фигурами, отделение графической композиции от графической визуализации делает типы, производные от Drawing, гораздо более легковесными, чем производные от Shape типы, одновременно сохраняя их ключевые службы.

Построение кисти DrawingBrush с использованием геометрических объектов

Ранее в главе элемент Path заполнялся группой геометрических объектов примерно так:

<Path Fill = "Orange" Stroke = "Blue" StrokeThickness = "3">

  <Path.Data>

    <GeometryGroup>

      <EllipseGeometry Center = "75,70" RadiusX = "30" RadiusY = "30" />

   <RectangleGeometry Rect = "25,55 100 30" />

    <LineGeometry StartPoint="0,0" EndPoint="70,30" />

    <LineGeometry StartPoint="70,30" EndPoint="0,30" />

  </GeometryGroup>

  </Path.Data>

</Path>

Поступая подобным образом, вы достигаете интерактивности Path при чрезвычайной легковесности, присущей геометрическим объектам. Однако если необходимо визуализировать аналогичный вывод и отсутствует потребность в любой (готовой) интерактивности, тогда тот же самый элемент <GeometryGroup> можно поместить внутрь DrawingBrush:

<DrawingBrush>

  <DrawingBrush.Drawing>

    <GeometryDrawing>

      <GeometryDrawing.Geometry>

        <GeometryGroup>

          <EllipseGeometry Center = "75,70" RadiusX = "30" RadiusY = "30" />

          <RectangleGeometry Rect = "25,55 100 30" />

          <LineGeometry StartPoint="0,0" EndPoint="70,30" />

          <LineGeometry StartPoint="70,30" EndPoint="0,30" />

        </GeometryGroup>

      </GeometryDrawing.Geometry>

      <!-- Специальное перо для рисования границ -->

      <GeometryDrawing.Pen>

        <Pen Brush="Blue" Thickness="3"/>

      </GeometryDrawing.Pen>

      <!-- Специальная кисть для заполнения внутренней области -->

      <GeometryDrawing.Brush>

        <SolidColorBrush Color="Orange"/>

      </GeometryDrawing.Brush>

    </GeometryDrawing>

  </DrawingBrush.Drawing>

</DrawingBrush>

При помещении группы геометрических объектов внутрь DrawingBrush также понадобится установить объект Pen, применяемый для рисования границ, потому что свойство Stroke больше не наследуется от базового класса Shape. Здесь был создан элемент Pen с теми же настройками, которые использовались в значениях Stroke и StrokeThickness из предыдущего примера Path.

Кроме того, поскольку свойство Fill больше не наследуется от класса Shape, нужно также применять синтаксис "элемент-свойство" для определения объекта кисти, предназначенного элементу DrawingGeometry, со сплошным оранжевым цветом, как в предыдущих настройках Path.

Рисование с помощью DrawingBrush

Теперь объект DrawingBrush можно использовать для установки значения любого свойства, требующего объекта кисти. Например, после подготовки следующей разметки в редакторе Kaxaml с помощью синтаксиса "элемент-свойство" можно рисовать изображение по всей поверхности Page:

<Page

  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

  <Page.Background>

    <DrawingBrush>

      <!-- Тот же самый объект DrawingBrush, что и ранее -->

    </DrawingBrush>

  </Page.Background>

</Page>

Или же элемент DrawingBrush можно применять для установки другого совместимого с кистью свойства, такого как свойство Background элемента Button:

<Page

  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

  <Button Height="100" Width="100">

  <Button.Background>

    <DrawingBrush>

      <!-- Тот же самый объект DrawingBrush, что и ранее -->

    </DrawingBrush>

  </Button.Background>

  </Button>

</Page>

Независимо от того, какое совместимое с кистью свойство устанавливается с использованием специального объекта DrawingBrush, визуализация двумерного графического изображения в итоге получается с намного меньшими накладными расходами, чем в случае визуализации того же изображения посредством фигур.

Включение типов Drawing в DrawingImage

Тип DrawingImage позволяет подключать рисованный геометрический объект к элементу управления Image из WPF. Взгляните на следующую разметку:

<Image>

  <Image.Source>

    <DrawingImage>

      <DrawingImage.Drawing>

        <!--Same GeometryDrawing from above -->

      </DrawingImage.Drawing>

    </DrawingImage>

  </Image.Source>

</Image>

В данном случае элемент GeometryDrawing был помещен внутрь элемента DrawingImage, а не DrawingBrush. С применением элемента DrawingImage можно установить свойство Source элемента управления Image.

Работа с векторными изображениями

По всей видимости, вы согласитесь с тем, что художнику будет довольно трудно создавать сложное векторное изображение с использованием инструментов и приемов, предоставляемых средой Visual Studio. В распоряжении художников есть собственные наборы инструментов, которые позволяют производить замечательную векторную графику. Изобразительными возможностями подобного рода не обладает ни IDE-среда Visual Studio, ни сопровождающий ее инструмент Microsoft Blend. Перед тем, как векторные изображения можно будет импортировать в приложение WPF, они должны быть преобразованы в выражения путей. После этого можно программировать с применением сгенерированной объектной модели, используя Visual Studio.

На заметку! Используемое изображение (LaserSign.svg) и экспортированные данные путей (LaserSign.xaml) можно найти в подкаталоге Chapter_26 загружаемого кода примеров. Изображение взято из статьи Википедии по ссылке https://ru.wikipedia.org/wiki/Символы_опасности.

Преобразование файла с векторной графикой в файл XAML

Прежде чем можно будет импортировать сложные графические данные (такие как векторная графика) в приложение WPF, графику понадобится преобразовать в данные путей. Чтобы проиллюстрировать, как это делается, возьмите пример файла изображения .svg с упомянутым выше знаком опасности лазерного излучения. Затем загрузите и установите инструмент с открытым кодом под названием Inkscape (из веб-сайта www.inkscape.org). С помощью Inkscape откройте файл LaserSign.svg из подкаталога Chapter_26. Вы можете получить запрос о модернизации формата. Установите настройки, как показано на рис. 26.12.

Следующие шаги поначалу покажутся несколько странными, но на самом деле они представляют собой простой способ преобразования векторных изображений в разметку XAML. Когда изображение приобрело желаемый вид, необходимо выбрать пункт меню File► Print (Файл►Печать). В открывшемся окне нужно ввести имя файла и выбрать место, где он должен быть сохранен, после чего щелкнуть на кнопке Save (Сохранить). В результате получается файл *.xps (или *.oxps).

На заметку! В зависимости от нескольких переменных среды в конфигурации системы сгенерированный файл будет иметь либо расширение .xps, либо расширение .oxps. В любом случае дальнейший процесс идентичен.

Форматы *.xps и *.oxps в действительности представляют собой архивы ZIP. Переименовав расширение в .zip, файл можно открыть в проводнике файлов (либо в 7-Zip или в предпочитаемой утилите архивации). Файл содержит иерархию папок, приведенную на рис. 26.13.

Необходимый файл находится в папке Pages (Documents/1/Pages) и называется 1.fpage. Откройте его в текстовом редакторе и скопируйте в буфер все данные кроме открывающего и