วางเอฟเฟกต์เงา SVG C#

รูปภาพ SVG เป็นภาพเวกเตอร์ที่เหมาะกับเว็บซึ่งสามารถค้นหา จัดทำดัชนี บีบอัด และเขียนสคริปต์ได้ ในขณะที่เงาเป็นคุณสมบัติการออกแบบทั่วไปที่ใช้เพื่อทำให้ภาพดูสวยงามและโดดเด่น บางครั้ง คุณอาจต้องเพิ่มเอฟเฟกต์เงาตกกระทบให้กับรูปภาพ SVG เช่น ไอคอนหรือข้อความ เป็นต้น ดังนั้น บทความนี้จะอธิบายวิธีสร้างเอฟเฟกต์เงาตกกระทบบนรูปภาพ SVG โดยทางโปรแกรมใน C#

วางเอฟเฟกต์เงาบนรูปภาพ SVG – ดาวน์โหลด C# API ฟรี

Aspose.SVG for .NET รองรับการทำงานกับภาพ SVG เนื่องจากมีคุณสมบัติมากมายในการแก้ไข อัปเดต หรือแปลงกราฟิกแบบเวกเตอร์ที่ปรับขนาดได้ใน C# เพียงเข้าถึงไฟล์ DLL อ้างอิงจากหน้า New Releases หรือเรียกใช้คำสั่ง NuGet ด้านล่างเพื่อกำหนดค่าจากแกลเลอรี NuGet พร้อมกับการอ้างอิงทั้งหมด หากมี

PM> Install-Package Aspose.SVG

วิธีสร้าง Drop Shadow Effect บนภาพ SVG ใน C#

ขั้นตอนต่อไปนี้สรุปกระบวนการทั้งหมดของการเพิ่มเอฟเฟกต์เงาบนภาพ SVG:

  1. สร้างวัตถุของคลาส SVGDocument
  2. ตั้งค่า SVG Namespace Url และรับองค์ประกอบ SVG รูท
  3. สร้างองค์ประกอบ defs และ filterElement เพื่อผนวก feOffset filter primitive
  4. สร้างตัวกรอง feBlend และองค์ประกอบข้อความ
  5. บันทึกภาพ SVG เอาต์พุตด้วยเอฟเฟกต์เงาโดยเรียกวิธีบันทึก

สร้าง Drop Shadow Effect บนภาพ SVG โดยทางโปรแกรมใน C#

โปรดทำตามขั้นตอนด้านล่างเพื่อสร้างเอฟเฟกต์เงาบนภาพ SVG โดยทางโปรแกรมใน C#:

  1. สร้างวัตถุของคลาส SVGDocument
  2. ตั้งค่า SVG Namespace Url และรับองค์ประกอบ SVG รูท
  3. สร้างองค์ประกอบ defs และ filterElement เพื่อผนวก feOffset filter primitive
  4. สร้างตัวกรอง feBlend และองค์ประกอบข้อความ
  5. บันทึกภาพ SVG เอาต์พุตด้วยเอฟเฟกต์เงาโดยเรียกเมธอด Save

ข้อมูลโค้ดด้านล่างแสดงวิธีสร้างเอฟเฟกต์เงาบนภาพ SVG ใน C#:

// เริ่มต้นวัตถุของคลาส SVGDocument
Aspose.Svg.SVGDocument document = new Aspose.Svg.SVGDocument();

// ตั้งค่า SVG เนมสเปซ URL
string SvgNamespace = "http://www.w3.org/2000/svg";

// รับรูทองค์ประกอบ svg ของเอกสาร
Aspose.Svg.SVGSVGElement svgElement = document.RootElement;

// สร้างองค์ประกอบ defs และเพิ่มไปยัง svgElement
Aspose.Svg.SVGDefsElement defsElement = (Aspose.Svg.SVGDefsElement)document.CreateElementNS(SvgNamespace, "defs");
svgElement.AppendChild(defsElement);

// สร้างองค์ประกอบตัวกรองและเพิ่มไปยัง defsElement
var filterElement = (Aspose.Svg.SVGFilterElement)document.CreateElementNS(SvgNamespace, "filter");
filterElement.Id = "shadow";
filterElement.SetAttribute("x", "-20px");
filterElement.SetAttribute("y", "-20px");
filterElement.SetAttribute("height", "150px");
filterElement.SetAttribute("width", "150px");
defsElement.AppendChild(filterElement);

