Raphaël.js এর ভূমিকা

জেমস উইলিয়ামস

ভূমিকা

SVG, স্কেলেবল ভেক্টর গ্রাফিক্সের জন্য সংক্ষিপ্ত, বস্তু এবং দৃশ্য বর্ণনা করার জন্য একটি XML-ভিত্তিক ভাষা। SVG উপাদানগুলি ইভেন্টগুলিকে ফায়ার করতে পারে এবং জাভাস্ক্রিপ্ট দিয়ে স্ক্রিপ্ট করা যেতে পারে। SVG বিভিন্ন অন্তর্নির্মিত আদিম প্রকারের সাথে আসে যেমন বৃত্ত এবং আয়তক্ষেত্রের পাশাপাশি পাঠ্য প্রদর্শন করতে সক্ষম। একটি প্রযুক্তি হিসাবে SVG যদিও নতুন নয়, HTML5 এখন SVG অবজেক্টগুলিকে একটি <object> বা <embed> ট্যাগ ব্যবহার না করে সরাসরি একটি পৃষ্ঠায় এম্বেড করতে সক্ষম করে যা বর্তমানে ক্যানভাসের সাথে উপলব্ধ রয়েছে। Raphaël.js হল একটি জাভাস্ক্রিপ্ট লাইব্রেরি যা আপনাকে প্রোগ্রামে SVG দৃশ্য তৈরি করতে দেয়। এটি SVG দৃশ্য তৈরি করতে একটি ইউনিফাইড API ব্যবহার করে যেখানে এটি সমর্থিত হয় বা VML(ভেক্টর মডেলিং ল্যাঙ্গুয়েজ) যেখানে এটি এখন রয়েছে, যথা IE9 এর আগে ইন্টারনেট এক্সপ্লোরার সংস্করণ।

আপনার প্রথম দৃশ্য আঁকা

রাফায়েলের সাথে একটি সাধারণ দৃশ্য আঁকার মাধ্যমে শুরু করা যাক। আমরা একটি রাফায়েল বস্তুকে ইনস্ট্যান্টিয়েট করে দৃশ্যটি আঁকতে শুরু করি। এই ক্ষেত্রে, আমি কনস্ট্রাক্টর ব্যবহার করেছি যা একটি প্রদত্ত প্রস্থ এবং উচ্চতা সহ একটি প্রদত্ত HTML উপাদানে এটি সন্নিবেশ করায় তবে আপনি রাফায়েলকে 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 এর পরে স্থানাঙ্ক জোড়াটি বর্তমান অবস্থান থেকে সেই অবস্থানে একটি রেখা আঁকে। 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"});

অঙ্কন পাঠ্য

টেক্সট আঁকতে ক্ষমতা ছাড়া ইলাস্ট্রেশন থাকা সত্যিই বিরক্তিকর হবে, ভাগ্যক্রমে, রাফায়েল টেক্সট আঁকতে দুটি পদ্ধতি প্রদান করে। প্রথম পদ্ধতি, পাঠ্য, আঁকতে স্ট্রিং সহ ax এবং y স্থানাঙ্ক নেয়। পাঠ্য পদ্ধতি আপনাকে ফন্ট বা অন্যান্য প্রভাবগুলির উপর খুব বেশি নিয়ন্ত্রণ দেয় না। এটি ডিফল্ট আকারের সাথে ডিফল্ট ফন্টে আঁকে।

দ্বিতীয় পদ্ধতি, মুদ্রণ, পাঠ্যকে পাথের সংগ্রহ হিসাবে আঁকে। ফলস্বরূপ, আমরা পৃথক অক্ষর সংশোধন করতে সক্ষম হয়. নীচের উদাহরণে, আমরা একটি কমলা ফিল দিয়ে সংখ্যা 5 রঙ্গিন করেছি, একটি নীলাভ ভরাট দিয়ে রঙিন "ROCKS" করেছি এবং বোল্ড টেক্সট অনুকরণ করতে স্ট্রোকটিকে আরও ঘন করেছি৷ আমরা 40pts এর ফন্ট সাইজ সহ একটি কাস্টম ফন্ট ব্যবহার করে এটি করেছি।

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 ফন্ট রাফায়েলে নেই, বা সেই বিষয়ে কোনো ফন্টও নেই। এবং তাছাড়া, বেশিরভাগ ফন্ট ট্রুটাইপ(TTF) বা OpenType(OTF) ফর্ম্যাট ব্যবহার করে। এই ফর্ম্যাটগুলি থেকে রাফায়েল ব্যবহারযোগ্য কিছুতে পেতে, আমাদের Cufon নামক একটি টুল ব্যবহার করে তাদের রূপান্তর করতে হবে। কুফন আপনাকে রাফায়েলের সাথে ব্যবহারের জন্য একটি প্রদত্ত ফন্টের বিভিন্ন ফন্ট শৈলী (নিয়মিত, বোল্ড, ইটালিক, বোল্ড ইটালিক, ইত্যাদি) রপ্তানি করতে দেয়। কুফনকে বিস্তারিতভাবে কভার করা এই টিউটোরিয়ালের সুযোগের বাইরে। আরো বিস্তারিত জানার জন্য পূর্বোক্ত লিঙ্ক চেক করুন. আপনার অ্যাপ্লিকেশানগুলির জন্য নিরবচ্ছিন্ন ফন্টগুলির একটি দুর্দান্ত উত্স হল Google ফন্ট ডিরেক্টরি ৷

ঘটনা

SVG উপাদানগুলি সমস্ত প্রথাগত মাউস-ভিত্তিক ইভেন্টগুলিতে সরাসরি সদস্যতা নিতে পারে: ক্লিক, 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);
});
}

