11 إطار عمل JavaScript لإنشاء الرسومات

إطار عمل جافا سكريبت: صورة رسومية
(رصيد الصورة: المستقبل)

يمكن أن تفي أطر عمل جافا سكريبت بمجموعة من الوظائف. هنا ، سنلقي نظرة على بعض المكتبات التي ستساعدك على إنشاء رسومات مذهلة.

يقدم المتصفح العديد من واجهات برمجة التطبيقات والأسطح ذات القدرة العالية. أبرزها عنصر قماش الرسم والرسومات المتجهة القابلة للتطوير (SVG). تتوفر هاتان الميزتان الآن في جميع متصفحات سطح المكتب والجوّال تقريبًا ، لكن واجهات برمجة التطبيقات المطلوبة لاستخدامها منخفضة المستوى إلى حد ما ، وعادة ما يترجم 'المستوى المنخفض' إلى الكثير من التعليمات البرمجية المملة والمتكررة فقط للقيام بأشياء بسيطة.

نظرًا لأن كتابة تعليمات برمجية مملة وفائضة عن الحاجة ليست على رأس قائمة الأشياء التي يستمتع المطورون عادةً بفعلها ، حتى مع أفضل محرري الكود و ال أفضل أجهزة الكمبيوتر المحمولة للبرمجة ، هناك العديد من المكتبات المتاحة لمساعدتك في تلبية جميع متطلبات الرسم في متصفحك.



في هذه المقالة ، سوف نلقي نظرة على بعض الخيارات المتاحة. سوف نستكشف مكتبات JavaScript الأكثر شيوعًا ونتحدث عن نقاط القوة والضعف فيها. سنقوم أيضًا ببعض استكشافات الكهوف في بعض المشاريع الأقل شهرة والتي تملأ بعض الاحتياجات المتخصصة المثيرة للاهتمام - النوع الذي لا تعرف أنك بحاجة إليه حتى تحتاج إليها. تبدأ من الصفر؟ جرب القمة موقع البناء ، والنظر فيها استضافة موقع الخدمة مناسبة لك.

أفضل قلم للآيباد ميني 4

01. D3.js

أطر عمل جافا سكريبت الرسومية: D3.js

يوفر D3.js إمكانيات لا حدود لها ، كما يوضح تصور هاميلتون التفاعلي لشيرلي وو(رصيد الصورة: D3)

D3.js هو المدير الكبير لمكتبات رسومات JavaScript. مع أكثر من مليون عملية تنزيل أسبوعية فوق مستوى سطح البحر ، من المحتمل جدًا أن تكون الأكثر شهرة واستخدامًا على نطاق واسع بين جميع مكتبات الرسومات. حتى أن لها خاصتها صفحة ويكيبيديا . ودعنا نواجه الأمر ، أليس هذا عندما تعلم أنك وصلت إلى وقت كبير؟

تمكنك D3 من بناء تصورات للبيانات من أي نوع. ما عليك سوى إلقاء نظرة على ملفات صفحة الأمثلة لرؤية عالم الاحتمالات. والأفضل من ذلك ، قم بزيارة Shirley Wu's التصور التفاعلي من كل سطر في مسرحية هاميلتون الموسيقية إذا كنت تريد حقًا إثارة ذهنك.

D3 هي أداة شاملة. لديه اختيار DOM الخاص به ، وقدرات AJAX وحتى مولد أرقام عشوائي خاص. كل مكون من D3 هو وحدة العقدة الخاصة به والتي يجب استيرادها. على سبيل المثال ، تسمى وحدة التحديد D3-selection. هناك أيضًا وحدات نمطية للمصفوفات والأشكال والألوان والسحب والإفلات والوقت وغير ذلك الكثير.

تأتي قوة D3 مصحوبة بمقايضة التعقيد. يمكن أن يكون منحنى التعلم حادًا ويمكن أن تظل الشفرة مطولة. يتطلب بناء شيء بسيط مثل مخطط شريطي أن تقوم يدويًا بتجميع المحور والمقاييس وعلامات التجزئة وحتى رسم المستطيلات التي ستمثل الأشرطة. غالبًا ما يشتكي المطورون من مستوى الفهم المنخفض المطلوب ليكون فعالًا مع D3.

