Размытие по Гауссу – Фильтры SVG – Код C#

SVG-фильтры

Aspose.SVG for .NET позволяет открывать или создавать, редактировать документ SVG и вносить изменения в его содержимое. Вы можете изменить документ, в том числе применив множество доступных фильтров, чтобы получить желаемый результат. Пространство имен Aspose.Svg.Filters содержит классы и интерфейсы, связанные с эффектами фильтров в спецификации SVG. Класс SVGFEGaussianBlurElement соответствует элементу <feGaussianBlur> для реализации эффекта размытия по Гауссу.

В SVG фильтр определяется элементом <filter>, который устанавливается внутри элемента <defs>. Он никогда не отображается сам по себе и концептуально описывается как элемент, включающий в себя дочерние элементы – примитивы фильтра. Элемент <filter> имеет набор атрибутов. Обязательными атрибутами примитива фильтра являются x, y, width, height и id. Они задают область изображения, к которой будет применен фильтр. А атрибут id дает уникальный идентификатор элементу SVG и идентифицирует элемент в документе SVG.

В этой статье вы узнаете, как написать код SVG для создания фильтра размытия по Гауссу, и рассмотрите подробные примеры C# использования класса SVGFEGaussianBlurElement для применения эффекта размытия по Гауссу к SVG элементам и растровым изображениям.

Размытие по Гауссу – код SVG

Фильтр SVG размытия по Гауссу – это тип фильтра, который применяет эффект размытия к содержимому элемента SVG с использованием распределения по Гауссу. Это один из наиболее часто используемых фильтров в SVG для создания мягких, плавных и визуально привлекательных эффектов. Фильтр <feGaussianBlur> создает эффект мягкого размытия. Атрибут stdDeviation указывает число, которое характеризует стандартное отклонение для операции размытия. Если указаны два числа, первое число представляет собой значение стандартного отклонения по оси X системы координат, а второе – по оси Y. Для обработки каждого фильтра требуется исходное изображение. В противном случае фильтру нечего будет рендерить, и он не будет работать. Входные данные примитива фильтра указаны в атрибуте in. По умолчанию используется in="SourceGraphic".

Вот пример применения SVG-фильтра размытия по Гауссу с различными значениями атрибута stdDeviation к прямоугольному элементу SVG:

<svg height="150" width="750" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <filter id="f1" x="-20" y="-20" height="100" width="100">
            <feGaussianBlur in="SourceGraphic" stdDeviation="10" />
        </filter>
        <filter id="f2" x="-20" y="-20" height="100" width="100">
            <feGaussianBlur in="SourceGraphic" stdDeviation="10, 0" />
        </filter>
        <filter id="f3" x="-20" y="-20" height="100" width="100">
            <feGaussianBlur in="SourceGraphic" stdDeviation="0,10" />
        </filter>
		<filter id="f4" x="-20" y="-20" height="100" width="100">
            <feGaussianBlur in="SourceGraphic" stdDeviation="20" />
        </filter>
		<filter id="f5" x="-20" y="-20" height="100" width="100">
            <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
        </filter>
    </defs>
    <g fill="#ffa500">
        <rect x="40" y="40" width="60" height="60" />
        <rect x="40" y="40" width="60" height="60" transform="translate(120)" filter="url(#f1)" />
        <rect x="40" y="40" width="60" height="60" transform="translate(240)" filter="url(#f2)" />
        <rect x="40" y="40" width="60" height="60" transform="translate(360)" filter="url(#f3)" />
		<rect x="40" y="40" width="60" height="60" transform="translate(480)" filter="url(#f4)" />
		<rect x="40" y="40" width="60" height="60" transform="translate(600)" filter="url(#f5)" />
    </g>
</svg>

Как видите, значение stdDeviation управляет разбросом распределения Гаусса. Большее значение stdDeviation приводит к большему размытию, а меньшее значение создает более мягкий эффект.

Примечание. Размытие, добавленное вокруг фигуры, часто делает выходное изображение больше исходного. Нам нужно использовать отрицательные числа для x и y, чтобы избежать обрезки графики, добавленной фильтром. В приведенном выше примере мы используем x="-20" и y="-20".

Размытие по Гауссу – код C#

В предыдущем примере кода SVG мы подробно обсудили, как создать фильтр размытия по Гауссу, и теперь знаем, какие элементы и атрибуты использовать. Давайте создадим код C# для реализации такого фильтра, используя Aspose.SVG для .NET API.

Согласно синтаксису SVG, элемент <filter> должен располагаться в элементе <defs>, а примитив фильтра <feGaussianBlur> находится только внутри элемента <filter>. Поэтому для программирования SVG-фильтров необходимо правильно создавать и вкладывать необходимые элементы.

