Raphaël.js के बारे में जानकारी

James Williams

परिचय

SVG, स्केलेबल वेक्टर ग्राफ़िक्स का छोटा नाम है. यह ऑब्जेक्ट और सीन के बारे में बताने के लिए, एक्सएमएल पर आधारित भाषा है. एसवीजी एलिमेंट, इवेंट ट्रिगर कर सकते हैं और इन्हें JavaScript के साथ स्क्रिप्ट किया जा सकता है. एसवीजी में कई तरह के प्राइमिटिव टाइप पहले से मौजूद होते हैं. जैसे, सर्कल और रेक्टैंगल. साथ ही, इसमें टेक्स्ट भी दिखाया जा सकता है. एसवीजी एक नई टेक्नोलॉजी नहीं है. हालांकि, एचटीएमएल5 की मदद से, एसवीजी ऑब्जेक्ट को सीधे तौर पर पेज में एम्बेड किया जा सकता है. इसके लिए, <object> या <embed> टैग का इस्तेमाल नहीं करना पड़ता. इससे, एसवीजी को कैनवस के साथ उपलब्ध सुविधाओं के बराबर लाया जा सकता है. Raphaël.js एक JavaScript लाइब्रेरी है. इसकी मदद से, प्रोग्राम के हिसाब से एसवीजी सीन बनाए जा सकते हैं. यह यूनिफ़ाइड एपीआई का इस्तेमाल करके, उन जगहों पर एसवीजी सीन बनाता है जहां यह काम करता है या जहां यह काम नहीं करता है वहां VML(वेक्टर मॉडलिंग लैंग्वेज) का इस्तेमाल करता है. जैसे, IE9 से पहले के वर्शन वाले Internet Explorer.

अपना पहला सीन ड्रॉ करना

चलिए, Raphaël की मदद से एक आसान सीन बनाकर शुरुआत करते हैं. हम Raphaël ऑब्जेक्ट को इंस्टैंशिएट करके, सीन को ड्रॉ करना शुरू करते हैं. इस मामले में, मैंने उस कन्स्ट्रक्टर का इस्तेमाल किया है जो इसे किसी दिए गए एचटीएमएल एलिमेंट में, दी गई चौड़ाई और ऊंचाई के साथ डालता है. हालांकि, आपके पास 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, कर्व के ओरिजनल और फ़ाइनल साइज़ (स्केलिंग के बाद) को ध्यान में रखता है. साथ ही, यह आसानी से दिखने वाले कर्व को रेंडर करने के लिए, बीच के पॉइंट का हिसाब लगाता है.

नीचे दिए गए कोड और फ़ोटो में, पाथ की मदद से बनाया गया एक रेक्टैंगल और क्लोज़्ड कर्व दिखाया गया है. M के बाद कॉर्डिनेट डालने पर, पेन उस पॉइंट पर चला जाता है. L के बाद कॉर्डिनेट डालने पर, पेन मौजूदा पॉइंट से उस पॉइंट तक लाइन खींचता है. S के बाद कॉर्डिनेट डालने पर, पेन दिए गए कंट्रोल पॉइंट और एंडपॉइंट के साथ रिलेटिव कॉर्डिनेट का इस्तेमाल करके, स्मूद बेज़ियर कर्व बनाता है. 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"});

ड्रॉइंग टेक्स्ट

टेक्स्ट डाले बिना इलस्ट्रेशन बनाना बहुत ही बोरिंग होता है. ज़रूरी है कि आपके पास टेक्स्ट डालने का विकल्प हो. ज़रूरी है कि आपके पास टेक्स्ट डालने का विकल्प हो. पहला तरीका, टेक्स्ट, स्ट्रिंग के साथ-साथ 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) फ़ॉर्मैट का इस्तेमाल किया जाता है. इन फ़ॉर्मैट को Cufon टूल का इस्तेमाल करके, Raphaël के साथ काम करने वाले फ़ॉर्मैट में बदलना होगा. Cufon की मदद से, किसी फ़ॉन्ट की अलग-अलग फ़ॉन्ट स्टाइल (नॉर्मल, बोल्ड, इटैलिक, बोल्ड इटैलिक वगैरह) को Raphaël के साथ इस्तेमाल करने के लिए एक्सपोर्ट किया जा सकता है. इस ट्यूटोरियल में, Cufon के बारे में ज़्यादा जानकारी नहीं दी गई है. ज़्यादा जानकारी के लिए, ऊपर दिए गए लिंक पर जाएं. Google फ़ॉन्ट डायरेक्ट्री, आपके ऐप्लिकेशन के लिए बिना किसी शुल्क के इस्तेमाल किए जा सकने वाले फ़ॉन्ट का एक बेहतरीन सोर्स है.