هذا إلى حد كبير لأن إنشاء تصورات البيانات المعقدة يتطلب منك فهم منخفض المستوى للتصور الذي تريد إنشاؤه. D3 ليس الخيار الأفضل للمخططات المعدة مسبقًا. لذلك ، هناك العديد من الخيارات الأخرى التي ستجدها في حفرة النجاح أسرع بكثير.

D3 قادر على التقديم إلى Canvas و SVG. ومع ذلك ، فإن السحر الحقيقي لـ D3 يكمن في قدرتها على 'ربط البيانات' بالرسومات التي تنشئها. فكر في مخطط يتغير مع تغير البيانات الواردة. باستخدام SVG ، يعد كل عنصر رسومي عنصرًا فرديًا يمكن تحديده وتحديثه. هذا غير ممكن مع لوحة الرسم ، ونظرًا لأن D3 تتعلق أساسًا بتشغيل تصورات البيانات ، فعادة ما يكون SVG هو تنسيق الإخراج المفضل.

02. Chart.js

أطر عمل JavaScript الرسومية: Chart.js

يحتوي Chart.js على ثمانية أنواع مخططات تم إنشاؤها مسبقًا ، مما يعني أنه يمكن للمستخدمين النهوض والتشغيل بسرعة(رصيد الصورة: Chart.js)

Chart.js هو مشروع مفتوح المصدر لإنشاء مخططات قوية باستخدام JavaScript. يتمثل الاختلاف الكبير بين Chart.js و D3 في أنه بينما يمكنك إنشاء أي شيء تقريبًا باستخدام D3 ، فإن Chart.js يقصرك على ثمانية أنواع مخططات مبنية مسبقًا: خط ، شريط ، دائري ، قطبي ، فقاعي ، مبعثر ، مساحة ومختلط. على الرغم من أن هذا يبدو مقيدًا ، إلا أن هذا ما يجعل بدء استخدام Chart.js أسهل. هذا صحيح بشكل خاص لأولئك الذين ليسوا خبراء في البيانات ولكنهم يعرفون طريقهم حول الرسم البياني الأساسي.

تم بناء الجملة حول نوع المخطط. يمكنك تهيئة مخطط جديد على عنصر لوحة الرسم الحالي ، وتعيين نوع المخطط ثم تعيين خيارات المخطط. يتم عرض Chart.js على لوحة الرسم فقط. هذه ليست مشكلة نظرًا لأن جميع المتصفحات الحديثة تدعم عنصر لوحة HTML ولكن قد يكون توقفًا للمطورين الذين لديهم متطلبات لدعم SVG.

هذا يعني أيضًا أنك مقيد بالرسوم المتحركة الممكنة. من خارج الصندوق ، يحتوي Chart.js على دعم لجميع معادلات التخفيف ويتم تحديد الرسوم المتحركة بإعداد خاصية واحد. في حين أن هذا يجعل الحصول على مخطط متحرك سريعًا وسهلاً ، فإن عدم وجود عناصر SVG فردية يمنعك من القيام بحركات معقدة باستخدام انتقالات CSS3 والرسوم المتحركة.

على عكس D3 ، فإن Chart.js ليس نمطيًا ، لذلك لا يتطلب الأمر سوى تضمين JavaScript واحدًا للحصول على دعم لجميع الوظائف وأنواع المخططات. هذا يجعل من السهل البدء ولكن يعني أن أصولك يمكن أن تكون أكبر بكثير. هذا صحيح بشكل خاص إذا كنت تحتاج إلى محاور زمنية - يتطلب Chart.js حينئذٍ Moment.js ، وهو حوالي 51 كيلو بايت مصغر ومضغوط. من الأسهل بكثير إنشاء مخطط شريطي باستخدام Chart.js مقارنةً بـ D3. ومع ذلك ، هناك سقف يأتي مع البساطة. قد تجد أنك وصلت إلى الحد الأقصى لما ستفعله خارج الصندوق. في كثير من الأحيان ، يبدأ المطورون بحل مثل Chart.js ثم ينتقلون إلى D3.

