Gaußscher Weichzeichner – SVG-Filter – C#-Code

SVG-Filter

Mit Aspose.SVG für .NET können Sie ein SVG-Dokument öffnen oder erstellen, bearbeiten und Änderungen an seinem Inhalt vornehmen. Sie können das Dokument ändern und die zahlreichen verfügbaren Filter anwenden, um das gewünschte Ergebnis zu erzielen. Der Namespace Aspose.Svg.Filters enthält Klassen und Schnittstellen, die sich auf Filtereffekte in der SVG-Spezifikation beziehen. Die Klasse SVGFEGaussianBlurElement entspricht einem <feGaussianBlur>-Element zur Implementierung des Gaußschen Weichzeichnungseffekts.

In SVG wird ein Filter durch das Element <filter> definiert, das innerhalb eines Elements <defs> festgelegt wird. Es wird nie selbst gerendert und konzeptionell als das Element beschrieben, das seine untergeordneten Elemente – Filterprimitive – einschließt. Das Element <filter> verfügt über eine Reihe von Attributen. Erforderliche Attribute für das Filterprimitiv sind x, y, width, height und id. Sie legen den Bereich des Bildes fest, auf den der Filter angewendet wird. Und das Attribut id gibt einem SVG-Element eine eindeutige Kennung und identifiziert ein Element innerhalb eines SVG-Dokuments.

In diesem Artikel erfahren Sie, wie Sie SVG-Code schreiben, um einen Gaußschen Weichzeichnerfilter zu erstellen, und betrachten detaillierte C#-Beispiele für die Verwendung der SVGFEGaussianBlurElement-Klasse, um den Gaußschen Weichzeichnereffekt auf SVG-Elemente und Bitmaps anzuwenden.

Gaußscher Weichzeichner – SVG-Code

Der Gaußsche Unschärfe-SVG-Filter ist ein Filtertyp, der mithilfe einer Gaußschen Verteilung einen Unschärfeeffekt auf den Inhalt eines SVG-Elements anwendet. Dies ist einer der am häufigsten verwendeten Filter in SVG, um weiche, glatte und optisch ansprechende Effekte zu erzeugen. Der Filter <feGaussianBlur> erzeugt einen weichen Unschärfeeffekt. Das Attribut stdDeviation gibt die Zahl an, die die Standardabweichung für den Unschärfevorgang charakterisiert. Wenn zwei Zahlen angegeben werden, stellt die erste Zahl einen Standardabweichungswert entlang der x-Achse des Koordinatensystems dar und die zweite – auf der y-Achse. Für jeden Filter ist ein Quellbild zur Verarbeitung erforderlich. Andernfalls kann der Filter nichts rendern und funktioniert daher nicht. Die Eingabedaten des Filterprimitivs werden im Attribut in angegeben. Der Standardwert ist in="SourceGraphic".

Hier ist ein Beispiel für die Anwendung eines Gaußschen Unschärfe-SVG-Filters mit verschiedenen Werten des Attributs stdDeviation auf ein SVG-Rechteckelement:

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

Wie Sie sehen, steuert der Wert stdDeviation die Streuung der Gaußschen Verteilung. Ein größerer stdDeviation-Wert führt zu mehr Unschärfe, während ein kleinerer Wert einen weicheren Effekt erzeugt. Hinweis: Durch die um eine Form herum hinzugefügte Unschärfe wird das Ausgabebild oft größer als das Quellbild. Wir müssen negative Zahlen für x und y verwenden, um ein Abschneiden der durch den Filter hinzugefügten Grafiken zu vermeiden. Im obigen Beispiel verwenden wir x="-20" und y="-20".

Gaußscher Weichzeichner – C#-Code

Im vorherigen SVG-Codebeispiel haben wir ausführlich besprochen, wie man einen Gaußschen Unschärfefilter erstellt, und jetzt wissen wir, welche Elemente und Attribute wir verwenden müssen. Lassen Sie uns den C#-Code erstellen, um einen solchen Filter mithilfe von Aspose.SVG für die .NET-API zu implementieren.

