אפקט הרוויה באמצעות SVG Color Matrix ב-C#

שמתם לב פעם איך כמה תמונות באינטרנט נראות בהירות מדי, או שהצבעים פשוט לא ממש מתאימים? הסיבה לכך היא תופעה הנקראת אפקט הרוויה. במאמר זה נלמד כיצד להשיג את אפקט הרוויה עם מטריצת צבע SVG ב-C#.

ראשית, נלמד על אפקט הרוויה ונסתכל על C# SVG API כדי להחיל את מסנן מטריצת הצבע של SVG. לאחר מכן, נעבור על השלבים כיצד לתקן את אפקט הרוויה על ידי שימוש במטריצת הצבעים כדי להתאים את הצבעים בתמונה. לבסוף, נספק קישורים שימושיים לשיפורים נוספים. אז בואו נתחיל!

מאמר זה יעסוק בנושאים הבאים:

  1. מהו אפקט הרוויה ומטריצת הצבע של SVG
  2. C# SVG API לאפקט רוויה באמצעות מטריצת צבע
  3. כיצד להשתמש ב-SVG Color Matrix עבור אפקט הרוויה
  4. צור אפקט רוויה באמצעות מטריצת צבע ב-C#

מהו אפקט הרוויה ומטריצת צבע SVG

אפקט הרוויה הוא טכניקת עיבוד תמונה נפוצה המשמשת כדי לגרום לתמונה להיראות תוססת יותר. זה מתאר את עוצמת הצבע.

אפקט הרוויה נגרמת מהאופן שבו המוח שלנו מעבד צבע. כאשר אנו רואים תמונה, המוח שלנו מתאים אוטומטית את הצבעים כדי לגרום להם להיראות טבעיים יותר. עם זאת, כאשר לתמונה יש יותר מדי צבע, או שהצבעים אינם מאוזנים באופן שווה, למוח שלנו קשה יותר לעבד את התמונה, מה שעלול לגרום לאפקט הרוויה.

אנו יכולים להשיג את אפקט הרוויה באמצעות אלמנט המסנן SVG. הוא מספק מסנן להמרות צבע לשינוי צבעים בהתבסס על מטריצת טרנספורמציה.

C# SVG API עבור אפקט רוויה באמצעות מטריצת צבע

אפקט הרוויה הוא מקרה מיוחד של שימוש במטריצת הצבע. אנו נשתמש ב-Aspose.SVG for .NET API לשימוש בפעולת הרוויה של פרימיטיבי המסנן . ה-API מאפשר טעינה, ניתוח, רינדור, יצירה והמרה של קבצי SVG לפורמטים פופולריים ללא כל תלות בתוכנה.

אנא הורד את ה-DLL של ה-API או התקן אותו באמצעות NuGet.

PM> Install-Package Aspose.SVG

כיצד להשתמש ב-SVG Color Matrix עבור אפקט הרוויה

מחיל טרנספורמציה מטריצה על ערוצי RGBA של כל פיקסל בתמונת הקלט. אנו יכולים להשתמש באלמנט SVG להשפעת הרוויה על ידי ביצוע השלבים המפורטים להלן:

  1. הגדר מסמך SVG והגדר את כתובת ה-URL של מרחב השמות של SVG.
  2. צור אלמנט תמונה ואלמנט מסנן.
  3. הוסף את האלמנט הגרפי.
  4. צור אלמנט feColorMatrix והוסף אותו לרכיב המסנן.
  5. שמור את תמונת הפלט SVG.

הסעיף הבא מתאר כיצד להפוך את השלבים הללו לקוד C# וליצור אפקט רוויה ב-SVG.

צור אפקט רוויה באמצעות מטריצת צבע ב-C#