// สร้างตัวกรองดั้งเดิมของ feOffset และเพิ่มไปยัง filterElement
var feOffsetElement = (Aspose.Svg.Filters.SVGFEOffsetElement)document.CreateElementNS(SvgNamespace, "feOffset");
feOffsetElement.In1.BaseVal = "SourceAlpha";
feOffsetElement.SetAttribute("result", "offset");
feOffsetElement.SetAttribute("dx", "3");
feOffsetElement.SetAttribute("dy", "3");
filterElement.AppendChild(feOffsetElement);

//// สร้างตัวกรองดั้งเดิมของ feGaussianBlur และเพิ่มใน filterElement
//var feGaussianBlurElement = (Aspose.Svg.Filters.SVGFEGaussianBlurElement)document.CreateElementNS(SvgNamespace, "feGaussianBlur");
//feGaussianBlurElement.In1.BaseVal = "ออฟเซ็ต";
//feGaussianBlurElement.StdDeviationX.BaseVal = 3;
//feGaussianBlurElement.StdDeviationY.BaseVal = 3;
//feGaussianBlurElement.SetAttribute("ผลลัพธ์", "เบลอ");
//filterElement.AppendChild (feGaussianBlurElement);

// สร้างตัวกรองดั้งเดิมของ feBlend และเพิ่มใน filterElement
var feBlendElement = (Aspose.Svg.Filters.SVGFEBlendElement)document.CreateElementNS(SvgNamespace, "feBlend");
feBlendElement.In1.BaseVal = "SourceGraphic";
feBlendElement.In2.BaseVal = "blur";
feBlendElement.SetAttribute("mode", "normal");
filterElement.AppendChild(feBlendElement);

// สร้างองค์ประกอบข้อความและเพิ่มไปยัง svgElement
var textElement = (Aspose.Svg.SVGTextElement)document.CreateElementNS(SvgNamespace, "text");
textElement.Style.FontSize = "5em";
textElement.SetAttribute("x", "20px");
textElement.SetAttribute("fill", "#C0C0C0");
textElement.SetAttribute("y", "100px");
textElement.TextContent = "Aspose.SVG API";
textElement.SetAttribute("filter", "url(#shadow)");
svgElement.InsertBefore(textElement, svgElement.FirstChild);

// บันทึกเอกสาร SVG
document.Save(Path.Combine(dataDir, "DropShadow.svg"));

โปรดทราบว่ามีการใส่โค้ดสองสามบรรทัดในข้อมูลโค้ดด้านบน คุณสามารถเลือกที่จะไม่แสดงความคิดเห็นเพื่อใช้เอฟเฟ็กต์ Gaussian blur กับเงาได้ หากคุณต้องการเอฟเฟ็กต์เงาตกกระทบแบบเบลอ ซึ่งทำให้ผลลัพธ์โดดเด่นด้วยเงาที่นุ่มนวลขึ้น

รับใบอนุญาตชั่วคราวฟรี

คุณสามารถขอ ใบอนุญาตชั่วคราวฟรี เพื่อทดสอบ API ได้อย่างเต็มประสิทธิภาพ

บทสรุป

ในบทความนี้ คุณได้เรียนรู้วิธีสร้างเอฟเฟกต์เงาบนภาพ SVG โดยทางโปรแกรมใน C# คุณสามารถประมวลผลรูปภาพ SVG ที่มีอยู่ได้โดยการโหลดหรือสร้างรูปภาพ SVG ใหม่ตั้งแต่เริ่มต้นขึ้นอยู่กับความต้องการของคุณ นอกจากนี้ คุณสามารถไปที่ส่วน เอกสารประกอบ เพื่อเรียนรู้คุณสมบัติอื่นๆ มากมายของ API หากคุณต้องการปรึกษาข้อสงสัยหรือข้อกังวลใดๆ กับเรา โปรดอย่าลังเลที่จะติดต่อเราผ่านทาง ฟอรัม

ดูสิ่งนี้ด้วย