Helpful resources ▼
  Download   Pricing   Buy

Effets d'éclairage SVG – Filtres SVG – Code C#

Effets d’éclairage SVG

Aspose.SVG pour .NET vous permet de créer divers effets d’éclairage pour améliorer l’attrait visuel des graphiques et des illustrations. Les effets d’éclairage peuvent ajouter de la profondeur, du réalisme et une sensation d’éclairage aux images plates. L’effet d’éclairage est créé en SVG à l’aide d’un ensemble de filtres. Considérez-en quelques-uns: <feSpecularLighting> et <fePointLight>. Vous pouvez combiner plusieurs filtres, créer et contrôler les détails pour un effet d’éclairage.

Dans cet article, vous apprendrez à écrire du code SVG pour créer des effets d’éclairage SVG et examinerez des exemples C# détaillés d’utilisation de l’espace de noms Aspose.Svg.Filters pour appliquer les effets d’éclairage aux éléments SVG ou aux bitmaps.

Source de lumière ponctuelle – Code SVG

Le filtre <fePointLight> définit une source de lumière qui définit un effet de lumière ponctuelle. Il peut être utilisé dans la primitive <feDiffuseLighting> ou <feSpecularLighting> en tant qu’enfant. Les attributs spécifiques x, y et z indiquent la position de la source lumineuse ponctuelle. Le filtre <feSpecularLighting> éclaire une image en utilisant son canal alpha comme bump map. Prenons un exemple SVG d’effet de lumière:

 1<svg xmlns="http://www.w3.org/2000/svg">
 2	<rect x="40" y="40" width="150" height="150" fill="Teal" filter="url(#light)"/>
 3	<defs>
 4		<filter id="light">
 5			<feGaussianBlur in="SourceAlpha" stdDeviation="5" result="blur"/>
 6			<feSpecularLighting in="blur" result="light" specularExponent="30" lighting-color="#ddd">
 7				<fePointLight x="70" y="70" z="150"/>
 8			</feSpecularLighting>
 9			<feComposite in="SourceGraphic" in2="light" operator="arithmetic" k1="0" k2="1" k3="1" k4="0"/>
10		</filter>
11	</defs>
12</svg>

Dans cet exemple, quatre filtres SVG sont appliqués pour créer l’effet de lumière (figure b):

  1. <feGaussianBlur> prend l’entrée SourceAlpha, qui est le canal alpha de l’image source. Le résultat est stocké dans un tampon temporaire nommé "blur".
  2. L’éclairage est réalisé avec les primitives de filtre <feSpecularLighting> et <fePointLighting>. Le <feSpecularLighting> utilise le tampon "blur" comme modèle d’élévation de surface et génère un effet d’éclairage à partir d’une source ponctuelle qui est définie dans le filtre <fePointLighting>. Le résultat est stocké dans le tampon "light".
  3. Le filtre <feComposite> prend deux entrées in ="SourceGraphic" et in2 ="light" et les combine à l’aide de l’opération de composition arithmétique. La sortie de l’opérateur arithmétique pour chaque pixel de résultat est calculée comme suit : k1·in1·in2 + k2·in1 + k3·in2 + k4

Si l’on supprime le filtre flou gaussien dans le code du filtre “light” (figure b), on obtient le filtre “flat-light” suivant, qui donne une lumière plus plate (figure c):

1<filter id="flat-light">
2    <feSpecularLighting  result="light" specularExponent="30" lighting-color="#ddd">
3        <fePointLight x="70" y="70" z="150"/>
4    </feSpecularLighting>
5    <feComposite in="SourceGraphic" in2="light" operator="arithmetic" k1="0" k2="1" k3="1" k4="0"/>
6</filter>

Texte “Un effet de lumière a été appliqué au rectangle : a – image originale, b – image avec le filtre “light” appliqué, c – image avec le filtre “flat-light” appliqué.”

Source de lumière SVG – Code C#