إذا كانت بساطة Chart.js تروق لك ، فقد يعجبك الخيار التالي: Chartist.

03. الجارتي

أطر JavaScript الرسومية: Chartist

ميزة كبيرة لاستخدام Chartist هي أنها تستجيب بشكل افتراضي(رصيد الصورة: الجارتيست)

الجارتي تهدف إلى أن تكون مكتبة رسوم بيانية بسيطة ومبسطة وصغيرة الحجم وسهلة البدء بها. وهي مصممة أيضًا لتكون سريعة الاستجابة بشكل افتراضي. هذه صفقة أكبر مما تبدو ، لأن أطر مثل D3 لا تغير حجم المخططات تلقائيًا ولكنها تتطلب من المطور الارتباط بالأحداث وإعادة رسم الرسومات.

الجارتيست صغير أيضًا مقارنة بـ Chart.js. يزن 10 كيلو بايت فقط مع عدم وجود تبعيات. قد يكون ذلك لأنه لا يقدم سوى ثلاثة أنواع من المخططات: خطي وشريطي ودائري. هناك اختلافات داخل هذه الأنواع (على سبيل المثال ، مخطط التبعثر هو نوع خط في Chartist) ولكن الحجم الصغير وسهولة التكوين يقابلهما عدم وجود أنواع مخططات خارج الصندوق.

يتم عرض Chartist إلى SVG بدلاً من لوحة الرسم ، مما يجعلها أكثر قابلية للتخصيص من حيث الشكل والمظهر ، فضلاً عن توفير قدر أكبر بكثير من التحكم في التفاعل والرسوم المتحركة. ومع ذلك ، فإن عدم إمكانية الوصول إلى لوحة الرسم يعني أنك قد تواجه صعوبة في القيام ببعض الإجراءات. على سبيل المثال ، هناك واجهة برمجة تطبيقات لتقديم لوحة قماشية إلى صورة (toDataURI). هذا الخيار غير موجود لـ SVG ، لذا فإن تصدير مخطط كصورة سيكون أكثر صعوبة. في عالم مثالي ، سيكون لديك خيار العرض لكلا الوضعين.

من الأسهل تكوين المخططات البيانية من Chart.js ، حيث تتوفر خيارات أقل. في حين أنه من الممكن توسيع هذه المخططات مع قدر كبير من الوظائف ، فإن تركيزها على البساطة يعني أنها ، بحكم التعريف ، بسيطة. الجارتيست هو حل رائع لأولئك الذين يحتاجون إلى حل رسم بياني أساسي. يصعب تكوين المخططات بطبيعتها لأنها تتطلب نوعًا من المعرفة حول كيفية إعداد البيانات على طول محور معين وتجميعها بطرق معينة. يجعل Chartist جزء الرسم البياني بسيطًا قدر الإمكان ولكن قد تجد نفسك في حاجة إلى حل أكثر قوة عندما تصبح أكثر راحة في إنشاء الرسوم البيانية الخاصة بك.

كيفية تبديل الألوان في الفوتوشوب

يسرد Chartist أيضًا دعم إطار العمل مفتوح المصدر ، بما في ذلك React و Angular. لا يوجد ذكر لحزمة Vue على موقعها.

04. بريتشارتس

أطر عمل JavaScript الرسومية: Britecharts

يلف Britecharts D3 ، لذا يمكنك الاستمتاع بوظيفة D3 دون الحاجة إلى معرفة كيفية عملها(رصيد الصورة: Britecharts)

بريتشارتس هي مكتبة رسوم بيانية تلتف D3. تم صنعه بواسطة Eventbrite ، الذي قام بعد ذلك بفتح المشروع بموجب ترخيص Apache V2 المسموح به.

إنه يقدم مجموعة صغيرة جدًا من الرسوم البيانية ، ولكنها ممتعة من الناحية الجمالية. في حين أنه قد يكون إنشاء مخطط شريطي باستخدام Vanilla D3 مهمة ، إلا أن التفاف Britecharts يجعل الأمر بسيطًا مثل إنشاء كائن barChart جديد ثم تعيين عرضه وارتفاعه.

barChart.width(500).height(500);