אנו יכולים ליצור אפקט רוויה באמצעות האלמנט על ידי ביצוע השלבים המפורטים להלן:

  1. ראשית, צור מופע של המחלקה SVGDocument.
  2. לאחר מכן, גש לרכיב SVG הבסיס וציין את כתובת ה-URL של מרחב השמות עבור SVG.
  3. לאחר מכן, אתחל את אובייקט המחלקה SVGImageElement.
  4. בינתיים, הגדר נתיב תמונה ומאפיינים אחרים עבור SVGImageElement.
  5. לאחר מכן, הגדר את אובייקט המחלקה SVGDefsElement והוסף אותו לאלמנט השורש.
  6. לאחר מכן, צור את אובייקט המחלקה SVGFilterElement והוסף אותו ל-SVGDefsElement.
  7. לאחר מכן, הגדר את אובייקט המחלקה SVGFEColorMatrixElement.
  8. לאחר מכן, הגדר את התכונות הנדרשות ig type: saturate
  9. לאחר מכן, הוסף את SVGFEColorMatrixElement ל-SVGFilterElement.
  10. לבסוף, שמור את קובץ הפלט SVG בשיטת Save().

דוגמת הקוד הבאה מראה כיצד ליצור אפקט רוויה עם מטריצת הצבע ב-C#.

// דוגמה זו מדגימה כיצד ליצור אפקט רוויה עם מטריצת הצבע ב-C#.
// צור מופע של SVGDDocument
var document = new SVGDocument();

// קבל רכיב svg root של המסמך
var svgElement = document.RootElement;

const string SvgNamespace = "http://www.w3.org/2000/svg";

var imageElement = (SVGImageElement)document.CreateElementNS(SvgNamespace, "image");
imageElement.Href.BaseVal = @"C:\Files\lighthouse.jpg";
imageElement.Height.BaseVal.ConvertToSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PX);
imageElement.Width.BaseVal.ConvertToSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PX);
imageElement.Height.BaseVal.Value = 640;
imageElement.Width.BaseVal.Value = 480;
imageElement.X.BaseVal.Value = 20;
imageElement.Y.BaseVal.Value = 20;
imageElement.SetAttribute("filter", "url(#CM)");
svgElement.AppendChild(imageElement);

// צור אלמנט defs והוסף ל-svgElement
Aspose.Svg.SVGDefsElement defsElement = (Aspose.Svg.SVGDefsElement)document.CreateElementNS(SvgNamespace, "defs");
svgElement.AppendChild(defsElement);

// צור אלמנט מסנן והוסף ל-defsElement
Aspose.Svg.SVGFilterElement filterElement = (Aspose.Svg.SVGFilterElement)document.CreateElementNS(SvgNamespace, "filter");
defsElement.AppendChild(filterElement);

// צור אלמנט feColorMatrix
var feColorMatrixElement = (SVGFEColorMatrixElement)document.CreateElementNS(SvgNamespace, "feColorMatrix");
feColorMatrixElement.In1.BaseVal = "SourceGraphic";
feColorMatrixElement.SetAttribute("type", "saturate");
feColorMatrixElement.SetAttribute("values", "2");
filterElement.Id = "CM";

// הוסף לאלמנט מסנן
filterElement.AppendChild(feColorMatrixElement);

// שמור את מסמך ה-SVG
document.Save("C:\\Files\\ColorEffect.svg");
תמונת מקור lighthouse.jpg

תמונת קלט מקור

אפקט רוויה באמצעות SVG Color Matrix

אפקט הרוויה באמצעות SVG Color Matrix ב-C#

<svg xmlns="http://www.w3.org/2000/svg">
    <image href="file:///C:/Files/lighthouse.jpg" height="640" width="480" x="20" y="20" filter="url(#CM)"/>
    <defs>
        <filter id="CM">
            <feColorMatrix in="SourceGraphic" type="saturate" values="2"/>
        </filter>
    </defs>
</svg>

קבל רישיון API בחינם

אתה יכול לקבל רישיון זמני בחינם כדי לנסות את הספרייה ללא מגבלות הערכה.

סיכום

במאמר זה למדת על השפעת הרוויה על תמונות. ראינו גם כיצד להחיל את אפקט צבע הרוויה באמצעות מסנני מטריצת הצבע של SVG ב-C#. חוץ מזה, אתה יכול ללמוד עוד על Aspose.SVG עבור .NET באמצעות תיעוד ולחקור תכונות שונות המוצעות על ידי ה-API. בכל מקרה של אי בהירות, אנא אל תהסס לפנות אלינו ב[פורום התמיכה החינמי] שלנו18.

ראה גם