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

James Williams

शुरुआती जानकारी

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

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

चलिए, राफ़ाएल के साथ एक सिंपल सीन बनाने से शुरुआत करते हैं. हम 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"});

पथों की मदद से बेहतर आकृतियां बनाना

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

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

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

Veger फ़ॉन्ट Raphaël में नहीं है और न ही इस मामले के लिए कोई फ़ॉन्ट है. इसके अलावा, ज़्यादातर फ़ॉन्ट TrueType(TTF) या OpenType(OTF) फ़ॉर्मैट का इस्तेमाल करते हैं. Raphaël से इस्तेमाल किए जा सकने वाले फ़ॉर्मैट से इस्तेमाल करने के लिए, हमें उन्हें Cufon नाम के टूल का इस्तेमाल करके बदलना होगा. Cufon आपको किसी दिए गए फ़ॉन्ट (रेगुलर, बोल्ड, इटैलिक, बोल्ड इटैलिक वगैरह) की अलग-अलग स्टाइल स्टाइल एक्सपोर्ट करने की सुविधा देता है ताकि Raphaël के साथ इस्तेमाल किया जा सके. Cufon के बारे में ज़्यादा जानकारी देना, इस ट्यूटोरियल में शामिल नहीं है. ज़्यादा जानकारी के लिए ऊपर दिए गए लिंक पर जाएं. Google Font डायरेक्ट्री आपके ऐप्लिकेशन के लिए, बिना रुके हुए फ़ॉन्ट का सबसे अच्छा सोर्स है.

इवेंट

SVG एलिमेंट, माउस की मदद से होने वाले सभी पारंपरिक इवेंट की सीधे तौर पर सदस्यता ले सकते हैं: क्लिक, dblclick, माउसडाउन, माउसमूव, माउसआउट, माउसओवर, माउसअप, और होवर करना. Raphaël की मदद से, कैनवस या अलग-अलग एलिमेंट में अपनी तरीके जोड़ने की सुविधा मिलती है. इसलिए, यह कहा जाता है कि मोबाइल ब्राउज़र पर हाथ के जेस्चर जोड़ने से आपको कोई परेशानी नहीं होगी.

नीचे दिया गया स्निपेट, किसी दिए गए अक्षर को क्लिक करने पर उसे 45 डिग्री में घुमाने के लिए फ़ंक्शन को "ROCKS" में बाइंड करता है.

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 फ़ाइल का इस्तेमाल करें, जैसा कि पहले बताया गया है, एक जैसी जानकारी वाले कई रिज़ॉल्यूशन पूरे कर सकती है. साथ ही, इसे स्क्रिप्ट भी किया जा सकता है.

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

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

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

svg-edit

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

इंकस्केप

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

अ माइनर असाइड

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

रेफ़रंस