يدعم Britecharts جميع أنواع المخططات الأساسية: خط ، شريط ، دونات ، تعداد نقطي ، مخطط مبعثر ، خط مؤشر وخطوة ، وهو أكثر من تلك التي تقدمها مكتبات مثل Chartist. كما يوفر أيضًا وظيفة تلميح الأدوات الأساسية ووظيفة الأسطورة. الرسوم المتحركة للمخططات مدمجة وقد قدم Eventbrite بعض مخططات الألوان الجميلة.

في النهاية ، تعد Britecharts خيارًا رائعًا لوظائف الرسوم البيانية الأساسية. كائنات التكوين بسيطة للغاية ولا يزال بإمكانك الحصول على قوة D3 تحت الأغطية دون الحاجة إلى معرفة أي شيء عن D3 نفسها. سيجد العديد من المطورين هذا خيارًا أكثر إقناعًا من مجرد إنشاء مخطط كامل من الألف إلى الياء باستخدام D3.

كما أنه يركز على جوانب ربط البيانات في D3 ، مما يجعلها جيدة جدًا للمخططات التي تحتاج إلى التغيير مع تغير البيانات الأساسية. على الرغم من تقييده إلى حد ما في الأنواع المتاحة ، إلا أنه يحتوي أيضًا على نوع مخطط أساسي يمكنك توسيعه لإنشاء أنواع مخططات جديدة خاصة بك.

05. أنواع الغوص

أطر JavaScript الرسومية: Taucharts

يعلم Taucharts المستخدمين أساسيات تصور البيانات(رصيد الصورة: Taucharts)

أساليب الغوص هو حل رسم بياني آخر يلف تعقيد D3 في واجهة برمجة تطبيقات سهلة التنفيذ. إنه مبني على مفاهيم من قواعد الرسومات ، كتاب للمؤلف ليلاند ويلكينسون. يوفر فهمًا لوقت وكيفية استخدام تصورات البيانات لعرض أنواع مختلفة من البيانات.

خارج الصندوق ، فإنه يتميز بمخططات خطية وشريطية ومخطط مبعثر ومساحي ومخططات وجهية. ومع ذلك ، فإنه ينفذ المفاهيم من القواعد النحوية للرسومات إلى 'لغة Taucharts' ، والتي توفر إطارًا لتنفيذ تصورات البيانات الخاصة بك.

يبدو Taucharts مقنعًا تمامًا وحقيقة أنه مبني على D3 يجعلها خيارًا جذابًا وقويًا. ومع ذلك ، هناك شعور بأن المطور يحتاج أيضًا إلى قراءة قواعد الرسومات من أجل الاستفادة الكاملة من قوته.

حتى الآن قمنا بتغطية الرسوم البيانية وتصور البيانات فقط. هذا لأن رسم المخططات هو حالة الاستخدام الأكثر شيوعًا لمكتبة الرسومات في المستعرض. لكنها ليست الوحيدة بأي حال من الأحوال. سيناريو آخر شائع جدًا للرسومات هو ، بالطبع ، الرسوم المتحركة.

06. Two.js

أطر عمل JavaScript الرسومية: Two.js

يأتي Twos.js بمفرده عند التعامل مع الرسوم المتحركة ثنائية الأبعاد(رصيد الصورة: Two.js)

لا ينبغي الخلط بينه وبين D3.js ، two.js هي مكتبة JavaScript مفتوحة المصدر للرسم ثنائي الأبعاد على الويب. كما أنه قادر على استهداف جميع خيارات الرسومات الثلاثة في المتصفحات الحديثة: SVG و Canvas و WebGL.

يشبه Two.js إلى حد ما D3 من حيث أنه يركز بشكل صارم على الرسم ولا يحتوي على مخططات مسبقة الصنع أو هياكل تفاعلية للاختيار من بينها. هذا يعني أنك ، تمامًا مثل D3 ، تحتاج إلى فهم أساسي لنوع الرسم الذي تحاول القيام به وكيفية تحقيق ذلك باستخدام التركيبات التي يوفرها two.js. رسم دائرة بسيط نوعًا ما. من ناحية أخرى ، فإن إنشاء رسوم متحركة مفصلة هو مسعى أكثر تعقيدًا. يلخص Two.js ملل رسم الأشكال فقط ، وليس ملل الرسم الكلي.