Gemäß der SVG-Syntax sollte sich das <filter>-Element in einem <defs>-Element befinden und das Filterprimitiv <feGaussianBlur> befindet sich nur innerhalb des <filter>-Elements. Um SVG-Filter zu programmieren, müssen Sie daher die erforderlichen Elemente korrekt erstellen und verschachteln.

1. Wenn Sie ein SVG-Dokument von Grund auf erstellen, verwenden Sie den Konstruktor SVGDocument(), um ein leeres SVG-Dokument zu erstellen.
2. Die Eigenschaft RootElement der SVGDocument-Klasse zeigt auf das Stammelement <svg> des Dokuments.
3. Erstellen Sie ein <rect>-Element, legen Sie die erforderlichen Attribute fest und fügen Sie es dem <svg>-Element hinzu.
   • Verwenden Sie die Methode CreateElementNS(namespaceURI, qualifiedName) der SVGDocument-Klasse, um eine Instanz von SVGRectElement zu erstellen.
   • Eine Möglichkeit zum Festlegen der Werte des Attributs ist die Verwendung der Methode SetAttribute(name, value). Eine andere Möglichkeit besteht darin, SVG-DOM-Punktzugriffsmethoden zu verwenden, die Eigenschaften des Typs SVGAnimatedLength verwenden, deren statische Daten über die Konstruktion element.X.BaseValue festgelegt oder gelesen werden können.
   • Verwenden Sie die Methode AppendChild(), um das Element <rect> zum Element <svg> hinzuzufügen.
4. Erstellen Sie auf ähnliche Weise ein <defs>-Element und fügen Sie es dem <svg>-Element hinzu.
5. Um ein <filter>-Element zu erstellen, verwenden Sie denselben Algorithmus: Verwenden Sie die Methode CreateElementNS(), um eine Instanz von SVGFilterElement zu erstellen. Denken Sie daran, die Attribute x, y, height, width und id mit der SetAttribute()-Methode festzulegen und den <filter> zum <defs>-Element hinzuzufügen.
6. Erstellen Sie ein <feGaussianBlur>-Element und legen Sie die Attribute in und stdDeviation fest. Fügen Sie es dann dem Element <filter> hinzu.
   • Verwenden Sie die Methode CreateElementNS(), um eine Instanz der Klasse SVGFEGaussianBlurElement zu erstellen.
   • Um das Attribut In1 festzulegen, verwenden Sie die Eigenschaft des Typs SVGAnimatedLength, deren statische Daten über die Konstruktion feGaussianBlurElement.In1.BaseVal = "SourceGraphic" festgelegt oder gelesen werden können.
   • Verwenden Sie die Eigenschaften StdDeviationX und StdDeviationY der SVGFEGaussianBlurElement-Klasse, um das setDerivation-Attribut festzulegen.
   • Rufen Sie die AppendChild()-Methode auf, um <feGaussianBlur> zum <filter>-Element hinzuzufügen.
7. Rufen Sie die Methode Save() auf, um das Dokument in einer durch den Pfad angegebenen lokalen Datei zu speichern.

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"));
    }

Wenn Sie die Ergebnisdatei rendern, sehen Sie ein unscharfes orangefarbenes Rechteck, genau wie das in der vorherigen Abbildung, an zweiter Stelle mit stdDeviation=“10”.

Hintergrundbild verwischen

Um den SVG-Filter „Gaußsche Unschärfe“ für die Hintergrundunschärfe zu verwenden, können Sie den Filter auf ein SVG-Element anwenden, das als Hintergrund hinter dem Hauptinhalt fungiert. Es kann sich beispielsweise um eine beliebige Bitmap handeln. Mit dem Unschärfefilter können Sie einen optisch ansprechenden Hintergrundunschärfeeffekt erzeugen und gleichzeitig den Vordergrundinhalt scharf und scharf halten.

Befolgen Sie diese wenigen Schritte, um mit SVG eine Hintergrundunschärfe zu erzielen. Sie ähneln den im vorherigen C#-Beispiel beschriebenen Schritten:

