مقدمة حول Raphaël.js

James Williams

مقدمة

‫SVG هي اختصار لـ Scalable Vector Graphics (رسومات موجّهة يمكن تغيير حجمها)، وهي لغة مستندة إلى XML ل describing objects and scenes (وصف الأجسام والمشاهد). يمكن لعناصر SVG بدء الأحداث ويمكن برمجة باستخدام JavaScript. تأتي ملفات SVG مع العديد من الأنواع الأساسية المضمّنة، مثل الدوائر والمستطيلات، بالإضافة إلى إمكانية عرض النصوص. على الرغم من أنّ رسوم SVG الموجهة يمكن تغيير حجمها ليست تكنولوجيا جديدة، تتيح لغة HTML5 الآن تضمين عناصر SVG في صفحة مباشرةً بدون استخدام علامة <object> أو <embed>، ما يجعلها متوافقة مع ما هو متاح حاليًا في اللوحة. Raphaël.js هي مكتبة JavaScript تتيح لك إنشاء مَشاهد SVG برمجيًا. ويستخدم واجهة برمجة تطبيقات موحّدة لإنشاء مَشاهد SVG حيثما تكون متاحة أو VML(لغة النمذجة بالاستناد إلى المتجهات) حيثما تكون متاحة حاليًا، أي إصدارات Internet Explorer السابقة على IE9.

رسم أول مشهد

لنبدأ برسم مشهد بسيط باستخدام Raphaël. نبدأ برسم المشهد من خلال إنشاء مثيل لكائن Raphaël. في هذه الحالة، استخدَمت الدالة الإنشائية التي تُدرجها في عنصر HTML معيّن بعرض وارتفاع معيّنين، ولكن يمكنك أيضًا جعل Raphaël يُلحق الكائن بـ DOM (نموذج تمثيل المستند). بعد ذلك، أنشأت مستطيلاً من خلال توفير التنسيقَين المطلوبَين x وy مع العرض والارتفاع. بعد ذلك، أنشأتُ دائرة من خلال إدخال الإحداثيات ونصف القطر المطلوبَين. أخيرًا، استخدمتُ دالة السمة (attr) لتعيين ألوان للأجسام.

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

var paper = Raphael("sample-1", 200, 75);
var rect = paper.rect(10, 10, 50, 50);
var circle = paper.circle(110, 35, 25);

rect.attr({fill: "green"});
circle.attr({fill: "blue"});

رسم أشكال متقدّمة باستخدام المسارات

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

يعرض الرمز والشكل أدناه مستطيلاً ومنحنى مغلقًا مرسومًا باستخدام مسارات. ينقل الحرف M متبوعًا بالإحداثيات القلم إلى هذا الموضع، ويرسم الحرف L متبوعًا بزوج إحداثيات خطًا من الموضع الحالي إلى هذا الموضع. ويرسم الحرف s منحنىً سلسًا من النوع Bezier باستخدام نقطة تحكّم ونقطة نهاية معيّنتين بإحداثيات نسبية. يُغلق الحرف Z مسارًا. بشكل عام، يؤدي استخدام حرف كبير إلى إصدار الأمر مع إحداثيات مطلقة، بينما يستخدم الحرف الصغير إحداثيات نسبية. يُصدر الحرفان M/m وZ/z الأمر نفسه للأحرف الكبيرة أو الصغيرة على التوالي. يمكنك الاطّلاع على قائمة بكل تعليمات المسار هنا.

var paper = Raphael("sample-2", 200, 100);
var rectPath = paper.path("M10,10L10,90L90,90L90,10Z");
var curvePath = paper.path("M110,10s55,25 40,80Z");

rectPath.attr({fill:"green"});
curvePath.attr({fill:"blue"});

رسم نص

سيكون من الممل جدًا استخدام الرسومات التوضيحية بدون إمكانية رسم نص. لحسن الحظ، يوفّر Raphaël طريقتَين لرسم النص. الطريقة الأولى، وهي text، تستخدِم إحداثي x وy مع السلسلة المطلوب رسمها. لا تمنحك طريقة النص إمكانية التحكّم كثيرًا في الخط أو التأثيرات الأخرى. يتم استخدام الخط التلقائي بالحجم التلقائي.

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

var paper = Raphael("sample-4", 600, 100);
var t = paper.text(50, 10, "HTML5ROCKS");

var letters = paper.print(50, 50, "HTML5ROCKS", paper.getFont("Vegur"), 40);

letters[4].attr({fill:"orange"});
for (var i = 5; i < letters.length; i++) {
letters[i].attr({fill: "#3D5C9D", "stroke-width": "2", stroke: "#3D5C9D"});
}