يتتبع Two.js أيضًا جميع الكائنات التي تقوم بإنشائها ، بحيث يمكنك الرجوع إليها وتحريكها في أي وقت. هذا مهم بشكل خاص إذا كنت تقوم بتطوير اللعبة ولديك أصول تحتاج إلى تتبع لأشياء مثل اكتشاف الاصطدام. يحتوي على حلقة رسوم متحركة مدمجة ، مما يريحك من القلق بشأن إطارات الرسوم المتحركة ، ويسهل ربطها في مكتبة رسوم متحركة مثل جرين سوك .

في حين أن موقع two.js قوي ، إلا أن طبيعته ذات الشكل الحر قد تترك بعض المطورين غير متأكدين من كيفية البدء ، كما أنها أداة متخصصة للرسم والرسوم المتحركة ثنائية الأبعاد. خيار ممتاز آخر هو pts.js.

07. نقاط js

أطر عمل جافا سكريبت الرسومية: Pts.js

استخدام macbook pro كشاشة خارجية
تعتبر المنهجية المحددة مسبقًا لـ Pts مفيدة للتصورات التفاعلية ، وكذلك الرسوم المتحركة(رصيد الصورة: pts.js)

نقاط هي أيضًا مكتبة رسم ثنائية الأبعاد. ومع ذلك ، فهي تختلف اختلافًا جوهريًا عن two.js ، لأنها تستخدم منهجية محددة مسبقًا لكيفية تجميع الرسومات والرسوم المتحركة: الفضاء والشكل والنقطة. التشبيه الذي يستخدمه مطوروها لشرح هذا هو واحد من العالم المادي. الفضاء ورق. الشكل هو قلم الرصاص. والنقطة هي فكرتك.

من حيث تنفيذه ، الفضاء هو عنصر قماش. بمجرد إنشاء عنصر اللوحة ، يمكنك إضافة لاعبين إليه. يمكن أن تكون هذه وظائف أو كائنات. يجب أن تتوافق هذه الوظائف والكائنات مع الواجهة المحددة مسبقًا التي تحتوي عليها المساحة. Pts مبنية على TypeScript ، لذلك ليست هناك حاجة لتخمين ماهية هذه الأدوات حيث من المحتمل أن تقترح الأدوات التي تستخدمها تلك ذات الإكمال التلقائي.

على سبيل المثال ، تحتوي المساحة على وظيفة بدء يمكنك تحديدها. هذا هو الكود الذي يتم تشغيله عندما تكون المساحة جاهزة. ضمن هذه الوظائف ، يحدث الرسم إلى الفضاء باستخدام كائن النموذج. يمكن لكائنات النموذج رسم أي نوع من الأشكال والنقطة هي مكان وجود هذه العناصر في الفراغ.

يبدو أن النقاط مصممة بشكل أساسي لإنشاء تصورات ورسوم متحركة تفاعلية. تنفيذه مثير للاهتمام ، وإن كان مجرّدًا تمامًا. قد يواجه المطورون صعوبة في فهم نموذج 'المساحة والشكل والنقطة' الذي تتطلبه نقاط. هذه عقبة ذهنية أخرى يجب إزالتها بالإضافة إلى مجرد رسم الأشكال وتحريكها.

08. Anime.js

أطر جافا سكريبت الرسومية: Anime.js

يعمل Anime.js على نظام متداخلة يساعد في توقيت الرسوم المتحركة الخاصة بك(رصيد الصورة: Anime.js)

Anime.js هي في الأساس مكتبة رسوم متحركة. يحتوي على نظام مدمج مدمج لجعل الرسوم المتحركة المعقدة أكثر سهولة والتي تتداخل أو تعتمد على حدوث تنفيذ آخر. من الشائع أن يتم توقيت الرسوم المتحركة معًا أو يتم تشغيلها بواسطة بعضها البعض. يجعل النظام المذهل هذا الأمر أسهل في التنفيذ ، حيث يساعد في تخفيف بعض النفقات العامة لتتبع كل شيء يحدث على الصفحة وتكوين توقيتات الرسوم المتحركة يدويًا.