1. Если вы создаете документ SVG с нуля, используйте конструктор SVGDocument(), чтобы создать пустой документ SVG.
2. Свойство RootElement класса SVGDocument указывает на корневой элемент документа <svg>.
3. Создайте элемент <rect>, установите необходимые атрибуты и добавьте его к элементу <svg>.
   • Используйте метод CreateElementNS(namespaceURI, qualifiedName) класса SVGDocument, чтобы создать экземпляр SVGRectElement.
   • Одним из вариантов установки значений атрибута является использование метода SetAttribute(name, value). Другой способ – взять методы точечного доступа SVG DOM, используя свойства типа SVGAnimatedLength, статические данные для которых можно задать или прочитать через конструкцию: element.X.BaseVal.Value.
   • Используйте метод AppendChild(), чтобы добавить элемент <rect> к элементу <svg>.
4. Аналогичным образом создайте элемент <defs> и добавьте его к элементу <svg>.
5. Чтобы создать элемент <filter>, используйте тот же алгоритм: используйте метод CreateElementNS() для создания экземпляра SVGFilterElement. Не забудьте установить атрибуты x, y, height, width и id с помощью метода SetAttribute() и добавить <filter> к элементу <defs>.
6. Создайте элемент <feGaussianBlur> и установите атрибуты in и stdDeviation. Затем добавьте его в элемент <filter>.
   • Используйте метод CreateElementNS(), чтобы создать экземпляр класса SVGFEGaussianBlurElement.
   • Для установки атрибута In1 используется свойство типа SVGAnimatedLength, статические данные для которого можно задать или прочитать через конструкцию feGaussianBlurElement.In1.BaseVal="SourceGraphic".
   • Используйте свойства StdDeviationX и StdDeviationY класса SVGFEGaussianBlurElement, чтобы установить атрибут setDerivation.
   • Вызовите метод AppendChild(), чтобы добавить <feGaussianBlur> к элементу <filter>.
7. Вызовите метод Save(), чтобы сохранить документ в локальный файл.

using Aspose.Svg;
using System.IO;
using Aspose.Svg.Filters;
...

    // Set SVG Namespace Url
    string SvgNamespace = "http://www.w3.org/2000/svg";

    using (var document = new SVGDocument())
    {
        var svgElement = document.RootElement;

        // Create a <rect> element and set the "fill" and "filter" attributes
        var rectElement = (SVGRectElement)document.CreateElementNS(SvgNamespace, "rect");
        rectElement.X.BaseVal.Value = 40;
        rectElement.Y.BaseVal.Value = 40;
        rectElement.Width.BaseVal.Value = 60;
        rectElement.Height.BaseVal.Value = 60;
        rectElement.SetAttribute("fill", "#ffa500");
        rectElement.SetAttribute("filter", "url(#F1)");
        svgElement.AppendChild(rectElement);

        // Create a <defs> element and add it to the <svg> element
        var defsElement = (SVGDefsElement)document.CreateElementNS(SvgNamespace, "defs");
        svgElement.AppendChild(defsElement);

        // Create a <filter> element and add it to the <defs> element
        var filterElement = (SVGFilterElement)document.CreateElementNS(SvgNamespace, "filter");
        filterElement.SetAttribute("x", "-20px");
        filterElement.SetAttribute("y", "-20px");
        filterElement.SetAttribute("height", "100px");
        filterElement.SetAttribute("width", "100px");
        filterElement.Id = "F1";
        defsElement.AppendChild(filterElement);

        // Create a <feGaussianBlur> element and add it to the <filter> element
        var feGaussianBlurElement = (SVGFEGaussianBlurElement)document.CreateElementNS(SvgNamespace, "feGaussianBlur");
        feGaussianBlurElement.In1.BaseVal = "SourceGraphic";
        feGaussianBlurElement.StdDeviationX.BaseVal = 10;
        feGaussianBlurElement.StdDeviationY.BaseVal = 10;
        filterElement.AppendChild(feGaussianBlurElement);

        // Save the document
        document.Save(Path.Combine(OutputDir, "gaussian-blur.svg"));
    }

Если вы просмотрите файл результата, вы увидите размытый оранжевый прямоугольник, точно такой же, как на предыдущем рисунке, второй по порядку с stdDeviation=“10”.

Размытие фонового изображения

Чтобы использовать фильтр SVG размытия по Гауссу для размытия фона, вы можете применить фильтр к элементу SVG, который действует как фон позади основного содержимого. Это может быть, например, любое растровое изображение. Фильтр размытия позволяет создать визуально привлекательный эффект размытия фона, сохраняя при этом содержимое переднего плана резким и в фокусе.

Чтобы добиться размытия фонового изображения с помощью SVG, выполните следующие несколько шагов. Они аналогичны шагам, описанным в предыдущем примере C#:

1. Создайте экземпляр класса SVGDocument.
2. Свойство RootElement класса SVGDocument указывает на корневой элемент документа <svg>.
3. Вы можете использовать метод CreateElementNS(namespaceURI, qualifiedName) класса SVGDocument для создания экземпляров SVGImageElement, SVGDefsElement, SVGFilterElement, и классы SVGFEGaussianBlurElement.
   Например, если вы планируете использовать растровое изображение в качестве фона, создайте экземпляр класса SvgImageElement и установите атрибуты, определяющие его источник, положение и размер. Чтобы добавить imageElement к svgElement, вы можете использовать метод AppendChild(). Использование атрибута filter для imageElement, ссылающегося на имя URL-адреса filterElement (в атрибуте id), позволяет применить эффект фильтра SVG к изображению.
