إنشاء لوحة HTML5 باستخدام C#

في هذه المقالة ، سأوضح لك كيفية إنشاء عنصر HTML5 Canvas بالرسومات باستخدام C#. يمكنك تضمين هذه الميزة في تطبيقات الويب .NET الخاصة بك لإنشاء وتكامل ديناميكي HTML5 Canvas على صفحات الويب.

يُستخدم عنصر HTML5 Canvas لرسم رسومات سريعة داخل صفحات الويب. يوفر لك مساحة تعمل كحاوية للرسومات أو الكائنات الرسومية. يمكنك رسم المسارات والمربعات والنصوص والصور والكائنات الأخرى ثم تحويلها إلى تنسيقات صور. Aspose.Imaging for .NET يسمح لك بإنشاء عنصر HTML5 Canvas باستخدام C# أو VB.NET. تتيح لك هذه الميزة إنشاء HTML5 Canvas ديناميكيًا وتعيين ملف الرسومات المصدر داخل تطبيقات الويب مثل تطبيق ASP.NET. لذلك دعنا ننتقل إلى مزيد من التحقق من كيفية إنشاء عنصر HTML5 Canvas باستخدام C# مع Aspose.Imaging for .NET API.

C# API لإنشاء HTML5 Canvas - التثبيت

بادئ ذي بدء ، دعنا نلقي نظرة على كيفية تثبيت Aspose.Imaging for .NET داخل تطبيق .NET الخاص بك. إنها بسيطة مثل الفطيرة. يمكنك إما إضافة مرجع إلى API DLL أو تثبيته باستخدام NuGet Package Manager.

PM> Install-Package Aspose.Imaging

إنشاء صفحة ويب باستخدام HTML5 Canvas باستخدام C#

يتيح لك HTML5 Canvas تعيين صورة مصدر تظهر داخل منطقة لوحة الرسم. باستخدام Aspose.Imaging for .NET ، يمكنك تصدير رسومات CDR و CMX و EMF و WMF و SVG إلى HTML5 Canvas دون القلق بشأن كود HTML و JavaScript و CSS. فيما يلي خطوات إنشاء صفحة HTML بها عنصر HTML5 Canvas.

  • قم بتحميل ملف رسومات تريد تعيينه كمصدر للوحة القماشية باستخدام طريقة Image.Load().
  • أنشئ HTML5 Canvas بتصدير الصورة باستخدام طريقة Image.Save().

يوضح نموذج التعليمات البرمجية التالي كيفية إنشاء HTML5 Canvas مع الرسومات باستخدام C#.

using (var image = Image.Load(@"Sample.svg"))
{
    image.Save(@"Canvas.html", new Html5CanvasOptions
    {
        VectorRasterizationOptions = new SvgRasterizationOptions()
    });
}

إنشاء HTML5 Canvas Element فقط باستخدام C#

في المثال السابق ، قمنا بإنشاء صفحة HTML كاملة تحتوي على عنصر HTML5 Canvas. ومع ذلك ، في بعض الحالات ، قد تحتاج إلى إنشاء عنصر لوحة الرسم فقط لتضمينه في صفحة الويب الخاصة بك. في مثل هذه الحالات ، يمكنك تكوين Aspose.Imaging API لتجنب إنشاء صفحة HTML كاملة. فيما يلي خطوات إنشاء عنصر HTML5 Canvas.

يوضح نموذج التعليمات البرمجية التالي كيفية إنشاء عنصر HTML5 Canvas فقط باستخدام C#.

using (var image = Image.Load(@"Sample.svg"))
{
    image.Save(@"Canvas.html", new Html5CanvasOptions
    {
        VectorRasterizationOptions = new SvgRasterizationOptions(),
        FullHtmlPage = false
    });
}

استنتاج

تناولت هذه المقالة كيفية إنشاء HTML5 Canvas ديناميكيًا باستخدام C# داخل تطبيقات .NET. لقد رأينا كيفية إنشاء صفحة HTML كاملة تحتوي على HTML5 Canvas أو HTML5 Canvas فقط باستخدام Aspose.Imaging for .NET. يمكنك استكشاف المزيد حول API باستخدام التوثيق.

أنظر أيضا