على عكس مكتبات الرسم التي تم تناولها حتى الآن ، لا يحتوي anime.js على واجهات برمجة تطبيقات لرسم الأشكال. بدلاً من ذلك ، يفترض أن الأشكال الخاصة بك موجودة بالفعل وأنك تريد تحريكها. وهذا يجعلها رائعة للاستخدام مع مكتبات مثل two.js. يحتوي Anime.js على دعم لتحريك خصائص CSS و SVG و DOM وحتى كائنات JavaScript.

يعد Anime.js خيارًا جيدًا لتحريك الرسومات الحالية ومن المحتمل أن يتم دمجه مع مكتبة أخرى. يجب اعتباره بديلاً عن شيء مثل GreenSock وليس بديلاً عن مكتبات الرسم الأخرى. من المحتمل أن يتم استخدام Anime.js للرسوم المتحركة الأكثر تعقيدًا التي يجب أن تحدث كجزء من تجربة الويب التفاعلية.

09. PixiJS

أطر JavaScript الرسومية: PixiJS

PixiJS هي مكتبة رسم ثنائية الأبعاد بواجهة برمجة تطبيقات تم إنشاؤها واستخدامها على Adobe Flash ، لذا سيكون مألوفًا للبعض(رصيد الصورة: PixiJS)

PixiJS هي مكتبة رسم ثنائية الأبعاد أخرى. والغرض الرئيسي منه هو تسهيل عرض الرسومات ثنائية الأبعاد وتحريكها وإدارتها ، بحيث يمكنك التركيز على بناء تجربتك أو لعبتك دون القلق بشأن مواكبة جميع الأشكال والصور التي يتعين عليك رسمها وتحريكها. إذا كنت تبني لعبة ، فإن الأصول (أو العفاريت) يمكن أن تتضخم بسرعة إلى رقم يصعب إدارته. (الكثير من الأصول لحفظها؟ احتفظ بها في مكان آمن سحابة التخزين .)

يتمثل أحد الجوانب الجذابة لـ PixiJS في أنه يأتي من واجهة برمجة تطبيقات تم إنشاؤها واستخدامها على نطاق واسع في Adobe Flash. هذه فائدة كبيرة للمطورين القادمين من خلفية فلاش ، حيث ستبدو التجربة مألوفة. إنه مشابه أيضًا لـ SpriteKit من Apple.

PixiJS ليس محرك ألعاب ، لذلك إذا كنت تستخدمه للألعاب ، فلن تجد أي أدوات أو فيزياء للتعامل مع أشياء مثل اكتشاف الاصطدام. ستحتاج إلى لفها بمحرك لعبة حقيقي أو بمحرك تقوم ببنائه بنفسك ، إذا كنت تشعر بالجرأة.

يتم عرض PixiJS على WebGL. WebGL هو محرك لعمل رسومات تسريع GPU في المتصفح. هذا يعني أنه مفيد للرسوم المتحركة والرسومات التي تستخدم الكثير من موارد النظام وستؤدي بشكل أفضل عند تقديمها بواسطة وحدة معالجة رسومات منفصلة (GPU). يعتمد على OpenGL ، وهو مكافئ سطح المكتب لتشغيل الألعاب وبرامج الرسومات ثلاثية الأبعاد. أسفل الغطاء ، يستخدم WebGL عنصر لوحة HTML.

سيقدر مطورو الرسومات الجادين قوة WebGL. ومع ذلك ، قد تتدهور هذه التجارب في الأجهزة ذات الطاقة المنخفضة. حتى عندما كنت أضع هذه المقالة معًا ، تسببت العديد من عروض PixiJS التوضيحية في حدوث تباطؤ ملحوظ في نظامي ، والذي لا يتمتع بالقدرات المتطورة المطلوبة للرسومات والرسوم المتحركة المعقدة.

10. Zdog

أطر JavaScript الرسومية: Zdog

يقدم Zdog مظهر ثلاثي الأبعاد باستخدام رسومات ثنائية الأبعاد(رصيد الصورة: Zdog)

