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

James Williams

مقدمة

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

رسم المشهد الأول

لنبدأ برسم مشهد بسيط مع "رافاييل". نبدأ في رسم المشهد من خلال إنشاء مثيل لكائن "رافاييل". في هذه الحالة، استخدمت الدالة الإنشائية التي تدرجها في عنصر 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"});

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

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

توضح التعليمة البرمجية والشكل أدناه مستطيلاً وإغلاق منحنيًا مرسومًا بمسارات. يؤدي الحرف M متبوعًا بالإحداثيات إلى تحريك القلم إلى هذا الموضع، ويرسم الحرف L متبوعًا بزوج إحداثي خطًا من هذا الموضع الحالي إلى ذلك الموضع. يرسم منحنى "بيزيير" أم لا مع نقطة تحكم معيّنة ونقطة نهاية بإحداثيات نسبية. يغلق 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"});

رسم نص

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

الطريقة الثانية، وهي الطباعة، ترسم النص كمجموعة من المسارات. وبالتالي، يمكننا تعديل الحروف الفردية. في المثال أدناه، قمنا بتلوين الرقم 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 ليس بخط رافايل، ولا يوجد أي خط لهذه المسألة. وإلى جانب ذلك، تستخدم معظم الخطوط تنسيق TrueType(TTF) أو OpenType(OTF). للانتقال من هذه التنسيقات إلى محتوى يمكن أن يستخدمه "رافايل"، يجب أن نحوّلها باستخدام أداة تُعرف باسم Cufon. يسمح لك Cufon بتصدير أنماط الخطوط المختلفة لخط معين (عادي، غامق، مائل، غامق مائل، إلخ) لاستخدامها مع Raphaèl. لن نتناول في هذا البرنامج التعليمي كيفية استخدام Cufon بالتفصيل. تحقق من الرابط أعلاه لمزيد من التفاصيل. يعد Google Font Directory مصدرًا رائعًا للخطوط الخالية من الخطوط في تطبيقاتك.

فعاليات

يمكن لعناصر SVG الاشتراك مباشرةً في جميع الأحداث التقليدية المستندة إلى الماوس، ومنها: click وdblclick وMousedown وMousemove وMouseout وتمرير الماوس ورفع الماوس والتمرير. يتيح "رافايل" إمكانية إضافة طُرق خاصة بك إلى اللوحة أو إلى عناصر فردية، وبالتالي من الناحية النظرية، ليس هناك ما يمنع من إضافة إيماءات إلى المتصفحات المتوافقة مع الأجهزة الجوّالة.

يربط المقتطف أدناه دالة لتدوير حرف معين في "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) لما أسميه الألعاب منخفضة الدقة. أصفها بالألعاب التي تحتوي على حركة متزامنة محدودة للعناصر وإزالة الرموز المتحركة وإنشاءها. تندرج ضمن هذه الفئة العديد من الألعاب اللوحية، مثل الشطرنج أو Checkers أو Battleship، بالإضافة إلى ألعاب البطاقات مثل BlackJack وPoker و Hearts. هناك سلسلة موحّدة أخرى وهي أنه في العديد من هذه الألعاب، سيحتاج اللاعب إلى نقل عنصر عشوائي، وتسهّل قابلية كتابة الرسومات الموجّهة التي يمكن تغيير حجمها (SVG) اختيار العناصر.

أدوات تأليف الرسومات الموجّهة التي يمكن تغيير حجمها (SVG)

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

svg-edit

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

خطوط الحبر

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

جانب بسيط

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

المراجع