इवेंट

एसवीजी एलिमेंट, माउस पर होने वाले सभी पारंपरिक इवेंट की सदस्यता सीधे ले सकते हैं: 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, इमीडिएट मोड एपीआई है, जो क्रेयॉन से ड्रॉ करने जैसा है. ड्रॉइंग के कुछ हिस्से को मिटाया या नष्ट किया जा सकता है. हालांकि, डिफ़ॉल्ट रूप से, पिछले स्ट्रोक को वापस नहीं लाया जा सकता या उसमें बदलाव नहीं किया जा सकता. कैनवस भी एक रास्टर बिटमैप है. इसलिए, इमेज को स्केल करने पर, इसमें पिक्सलेशन की समस्या हो सकती है. दूसरी ओर, जैसा कि पहले बताया गया है कि एसवीजी, एक ही लेवल की जानकारी के साथ कई रिज़ॉल्यूशन दिखा सकता है और इसे स्क्रिप्ट किया जा सकता है.

गेम प्रोग्रामिंग के लिए SVG या Canvas में से किसी एक का इस्तेमाल करना काफ़ी आसान है. डेस्कटॉप या मोबाइल पर डिप्लॉय करने की सामान्य समस्याओं के अलावा, स्प्राइट की संख्या भी एक अहम बात है. SVG का इस्तेमाल, कम क्वालिटी वाले गेम बनाने के लिए किया जा सकता है. हम ऐसे गेम को सीमित गति वाले गेम कहते हैं. इनमें एक साथ कई ऑब्जेक्ट नहीं चलते और स्प्राइट को हटाया और बनाया नहीं जा सकता. इस कैटगरी में कई बोर्ड गेम, जैसे कि शतरंज, चेकर्स या बैटलशिप के साथ-साथ ब्लैकजैक, पोकर, और हार्ट्स जैसे कार्ड गेम भी शामिल हैं. इन गेम में एक और बात कॉमन है. इनमें से कई गेम में, खिलाड़ी को किसी भी ऑब्जेक्ट को एक जगह से दूसरी जगह ले जाना होता है. SVG की स्क्रिप्ट की सुविधा की मदद से, ऑब्जेक्ट को आसानी से चुना जा सकता है.

SVG के लिए ऑथरिंग टूल

एसवीजी का इस्तेमाल करने का मतलब यह नहीं है कि आपको मैन्युअल तरीके से पाथ बनाने होंगे. ऐसे कई टूल हैं जिनकी मदद से, SVG में एक्सपोर्ट किया जा सकता है. इनमें ओपन सोर्स और कमर्शियल, दोनों तरह के टूल शामिल हैं. मैंने इन दो टूल का ज़्यादा इस्तेमाल किया है और इनका सुझाव दिल से देता हूं: Inkscape और svg-edit.

svg-edit

svg-edit, ब्राउज़र पर काम करने वाला SVG एडिटर है. इसे JavaScript में लिखा गया है. इसमें GIMP या MS Paint जैसा सीमित यूज़र इंटरफ़ेस मिलता है. मैंने ज़्यादातर मामलों में, SVG ड्रॉइंग बनाने के बजाय, उनमें बदलाव करने के लिए svg-edit का इस्तेमाल किया है. हालांकि, ऐसा तब किया जाता है, जब जानकारी का लेवल कम हो. svg-edit की मदद से, ऑब्जेक्ट को ग्राफ़िक के तौर पर या SVG कोड की मदद से बनाया जा सकता है.

Inkscape

Inkscape, एक क्रॉस-प्लैटफ़ॉर्म वेक्टर ग्राफ़िक एडिटर है. यह CorelDraw, Adobe Illustrator, और Xara जैसा ही है. Inkscape को प्लग इन की एक शानदार कम्यूनिटी और बेहतर कोडबेस का फ़ायदा मिलता है. Inkscape के पहले वर्शन को 1999 में डेवलप किया गया था. वेक्टर-आधारित और बिटमैप एसेट के लिए, मेरा पसंदीदा ऐप्लिकेशन Inkscape है.

एक छोटी सी बात

Windows पर, IE9 से पहले के Internet Explorer वर्शन में SVG काम नहीं करता. IE, वेक्टर ग्राफ़िक्स फ़ॉर्मैट का इस्तेमाल करता है. इसे वेक्टर मार्कअप लैंग्वेज या VML कहा जाता है. यह SVG की तरह ही काम करता है. Raphaël, SVG या VML का इस्तेमाल करके ऐसे सीन बना सकता है जिनमें ये फ़ॉर्मैट काम करते हैं. Raphaël का इस्तेमाल करके, क्रॉस-प्लैटफ़ॉर्म सहायता देना आसान है.

रेफ़रंस