معظم محركات الرسم التي ناقشناها حتى الآن ثنائية الأبعاد. هذا لأن معظم التفاعلات التي لدينا مع شاشتنا تحدث في بعدين - على طول المحور X و Y. عادة ما تكون الرسومات والرسوم المتحركة ثلاثية الأبعاد أكثر تعقيدًا.

Zdog هي مكتبة لبناء تجارب زائفة ثلاثية الأبعاد تكون في الغالب مسطحة بطبيعتها. يطلق عليه اسم pseudo-3D لأنه بينما يصور رسوماته في مساحة ثلاثية الأبعاد ، فإنه يعرضها كأشكال مسطحة. يستخدم الحيل المرئية لجعل الكائنات ثنائية الأبعاد تظهر ثلاثية الأبعاد. التأثير مثير حقا. تبدو الصورة ثلاثية الأبعاد تمامًا عند عرض الرسوم المتحركة ولكن عند التقاط لقطة شاشة ، فمن الواضح أنها صورة مسطحة. هنا مثال واحد: عرض ماريو الدوار.

نظرًا لأن عمليات التصيير ثنائية الأبعاد ، يمكن لـ Zdog التقديم إلى Canvas أو SVG. Zdog هو خيار رائع للرسوم المتحركة ثلاثية الأبعاد على كائنات بسيطة - خاصة إذا كانت تلك الأصول تتضمن جوانب من التصميم المسطح. قد يجد المطورون الذين يريدون رسومًا متحركة ثلاثية الأبعاد ولكنهم لا يريدون الوقوع في المستنقع في عالم معقد لمحركات الرسومات ثلاثية الأبعاد أن Zdog حلاً مناسبًا. بالإضافة إلى ذلك ، من خلال تركيزه على الصور المسطحة ، يمكن لـ Zdog توفير واجهة أبسط بكثير وأداء أعلى بكثير مما هو مطلوب للعرض ثلاثي الأبعاد للصور الرسومية المعقدة.

لا تحتوي على عناصر محرك اللعبة مثل إدارة الأصول واكتشاف الاصطدام ، لذا ستحتاج إلى لفها في محرك اللعبة أو الاهتمام بهذه الاعتبارات يدويًا. هذا يعني أن Zdog هو الأفضل على الأرجح للرسوم المتحركة ثلاثية الأبعاد المعزولة على الصفحات المقصودة.

لماذا يوجد 1 على رمز google chrome الخاص بي

11. Snap.svg

أطر عمل JavaScript الرسومية: Snap.svg

يحتوي Snap.svg على واجهة برمجة تطبيقات ستحدد عنصر SVG لك ثم ترسم العناصر إليه(رصيد الصورة: Snap.SVG)

Snap.svg يقول إنه يجعل 'العمل مع أصول SVG بنفس سهولة استخدام jQuery للعمل مع DOM'. قد تكون قادرًا على التمييز من مرجع jQuery أن Snap.svg أقدم قليلاً لكن واجهة برمجة التطبيقات الخاصة به تبدو سهلة مثل jQuery وهذا شيء قوي جدًا.

يحتوي Snap.svg على واجهة برمجة تطبيقات نظيفة وبسيطة لاختيار عنصر SVG الرئيسي ثم رسم العناصر إليه. إنه أكثر ملاءمة للمطورين الذين يبحثون عن حل سريع لتحريك SVGs. إنه خيار جيد بشكل خاص إذا كانت الرسوم المتحركة الخاصة بك بسيطة وليس لديك الكثير من المعرفة حول محركات الرسوم المتحركة. في حين أنه قديم إلى حد ما ، فمن المؤكد أنه لا ينبغي إغفاله ، لأنه قد يكون أسهل طريقة للعمل مع SVGs الخاصة بك.

Snap.svg منعش في بساطته. لقد تم تحديد نطاقه لوظيفة اختيار SVGs والعمل معها ولا يحاول أن يكون أكثر من ذلك. يمكن دمج Snap مع مكتبات رسومات أخرى هنا للرسم والعرض إلى SVGs. من الجيد أيضًا أن يكون لديك SVGs موجودة وتريد طريقة سهلة للعمل معها.

تم نشر هذه المقالة في الأصل في مجلة net.

مقالات ذات صلة: