מבוא ל-Raphaël.js

James Williams
James Williams
X דף הבית

מבוא

SVG, ראשי תיבות של Scalable Vector Graphics, היא שפה מבוססת-XML לתיאור אובייקטים וסצנות. אלמנטים של SVG יכולים להפעיל אירועים, ואפשר לכתוב להם סקריפטים ב-JavaScript. ב-SVG יש כמה סוגים מובנים של פריטים פרימיטיביים, כמו עיגולים ומלבנים, ואפשר גם להציג טקסט. הטכנולוגיה של SVG היא לא חדשה, אבל HTML5 מאפשר עכשיו להטמיע אובייקטים של SVG בדף ישירות, בלי להשתמש בתג <object> או <embed>, כך שהם תואמים למה שזמין כרגע ב-Canvas. Raphaël.js היא ספריית JavaScript שמאפשרת ליצור סצנות SVG באופן פרוגרמטי. הוא משתמש בממשק API מאוחד כדי ליצור סצנות SVG במקומות שבהם הוא נתמך, או VML(Vector Modeling Language) במקומות שבהם הוא נתמך כרגע, כלומר גרסאות Internet Explorer לפני IE9.

ציור הסצנה הראשונה

נתחיל בציור של סצנה פשוטה באמצעות Raphaël. כדי להתחיל לצייר את הסצנה, יוצרים אובייקט Raphaël. במקרה הזה, השתמשתי ב-constructor שמוסיף אותו לרכיב HTML נתון עם רוחב וגובה נתונים, אבל אפשר גם לגרום ל-Raphaël לצרף את האובייקט ל-DOM (Document Object Model). לאחר מכן, יצרתי מלבן על ידי ציון המיקומים הרצויים של 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"});

ציור צורות מתקדמות באמצעות נתיבים

נתיב הוא סדרה של הוראות שבהן משתמש ה-renderer כדי ליצור אובייקטים. ציור באמצעות נתיב דומה לציור בעט על דף נייר ענק. אפשר להורות על הרמת העט מהנייר ותנועה למיקום אחר(move to), על ציור קו(line to) או על ציור עקומה(arc to). בעזרת נתיבים אפשר ליצור ב-SVG אובייקטים עם אותה רמת פירוט, ללא קשר לסולם. כשנותנים הוראה לצייר עקומה, המערכת של SVG מביאה בחשבון את הגודל המקורי והסופי הרצוי של העקומה (אחרי שינוי קנה המידה), ומחשבת באופן מתמטי את הנקודות הביניים כדי ליצור עקומה חלקה.

בקוד ובתרשים שבהמשך מוצגים מלבן וקשת סגורה שמצוירים באמצעות נתיבים. האות M ואחריה קואורדינטות מעבירות את העט למיקום הזה, האות L ואחריה זוג קואורדינטות מציירות קו מהמיקום הנוכחי למיקום הזה. האות s מצייר עקומת Bezier חלקה עם נקודת בקרה ונקודת קצה נתונות עם קואורדינטות יחסיות. 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"});

ציור טקסט

איורים בלי היכולת לצייר טקסט יהיו משעממים מאוד, ולמזלכם, ב-Raphael יש שתי שיטות לציור טקסט. השיטה הראשונה, text, מקבלת קואורדינטות x ו-y יחד עם המחרוזת שרוצים לצייר. בשיטת הטקסט אין לכם שליטה רבה על הגופן או על אפקטים אחרים. הוא מצויר בגופן ברירת המחדל ובגודל ברירת המחדל.

השיטה השנייה, print, מצייר את הטקסט כקבוצה של נתיבים. כתוצאה מכך, אנחנו יכולים לשנות אותיות ספציפיות. בדוגמה הבאה, צבענו את המספר 5 במילוי כתום, צבענו את המילה 'ROCKS' במילוי כחלחל והפכנו את הקו לעבה יותר כדי לדמות טקסט מודגש. עשינו זאת באמצעות גופן מותאם אישית בגודל 40pt.

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 בפירוט. פרטים נוספים זמינים בקישור שצוין למעלה. מאגר הגופנים של Google הוא מקור מצוין לגופנים ללא הגבלות לשימוש באפליקציות.

