Контроль за рендерингом SVG графики? - PullRequest
Новая
       4

Контроль за рендерингом SVG графики?

5 голосов
/ 23 мая 2011

Мне нужен элемент управления для визуализации графики SVG. Данные поступают в виде объекта StreamReader. Какой самый простой способ сделать такое изображение?

В настоящее время я использую PNG:

image

But I'd like something higher resolution. SVGs would be perfect for this.

Sample SVG:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<! - Создано в Graphviz версии 2.28.0 (20110507.0327)
 ->
<! - Название: G Страницы: 1 ->


 G 

<! - a ->
 a 



 a 

<! - b ->
 b 

 b 

<! - a-> b ->
 a- & gt; b 



<! - c ->
 c 

 привет, мир 

<! - b-> c ->
 b-> c 



<! - d ->
 d 

 d 

<! - b- & gt; d ->
 b-> d 



<! - e ->
 e 

 e

1 Ответ

3 голосов
/ 27 декабря 2017

Когда я рассмотрел использование SVG в своих приложениях WPF, я обнаружил, что есть пара пакетов, которые можно добавить для обеспечения этой функциональности, но в конце концов я использовал SVG, которые я конвертировал в XAML, что позволитмасштабировать в приложениях WPF таким же образом, как SVG-изображение может масштабироваться в браузерах и т.п.Если у вас есть доступ к коду SVG (который выглядит так, как у вас), то это может быть хорошим решением для вас.

Вот шаги, которые я использую для достижения этой цели:

Преобразование SVG в XAML Я предпочитаю использовать Inkscape для следующих шагов:

  1. Открыть SVG в редакторе изображений (например, Inkscape).Редактор должен поддерживать открытие SVG и сохранение SVG в виде файла XAML.
  2. В редакторе сохраните файл как XAML.Файл должен быть сохранен как совместимый с Silverlight, если есть возможность выбора.Закройте редактор изображений.
  3. Если необходимо изменить цвет, откройте файл в текстовом редакторе (например, Notepad ++, Visual Studio) и найдите любые пути со значением цвета (ищите что-то вроде «fill =« #000000 ”') и измените его на желаемое значение шестнадцатеричного цвета.Сохраните файл и закройте текстовый редактор, когда закончите.

Использование изображения XAML в проекте WPF

  1. Щелкните правой кнопкой мыши папку ресурсов на изображениидолжен храниться в (например, \ Resources \ Images), выберите опцию для добавления существующего файла.Убедитесь, что тип выбора файлов включает файлы XAML.Перейдите к используемому файлу и добавьте его.
  2. Откройте панель свойств в Visual Studio (щелкните файл правой кнопкой мыши и выберите параметр «Свойства»).В разделе «Дополнительно» на панели «Свойства» установите для параметра «Действие построения» значение «Ресурс», а для параметра «Копировать в выходной каталог» - «Не копировать».

Изображение теперь можно использовать, установивисточник элемента для отображения изображения (например, фрейма) по пути к ресурсу (например, «/resources/images/.xaml»).Это может быть установлено либо напрямую, либо через привязку.

Пример кода WPF / XAML для отображения изображения XAML В следующем коде показан пример того, как отображать изображение XAML, добавленное с помощью описанных выше шагов.Этот код масштабирует изображение, чтобы заполнить контейнер, к которому оно добавлено.Источник изображения предоставляется через привязку, используемую для источника элемента Frame.Это может быть заменено строкой пути изображения (что указывается в значении привязки). 

<Viewbox Stretch="Uniform"
         Margin="4,4"
         VerticalAlignment="Center">
             <Frame Source="{Binding ImageSource}" 
                    NavigationUIVisibility="Hidden"/>
</Viewbox>

Пример строки пути: 

/resources/images/<file-name>.xaml

Если изображение находится в DLL и используется в той же DLL, строка пути должна включать дополнительную информацию в следующем формате: 

/<AssemblyName>;component/resources/images/<file-name>.xaml
...