Язык программирования C#9 и платформа .NET5

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

По всей видимости, вы согласитесь с тем, что художнику будет довольно трудно создавать сложное векторное изображение с использованием инструментов и приемов, предоставляемых средой 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. Откройте его в текстовом редакторе и скопируйте в буфер все данные кроме открывающего и закрывающего дескрипторов FixedPage. Данные путей затем можно поместить внутрь элемента Canvas главного окна в Kaxaml. В итоге изображение будет показано в окне XAML.

На заметку! В последней версии Inkscape есть возможность сохранить файл в формате Microsoft XAML. К сожалению, на момент написания главы он не был совместим с WPF.

Импортирование графических данных в проект WPF

Создайте новый проект приложения WPF по имени InteractiveLaserSign. Измените значения свойств Height и Width элемента Window соответственно на 600 и 650 и замените элемент Grid элементом Canvas:

 <Window x:Class="InteractiveLaserSign.MainWindow"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  xmlns:local="clr-namespace:InteractiveLaserSign"
  mc:Ignorable="d"
  Title="MainWindow" Height="600" Width="650">
  <Canvas>
  </Canvas>
 </Window>

Скопируйте полную разметку XAML из файла 1.fpage (исключая внешний дескриптор FixedPage) и вставьте ее в элемент управления Canvas внутри MainWindow. Просмотрев окно в режиме проектирования, легко удостовериться в том, что знак опасности лазерного излучения успешно воспроизводится в приложении.

Заглянув в окно Document Outline, вы заметите, что каждая часть изображения представлена как XAML-элемент Path. Если изменить размеры элемента Window, то качество изображения останется тем же самым безотносительно к тому, насколько большим сделано окно. Причина в том, что изображения, представленные с помощью элементов Path, визуализируются с применением механизма рисования и математики, а не за счет манипулирования пикселями.

Взаимодействие с изображением

Вспомните, что маршрутизируемое событие распространяется туннельным и пузырьковым образом, поэтому щелчок на любом элементе Path внутри Canvas может быть обработан обработчиком событий щелчка на Canvas. Модифицируйте разметку Canvas следующим образом:

 <Canvas MouseLeftButtonDown="Canvas_MouseLeftButtonDown">

Добавьте обработчик событий с таким кодом:

 private void Canvas_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
 {
  if (e.OriginalSource is Path p)
  {
  p.Fill = new SolidColorBrush(Colors.Red);
  }
 }

Запустите приложение и щелкните на линиях, чтобы увидеть эффекты.

Теперь вы понимаете процесс генерации данных путей для сложной графики и знаете, как взаимодействовать с графическими данными в коде. Вы наверняка согласитесь, что наличие у профессиональных художников возможности генерировать сложные графические данные и экспортировать их в виде разметки XAML исключительно важна. После того как графические данные сохранены в файле XAML, разработчики могут импортировать разметку иписать код для взаимодействия с объектной моделью.

Визуализация графических данных с использованием визуального уровня

Последний вариант визуализации графических данных с помощью WPF называется визуальным уровнем. Ранее уже упоминалось, что доступ к нему возможен только из кода (он не дружественен по отношению к разметке XAML). Несмотря на то что подавляющее большинство приложений WPF будут хорошо работать с применением фигур, рисунков и геометрических объектов, визуальный уровень обеспечивает самый быстрый способ визуализации крупных объемов графических данных. Визуальный уровень также может быть полезен, когда необходимо визуализировать единственное изображение в крупной области. Например, если требуется заполнить фон окна простым статическим изображением, тогда визуальный уровень будет наиболее быстрым способом решения такой задачи. Кроме того, он удобен, когда нужно очень быстро менять фон окна в зависимости от ввода пользователя или чего-нибудь еще.