لا يتوفّر خط Vegur في Raphaël، ولا يتوفّر أي خط على هذا النحو. بالإضافة إلى ذلك، تستخدم معظم الخطوط تنسيق TrueType‏(TTF) أو OpenType‏(OTF). للانتقال من هذه التنسيقات إلى تنسيقات يمكن استخدامها في Raphaël، علينا تحويلها باستخدام أداة تدعى Cufon. يتيح لك Cufon تصدير أنماط الخطوط المختلفة لخط معيّن (عادي، غامق، مائل، غامق ومائل، وما إلى ذلك) لاستخدامها مع Raphaël. لا يتناول هذا الدليل التعليمي Cufon بالتفصيل. يُرجى الاطّلاع على الرابط المذكور أعلاه للحصول على مزيد من التفاصيل. إنّ دليل خطوط Google هو مصدر رائع للخطوط غير المشروطة لتطبيقاتك.

الفعاليات

يمكن لعناصر SVG الاشتراك مباشرةً في جميع الأحداث التقليدية المستندة إلى الماوس: click وdblclick وmousedown وmousemove وmouseout وmouseover وmouseup وhover. توفّر مكتبة Raphaël إمكانية إضافة طرقك الخاصة إلى اللوحة أو العناصر الفردية، لذا من الناحية النظرية، لا يوجد ما يمنعك من إضافة إيماءات لمتصفّحات الأجهزة الجوّالة.

يربط المقتطف أدناه دالة لتدوير حرف معيّن في "ROCKS" 45 درجة عند النقر عليه.

for (var i = 5; i < letters.length; i++) {
letters[i].attr({fill: "#3D5C9D", "stroke-width": "2", stroke: "#3D5C9D"});

letters[i].click(function(evt) {
this.rotate(45);
});
}

تنسيق SVG مقارنةً بتنسيق Canvas

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

إنّ تحديد ما إذا كنت تريد استخدام SVG أو Canvas لبرمجة الألعاب هو أمر بسيط إلى حدٍ ما. بالإضافة إلى القيود العادية المتعلّقة بما إذا كنت تخطّط للنشر على أجهزة الكمبيوتر المكتبي أو الأجهزة الجوّالة، يعتمد ذلك حقًا على عدد الصور المصغّرة. تُعدّ ملفات SVG مناسبة لما يمكنني تسميته الألعاب منخفضة الدقة. أصف هذه الألعاب بأنّها ألعاب ذات حركة متزامنة محدودة للعناصر وإزالة وإنشاء الصور الرمزية. وتشمل هذه الفئة العديد من ألعاب الألواح، مثل الشطرنج أو الداما أو لعبة "معركة السفن"، بالإضافة إلى ألعاب البطاقات، مثل لعبة ورق الشدَّة والبوكر وHearts. هناك عامل موحّد آخر، وهو أنّ اللاعب يحتاج في العديد من هذه الألعاب إلى نقل عنصر عشوائي، ويسهّل استخدام النصوص البرمجية في SVG اختيار العناصر.

أدوات إنشاء ملفات SVG

لا يعني استخدام ملفات SVG أنّه عليك إنشاء مسارات يدويًا. هناك العديد من الأدوات، سواء كانت مفتوحة المصدر أو تجارية، التي تتيح لك التصدير إلىملف SVG. الأداتان اللتان استخدمتهما على نطاق واسع وأوصي بهما بشدة هما Inkscape وsvg-edit.

svg-edit

‫svg-edit هو محرِّر SVG مستنِد إلى المتصفّح ومكتوب بلغة JavaScript. توفّر هذه الأداة واجهة مستخدم محدودة تذكّرك ببرنامج GIMP أو MS Paint. إذا لم يكن مستوى التفصيل منخفضًا نسبيًا، كنت أستخدم في الغالب أداة svg-edit لتعديل رسومات SVG بدلاً من إنشائها. تتيح لك أداة svg-edit إنشاء عناصر رسومية أو باستخدام رمز SVG.

Inkscape

‫Inkscape هو محرِّر رسومات متجهّة متكامل على جميع المنصّات، وهو مشابه لبرامج CorelDraw و Adobe Illustrator وXara. يستفيد Inkscape من منتدى نشط للمكوّنات الإضافية وقاعدة رموز برمجية متقدّمة. تم تطوير الإصدار السابق من Inkscape، والذي تم إنشاء Inkscape من خلاله، في عام 1999. إنّ Inkscape هو تطبيقي المفضّل لإنشاء مواد العرض المستندة إلى المتجهات ومواد العرض المستندة إلى الأشكال المرقّطة.

ملاحظة بسيطة

لا تتوفّر ملفات SVG على نظام التشغيل Windows في إصدارات Internet Explorer قبل IE9. يستخدم متصفّح Internet Explorer تنسيقًا للرسومات المتجهّة يُعرف باسم VML، أي لغة ترميز الرسومات المتجهّة، والتي توفّر العديد من الوظائف نفسها التي توفّرها SVG. يمكن لرافييل إنشاء مَشاهد تستخدم SVG أو VML حيثما كان ذلك متاحًا. يُعدّ استخدام Raphaël طريقة سهلة لتوفير إمكانية استخدام عدّة منصات.

المراجع