1. Erstellen Sie eine Instanz der Klasse SVGDocument.
2. Die Eigenschaft RootElement der SVGDocument-Klasse zeigt auf das Stammelement <svg> des Dokuments.
3. Sie können die Methode CreateElementNS(namespaceURI, qualifiedName) der SVGDocument-Klasse verwenden, um Instanzen von SVGImageElement, SVGDefsElement, SVGFilterElement zu erstellen. und SVGFEGaussianBlurElement Klassen.
   Wenn Sie beispielsweise planen, eine Bitmap als Hintergrund zu verwenden, erstellen Sie eine Instanz der Klasse SvgImageElement und legen Sie Attribute fest, die ihre Quelle, Position und Größe angeben. Um ein imageElement zu svgElement hinzuzufügen, können Sie die Methode AppendChild() verwenden. Die Verwendung eines filter-Attributs von imageElement, das auf den URL-Namen von filterElement (im id-Attribut) verweist, ermöglicht die Anwendung des SVG-Filtereffekts auf das Bild.
4. Fügen Sie den erstellten Elementen alle erforderlichen Attribute hinzu und verschachteln Sie sie ordnungsgemäß.
5. Nachdem Sie einen Unschärfefilter erstellt und eine filterElement.Id für das <filter>-Element festgelegt haben, kann dieser auf das Bild angewendet werden.
6. Rufen Sie die Methode Save() auf, um das Dokument mit dem unscharfen Hintergrundbild in einer durch den Pfad angegebenen lokalen Datei zu speichern.

Hier ist ein Beispiel, das die Implementierung von Unschärfe-Hintergrundbildern veranschaulicht:

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"));
    }

Hintergrundbild verwischen – mit der SVG Builder API

Die Aspose.SVG Builder-API wurde für die optimierte Erstellung und Aktualisierung von SVG-Elementen in C# entwickelt. Schauen wir uns ein C#-Beispiel für die Implementierung der Hintergrundunschärfe an (genau das gleiche Beispiel wie im vorherigen Absatz) mit der SVG Builder API. Dieser Code demonstriert die Verwendung eines Fluent-Builder-Musters (fluent builder pattern) zum Erstellen prägnanter und lesbarer SVG-Dokumente unter Nutzung der Funktionen der Aspose.SVG-Bibliothek:

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"));
    }

Mit dem Fluent Builder-Muster können Sie SVG-Elemente präziser und lesbarer erstellen und Filter anwenden. Jeder Methodenaufruf gibt deutlich seinen Zweck an, sodass Sie die Struktur des SVG-Dokuments auf einen Blick verstehen können. Dieses Beispiel zeigt einen aussagekräftigeren Ansatz zum Erstellen von SVG-Dokumenten mit SVG Builder und bietet eine verbesserte Lesbarkeit, Wartbarkeit und Flexibilität im Vergleich zum manuellen Ansatz zum Erstellen von Elementen, der im vorherigen Beispiel gezeigt wurde.

Siehe auch

• Sie können die vollständigen Beispiele und Datendateien von GitHub herunterladen.
• Informationen zum Herunterladen von GitHub und zum Ausführen von Beispielen finden Sie im Abschnitt So führen Sie die Beispiele aus.
• Weitere Informationen zu Filterprimitiven finden Sie auf der Seite W3C Filter Effects Module und im Artikel SVG-Filter und -Verläufe.
• Aspose.SVG bietet kostenlose SVG-Webanwendungen zum Konvertieren von SVG- oder Bilddateien, Zusammenführen von SVGs, Bildvektorisierung, SVG-Sprite-Generierung, SVG-zu-Base64-Datenkodierung und mehr. Diese Online-Anwendungen funktionieren auf jedem Betriebssystem mit einem Webbrowser und erfordern keine zusätzliche Softwareinstallation. Es ist eine schnelle und einfache Möglichkeit, Ihre SVG-bezogenen Aufgaben effizient und effektiv zu lösen!