אירועים

רכיבי SVG יכולים להירשם ישירות לכל האירועים המסורתיים שמבוססים על העכבר: click,‏ dblclick,‏ mousedown,‏ mousemove,‏ mouseout,‏ mouseover,‏ mouseup ו-hover. ב-Raphael יש אפשרות להוסיף שיטות משלכם ללוח הציור או לרכיבים בודדים, כך שבתאוריה אין שום דבר שמונע מכם להוסיף תנועות לדפדפנים לנייד.

קטע הקוד הבא מקשר פונקציה כדי לסובב אות נתונה ב-'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 הוא ממשק API במצב מיידי, שדומה מאוד לציור עם צבעים. אפשר למחוק או להשמיד חלק מהציור, אבל אי אפשר לחזור לקו קודם או לשנות אותו כברירת מחדל. גם הדפסה על קנבס היא תמונת רסטר, ולכן היא נוטה מאוד ליצירת פיקסלים כשמשנים את הגודל של התמונות. לעומת זאת, קובצי SVG, כפי שצוין קודם, יכולים לשמש ברזולוציות שונות עם אותה רמת פירוט, ואפשר לכתוב להם סקריפטים.

קל מאוד להחליט אם להשתמש ב-SVG או ב-Canvas לתכנות משחקים. מלבד האילוצים הרגילים של פריסה למחשב או לנייד, העניין בעצם מסתכם במספר ה-sprites. קובצי SVG מתאימים למה שאני מכנה משחקים באיכות נמוכה. אני מגדיר אותם כמשחקים עם תנועה מוגבלת של אובייקטים בו-זמנית, והסרה ויצירה של ספרייטים. קטגוריה זו כוללת משחקי לוח רבים כמו שחמט, דמקה או ספינת קרב, וגם משחקי קלפים כמו בלאק ג'ק, פוקר ולבבות. מאפיין נוסף שמשותף למשחקים האלה הוא שברבים מהם השחקן צריך להזיז אובייקט שרירותי, והיכולת לכתוב סקריפטים ב-SVG מאפשרת לבחור אובייקטים בקלות.

כלים ליצירת קובצי SVG

השימוש ב-SVG לא אומר שאתם צריכים ליצור נתיבים באופן ידני. יש כמה כלים, גם של קוד פתוח וגם מסחריים, שמאפשרים לייצא לקובץ SVG. שני הכלים שבהם השתמשתי הרבה ואני ממליץ עליהם מאוד הם Inkscape ו-svg-edit.

svg-edit

svg-edit הוא עורך SVG מבוסס-דפדפן שנכתב ב-JavaScript. יש לו ממשק משתמש מוגבל שמזכיר את GIMP או את MS Paint. בדרך כלל, השתמשתי ב-svg-edit כדי לשנות את הציורים ב-SVG ולא כדי ליצור אותם, אלא אם רמת הפירוט הייתה נמוכה יחסית. בעזרת svg-edit אפשר ליצור אובייקטים באופן גרפי או באמצעות קוד SVG.

Inkscape

Inkscape הוא עורך גרפיקה וקטורי מלא בפלטפורמות שונות, בדומה ל-CorelDraw, ‏ Adobe Illustrator ו-Xara. ל-Inkscape יש קהילה תוססת של יוצרים וקוד בסיס מפותח. קודמתו של Inkscape, שממנה התפתח Inkscape, פותחה בשנת 1999. Inkscape היא האפליקציה המועדפת עליי ליצירת נכסים מבוססי-וקטורים ונכסי בייטמאפ.

הערה צדדית קטנה

אין תמיכה ב-SVG ב-Windows בגרסאות Internet Explorer לפני IE9. ב-IE נעשה שימוש בפורמט של גרפיקה וקטורית שנקרא VML‏, Vector Markup Language, שמספק פונקציונליות דומה לזו של SVG. אפשר ליצור ב-Raphaël סצנות שמשתמשות ב-SVG או ב-VML במקומות שבהם יש תמיכה בפורמטים האלה. שימוש ב-Raphaël הוא דרך קלה לספק תמיכה בפלטפורמות שונות.

קובצי עזר