এসভিজি বনাম ক্যানভাস

প্রদত্ত যে তারা উভয়ই স্ক্রিনে অবজেক্ট আঁকার পদ্ধতি, এটি প্রায়শই অবিলম্বে স্পষ্ট হয় না কেন আপনার একটির উপরে একটি ব্যবহার করা উচিত। দুটি মাধ্যম ব্যাপকভাবে ভিন্ন পন্থা আছে. ক্যানভাস একটি তাৎক্ষণিক মোড API অনেকটা ক্রেয়ন দিয়ে আঁকার মতো। আপনি অঙ্কনের কিছু অংশ সাফ বা ধ্বংস করতে পারেন কিন্তু আপনি ডিফল্টরূপে পূর্ববর্তী স্ট্রোক প্রত্যাবর্তন বা পরিবর্তন করতে পারবেন না। ক্যানভাসও একটি রাস্টার বিটম্যাপ তাই ছবিগুলি স্কেল করার সময় এটি পিক্সেলেশনের সাপেক্ষে। অন্যদিকে SVG, পূর্বে উল্লিখিত হিসাবে একই স্তরের বিশদ সহ একাধিক রেজোলিউশন পরিবেশন করতে পারে এবং স্ক্রিপ্ট করা যেতে পারে।

গেম প্রোগ্রামিংয়ের জন্য SVG বা ক্যানভাস ব্যবহার করা মোটামুটি সহজ। আপনি ডেস্কটপ বা মোবাইলে স্থাপন করার পরিকল্পনা করছেন কিনা তার স্বাভাবিক সীমাবদ্ধতার পাশাপাশি, এটি সত্যিই স্প্রাইট গণনায় নেমে আসে। SVG নিজেকে ধার দেয় যাকে আমি লো-ফিডেল্টি গেম বলব। আমি সেগুলিকে গেম হিসাবে বর্ণনা করি যেগুলিতে বস্তুর সমসাময়িক গতিবিধি এবং স্প্রাইট অপসারণ এবং সৃষ্টি সীমিত রয়েছে। অনেক বোর্ড গেম যেমন দাবা, চেকার, বা ব্যাটলশিপ, সেইসাথে ব্ল্যাকজ্যাক, পোকার এবং হার্টসের মতো কার্ড গেমগুলি এই বিভাগে পড়ে। আরেকটি ঐক্যবদ্ধ থ্রেড হল যে এই গেমগুলির অনেকগুলিতে, একজন খেলোয়াড়কে একটি নির্বিচারে বস্তু সরাতে হবে এবং SVG-এর স্ক্রিপ্টিবিলিটি বস্তু বাছাইকে সহজ করে তোলে।

SVG-এর জন্য অথরিং টুল

SVG ব্যবহার করার মানে এই নয় যে আপনাকে হাত দিয়ে পথ তৈরি করতে হবে। ওপেন সোর্স এবং কমার্শিয়াল উভয় ধরনের বেশ কিছু টুল আছে যা আপনাকে SVG-এ এক্সপোর্ট করতে দেয়। আমি যে দুটি টুল ব্যাপকভাবে ব্যবহার করেছি এবং অত্যন্ত সুপারিশ করছি তা হল Inkscape এবং svg-edit ।

svg-সম্পাদনা

svg-edit হল জাভাস্ক্রিপ্টে লেখা একটি ব্রাউজার-ভিত্তিক SVG সম্পাদক। এটি একটি সীমিত ব্যবহারকারী ইন্টারফেস প্রদান করে যা জিআইএমপি বা এমএস পেইন্টের স্মরণ করিয়ে দেয়। বিশদ স্তরটি তুলনামূলকভাবে কম না হলে, আমি বেশিরভাগই SVG অঙ্কনগুলি তৈরি করার পরিবর্তে svg-edit ব্যবহার করেছি। svg-edit আপনাকে গ্রাফিকভাবে বা SVG কোড দিয়ে বস্তু তৈরি করতে দেয়।

ইঙ্কস্কেপ

Inkscape হল CorelDraw, Adobe Illustrator, এবং Xara-এর মতো একটি ক্রস-প্ল্যাটফর্ম পূর্ণাঙ্গ ভেক্টর গ্রাফিক্স সম্পাদক। একটি প্রাণবন্ত প্লাগইন সম্প্রদায় এবং একটি পরিপক্ক কোডবেস থেকে ইঙ্কস্কেপ সুবিধা। Inkscape-এর পূর্বসূরি, যেখান থেকে Inkscape কাঁটাচামচ তৈরি করা হয়েছিল, 1999 সালে তৈরি হয়েছিল। Inkscape হল ভেক্টর-ভিত্তিক এবং বিটম্যাপ সম্পদের জন্য আমার যাওয়ার আবেদন।

একটি মাইনর সরাইয়া

IE9 এর আগে ইন্টারনেট এক্সপ্লোরার সংস্করণে SVG উইন্ডোজে সমর্থিত নয়। IE VML, Vector Markup Language নামে একটি ভেক্টর গ্রাফিক্স ফরম্যাট ব্যবহার করে, যা SVG-এর মতো একই কার্যকারিতা প্রদান করে। রাফায়েল এমন দৃশ্য তৈরি করতে পারে যা SVG বা VML ব্যবহার করে যেখানে এটি সমর্থিত। রাফায়েল ব্যবহার করা ক্রস-প্ল্যাটফর্ম সমর্থন প্রদানের একটি সহজ উপায়।

তথ্যসূত্র