4. Добавьте к созданным элементам все необходимые атрибуты и правильно вложите их.
5. После того, как вы создадите фильтр размытия и установите filterElement.Id для элемента <filter>, его можно применить к изображению.
6. Вызовите метод Save(), чтобы сохранить документ с размытым фоновым изображением в локальный файл, указанный путем.

Вот пример, иллюстрирующий реализацию размытия фонового изображения:

using Aspose.Svg;
using System.IO;
using Aspose.Svg.Filters;
...

    // Set SVG Namespace Url
    string SvgNamespace = "http://www.w3.org/2000/svg";

    using (var document = new SVGDocument())
    {
        var svgElement = document.RootElement;

        // Create an <image> element and add to the <svg> element
        var imageElement = (SVGImageElement)document.CreateElementNS(SvgNamespace, "image");
        imageElement.Href.BaseVal = "http://docs.aspose.com/svg/images/api/seaside.jpg";
        imageElement.Height.BaseVal.Value = 480;
        imageElement.Width.BaseVal.Value = 640;
        imageElement.X.BaseVal.Value = 20;
        imageElement.Y.BaseVal.Value = 20;
        imageElement.SetAttribute("filter", "url(#F1)");
        svgElement.AppendChild(imageElement);

        // Create a <defs> element and add to the <svg> element
        var defsElement = (SVGDefsElement)document.CreateElementNS(SvgNamespace, "defs");
        svgElement.AppendChild(defsElement);

        // Create a <filter> element and add to the <defs> element
        var filterElement = (SVGFilterElement)document.CreateElementNS(SvgNamespace, "filter");
        filterElement.Id = "F1";
        defsElement.AppendChild(filterElement);

        // Create a <feGaussianBlur> element and add to the <filter> element
        var feGaussianBlurElement = (SVGFEGaussianBlurElement)document.CreateElementNS(SvgNamespace, "feGaussianBlur");
        feGaussianBlurElement.In1.BaseVal = "SourceGraphic";
        feGaussianBlurElement.StdDeviationX.BaseVal = 5;
        feGaussianBlurElement.StdDeviationY.BaseVal = 5;
        filterElement.AppendChild(feGaussianBlurElement);

        // Save the document
        document.Save(Path.Combine(OutputDir, "blur-background-image.svg"));
    }

Размытие фонового изображения с использованием SVG Builder

Aspose.SVG Builder API предназначен для упрощенного создания и обновления элементов SVG на C#. Давайте рассмотрим С# пример реализации размытия фона (точно тот же пример, что и в предыдущем параграфе) с использованием SVG Builder API. Этот код демонстрирует применение шаблона свободного компоновщика (fluent builder pattern) для создания кратких и читаемых документов SVG, используя возможности библиотеки Aspose.SVG:

using Aspose.Svg.Builder;
using System.IO;
...

    var svgContent = "<svg xmlns=\"http://www.w3.org/2000/svg\"></svg>";
    using (var document = new SVGDocument(svgContent, "."))
    {
        // Create an instance of SVGSVGElementBuilder to facilitate the construction of the <svg> element and its child elements using a fluent builder pattern
        var svg = new SVGSVGElementBuilder()
            .AddDefs(d => d
                .AddFilter(f => f.Id("gaussian-blur")
                    .AddFeGaussianBlur(g => g
                    .StdDeviation(5, 5)
                    )
                )
            )
            .AddImage(i => i
                .X(20).Y(20).Height(480).Width(640)
                .Href("http://docs.aspose.com/svg/images/api/seaside.jpg")
                .Filter(fl => fl
                    .FilterId("gaussian-blur")
                )
            )
            // Call the Build() method on the SVGSVGElementBuilder to construct the <svg> element with its child elements
            .Build(document.FirstChild as SVGSVGElement);
        document.Save(Path.Combine(OutputDir, "gaussian-blur-builder.svg"));
    }

Шаблон Fluent builder позволяет создавать элементы SVG и применять фильтры более лаконично и удобочитаемо. Каждый вызов метода четко указывает его цель, позволяя с первого взгляда понять структуру документа SVG. Этот пример демонстрирует более выразительный подход к созданию документов SVG с использованием SVG Builder, обеспечивающий улучшенную читаемость, удобство и гибкость по сравнению с ручным подходом к созданию элементов, показанным в предыдущем примере.

Смотрите также

• Вы можете загрузить полные примеры и файлы данных с GitHub.
• О загрузке с GitHub и запуске примеров вы узнаете из раздела Как запускать примеры.
• Дополнительные сведения о примитивах фильтров вы найдете на странице W3C Filter Effects Module и статье Фильтры и градиенты SVG.
• Aspose.SVG предлагает бесплатные Веб-приложения SVG для конвертации SVG или файлов изображений, объединения SVG, векторизации изображений, генерации спрайтов SVG, кодирования данных SVG в Base64 и многого другого. Эти онлайн-приложения работают в любой операционной системе с веб-браузером и не требуют установки дополнительного программного обеспечения. Это быстрый и простой способ эффективно и результативно решить ваши задачи, связанные с SVG!