L’extrait de code C# suivant montre comment créer le même effet d’éclairage SVG (filtre “light”) que dans le code SVG ci-dessus. Considérons le code C# étape par étape:

  1. Créez une instance de la classe SVGDocument.
  2. La propriété RootElement de la classe SVGDocument pointe vers l’élément racine <svg> du document.
  3. Créez un élément <defs> et ajoutez-le à l’élément <svg>:
  4. Créez un élément <filter>, définissez un attribut id et ajoutez <filter> à l’élément <defs>:
    • Utilisez la méthode CreateElementNS() pour créer une instance de la classe SVGFilterElement.
    • Définissez un filterElement.Id pour l’élément <filter>. Utilisez la propriété Id de la classe SVGElement.
    • Utilisez la méthode AppendChild() pour ajouter le <filter> à l’élément <defs>.
  5. Créez un élément <feGaussianBlur> et définissez les attributs in, result et stdDeviation. Ajoutez-le ensuite à l’élément <filter>.
    • Utilisez la méthode CreateElementNS() pour créer une instance de la classe SVGFEGaussianBlurElement.
    • Appelez la méthode SetAttribute(name, value) pour définir les attributs in1 et result.
    • Utilisez les propriétés StdDeviationX et StdDeviationY de la classe SVGFEGaussianBlurElement pour définir l’attribut setDerivation.
    • Utilisez la méthode AppendChild() pour ajouter <feGaussianBlur> à l’élément <filter>.
  6. Créez les éléments <feSpecularLighting>, <fePointLight> et <feComposite> de la même manière. Spécifiez leurs attributs requis et ajoutez ces éléments dans le bon ordre au filtre.
  7. Créez un élément <rect> avec des attributs et ajoutez-le à l’élément <svg>:
    • Vous pouvez utiliser la méthode CreateElementNS() pour créer une instance de la classe SVGRectElement.
    • Définir des attributs spécifiant sa position, sa taille et son remplissage. L’utilisation d’un attribut filter faisant référence au nom url d’un attribut id dans filterElement permet d’appliquer l’effet d’éclairage SVG au rectangle.
    • Pour ajouter le rectElement à svgElement, vous pouvez utiliser la méthode AppendChild().
  8. Appelez la méthode Save() pour enregistrer l’image SVG résultante dans un fichier local spécifié par chemin.
 1using Aspose.Svg;
 2using System.IO;
 3using Aspose.Svg.Filters;
 4...
 5    // Set SVG Namespace Url
 6    string SvgNamespace = "http://www.w3.org/2000/svg";
 7
 8    using (var document = new SVGDocument())
 9    {
10        var svgElement = document.RootElement;
11
12        // Create a <defs> element and add to the svgElement
13        var defsElement = (SVGDefsElement)document.CreateElementNS(SvgNamespace, "defs");
14        svgElement.AppendChild(defsElement);
15
16        // Creating a <filter> element and add to the defsElement
17        var filterElement = (SVGFilterElement)document.CreateElementNS(SvgNamespace, "filter");
18        filterElement.Id = "light";
19        defsElement.AppendChild(filterElement);
20
21        // Create a <feGaussianBlur> element and add to the filterElement
22        var feGaussianBlurElement = (SVGFEGaussianBlurElement)document.CreateElementNS(SvgNamespace, "feGaussianBlur");
23        feGaussianBlurElement.StdDeviationX.BaseVal = 5;
24        feGaussianBlurElement.StdDeviationY.BaseVal = 5;
25        feGaussianBlurElement.SetAttribute("in1", "SourceAlpha");
26        feGaussianBlurElement.SetAttribute("result", "blur");
27        filterElement.AppendChild(feGaussianBlurElement);
28
29        // Create a feSpecularLighting filter primitive and add it to the filterElement
30        var feSpecularLightingElement = (SVGFESpecularLightingElement)document.CreateElementNS(SvgNamespace, "feSpecularLighting");
31        feSpecularLightingElement.In1.BaseVal = "blur";
32        feSpecularLightingElement.SetAttribute("result", "light");
33        feSpecularLightingElement.SetAttribute("specularExponent", "30");
34        feSpecularLightingElement.SetAttribute("lighting-color", "#ddd");
35        filterElement.AppendChild(feSpecularLightingElement);
36
37        // Create a fePointLight filter primitive and add it to the <feSpecularLighting> element
38        var fePointLightElement = (SVGFEPointLightElement)document.CreateElementNS(SvgNamespace, "fePointLight");
39        fePointLightElement.SetAttribute("x", "70");
40        fePointLightElement.SetAttribute("y", "70");
41        fePointLightElement.SetAttribute("z", "150");
42        feSpecularLightingElement.AppendChild(fePointLightElement);
43
44        // Create a feComposite filter primitive and add it to the filterElement
45        var feCompositeElement = (SVGFECompositeElement)document.CreateElementNS(SvgNamespace, "feComposite");
46        feCompositeElement.In1.BaseVal = "SourceGraphic";
47        feCompositeElement.In2.BaseVal = "light";
48        feCompositeElement.SetAttribute("operator", "arithmetic");
49        feCompositeElement.SetAttribute("k1", "0");
50        feCompositeElement.SetAttribute("k2", "1");
51        feCompositeElement.SetAttribute("k3", "1");
52        feCompositeElement.SetAttribute("k4", "0");
53        filterElement.AppendChild(feCompositeElement);
54
55        // Create a <rect> element and set the "fill" and "filter" attributes
56        var rectElement = (SVGRectElement)document.CreateElementNS(SvgNamespace, "rect");
57        rectElement.X.BaseVal.Value = 40;
58        rectElement.Y.BaseVal.Value = 40;
59        rectElement.Width.BaseVal.Value = 150;
60        rectElement.Height.BaseVal.Value = 150;
61        rectElement.SetAttribute("fill", "Teal");
62        rectElement.SetAttribute("filter", "url(#light)");
63        svgElement.InsertBefore(rectElement, svgElement.FirstChild);
64
65        // Save the document
66        document.Save(Path.Combine(OutputDir, "lighting-effect.svg"));
67    }

L’image résultante, Lighting-effect.svg, ressemble exactement à la figure b ci-dessus.

Voir également

Effet d'ombre portée Filtres de couleur
Subscribe to Aspose Product Updates

Get monthly newsletters & offers directly delivered to your mailbox.

© Aspose Pty Ltd 2001-2024. All Rights Reserved.