معرفی Raphaël.js

جیمز ویلیامز

مقدمه

SVG، مخفف Scalable Vector Graphics، یک زبان مبتنی بر XML برای توصیف اشیا و صحنه ها است. عناصر SVG می توانند رویدادها را اجرا کنند و می توانند با جاوا اسکریپت اسکریپت شوند. SVG با چندین نوع اولیه داخلی مانند دایره ها و مستطیل ها و همچنین قابلیت نمایش متن ارائه می شود. در حالی که SVG به عنوان یک فناوری جدید نیست، HTML5 اکنون اشیاء SVG را قادر می‌سازد که مستقیماً بدون استفاده از تگ <object> یا <embed> در یک صفحه جاسازی شوند و آن را با آنچه در حال حاضر در بوم موجود است، مطابقت دهد. Raphaël.js یک کتابخانه جاوا اسکریپت است که به شما امکان می دهد صحنه های SVG را به صورت برنامه ای ایجاد کنید. از یک API یکپارچه برای ایجاد صحنه های SVG در جایی که پشتیبانی می شود یا VML (Vector Modeling Language) در جایی که اکنون وجود دارد، یعنی نسخه های اینترنت اکسپلورر قبل از 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 به دنبال جفت مختصات خطی را از آن موقعیت فعلی به آن موقعیت می کشد. 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 در Raphaël نیست، و همچنین هیچ فونتی برای این موضوع وجود ندارد. و علاوه بر این، بیشتر فونت ها از فرمت TrueType (TTF) یا OpenType (OTF) استفاده می کنند. برای اینکه از آن فرمت‌ها به چیزی که توسط Raphaël قابل استفاده است تبدیل شویم، باید آنها را با استفاده از ابزاری به نام Cufon تبدیل کنیم. Cufon به شما امکان می دهد سبک های مختلف فونت یک فونت (عادی، پررنگ، مورب، مورب پررنگ، و غیره) را برای استفاده با Raphaël صادر کنید. پوشش جزئیات Cufon خارج از محدوده این آموزش است. برای جزئیات بیشتر لینک فوق را بررسی کنید. یک منبع عالی از فونت های بدون محدودیت برای برنامه های شما، فهرست فونت گوگل است.

رویدادها

عناصر SVG می‌توانند مستقیماً در تمام رویدادهای سنتی مبتنی بر ماوس مشترک شوند: کلیک، dblclick، پایین‌آوردن ماوس، جابجایی ماوس، خروج ماوس، جابجایی ماوس، موس و شناور . 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 یک API حالت فوری است که بسیار شبیه طراحی با مداد رنگی است. شما می توانید بخشی از نقاشی را پاک یا از بین ببرید، اما به طور پیش فرض نمی توانید یک ضربه قبلی را برگردانید یا تغییر دهید. Canvas همچنین یک بیت مپ شطرنجی است، بنابراین هنگام مقیاس بندی تصاویر، بسیار در معرض پیکسل بندی قرار می گیرد. SVG از طرف دیگر، همانطور که قبلا ذکر شد می تواند چندین رزولوشن را با همان سطح از جزئیات ارائه دهد و می تواند اسکریپت شود.

استفاده از SVG یا Canvas برای برنامه نویسی بازی بسیار ساده است. علاوه بر محدودیت‌های معمولی که آیا قصد دارید روی دسکتاپ یا تلفن همراه مستقر شوید، واقعاً به تعداد sprite مربوط می‌شود. SVG خود را به چیزی که من آن را بازی‌های با کیفیت پایین می‌نامم، می‌رساند. من آن‌ها را بازی‌هایی توصیف می‌کنم که حرکت همزمان اشیاء و حذف و ایجاد جن را محدود می‌کنند. بسیاری از بازی های رومیزی مانند شطرنج، چکرز یا کشتی جنگی و همچنین بازی های کارتی مانند بلک جک، پوکر و قلب در این دسته قرار می گیرند. یکی دیگر از موضوعات متحد کننده این است که در بسیاری از این بازی ها، بازیکن باید یک شی دلخواه را جابجا کند و قابلیت اسکریپت SVG انتخاب اشیا را آسان می کند.

ابزارهای تالیف برای SVG

استفاده از SVG به هیچ وجه به این معنی نیست که شما باید مسیرها را با دست ایجاد کنید. چندین ابزار، هم منبع باز و هم تجاری وجود دارد که به شما امکان می دهد به SVG صادر کنید. دو ابزاری که من به طور گسترده استفاده کرده ام و به شدت توصیه می کنم Inkscape و svg-edit هستند.

svg-edit

svg-edit یک ویرایشگر SVG مبتنی بر مرورگر است که با جاوا اسکریپت نوشته شده است. این یک رابط کاربری محدود ارائه می دهد که یادآور GIMP یا MS Paint است. مگر اینکه سطح جزئیات نسبتاً پایین باشد، من بیشتر از svg-edit برای تغییر نقشه های SVG به جای ایجاد آنها استفاده کرده ام. svg-edit به شما امکان می دهد اشیاء را به صورت گرافیکی یا با کد SVG ایجاد کنید.

Inkscape

Inkscape یک ویرایشگر گرافیکی وکتور تمام عیار است که شبیه به CorelDraw، Adobe Illustrator و Xara است. Inkscape از یک جامعه پلاگین پر جنب و جوش و یک پایگاه کد بالغ سود می برد. سلف Inkscape، که Inkscape از آن جدا شد، در سال 1999 توسعه یافت. Inkscape برنامه کاربردی من برای دارایی های مبتنی بر برداری و بیت مپ است.

یک جزئی به کنار

SVG در نسخه های اینترنت اکسپلورر قبل از IE9 در ویندوز پشتیبانی نمی شود. اینترنت اکسپلورر از یک فرمت گرافیک برداری به نام VML، Vector Markup Language استفاده می‌کند که بسیاری از عملکردهای SVG را ارائه می‌دهد. Raphaël می تواند صحنه هایی را ایجاد کند که از SVG یا VML در جایی که پشتیبانی می شود استفاده می کنند. استفاده از Raphaël یک راه آسان برای ارائه پشتیبانی بین پلتفرمی است.

مراجع