מבוא ל-Raphaël.js

James Williams
James Williams
X דף הבית

מבוא

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

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

נתחיל בציור סצנה פשוטה עם רפאל. אנחנו מתחילים לצייר את הסצנה על ידי יצירת אובייקט של Raphaal. במקרה הזה, השתמשתי בבונה שמוסיף אותו לרכיב 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"});

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

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

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

שרטוט טקסט

העובדה שאיורים ללא יכולת לצייר טקסט היא ממש משעממת, למזלנו, ראפאל מספק שתי שיטות לצייר טקסט. השיטה הראשונה, text, לוקחת קואורדינטות 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). כדי לקבל מהפורמטים האלה משהו שאפשר להשתמש בו ב-Raphaël, אנחנו צריכים להמיר אותם באמצעות כלי שנקרא Cufon. Cufon מאפשר לך לייצא את סגנונות הגופנים השונים של גופן נתון (רגיל, מודגש, נטוי, מודגש נטוי וכו') לשימוש ב-Raphaël. המדריך הזה לא מרחיב בנושא Cufon. לפרטים נוספים, ראו את הקישור להודעה שלמעלה. מקור נהדר לגופנים לא מקובצים לאפליקציות שלכם הוא Google Font Directory.

אירועים

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

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

כלי עריכה ל-SVG

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

svg-edit

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

רוחב דיו

Inkscape הוא כלי לעריכת גרפיקה וקטורית מכל הפלטפורמות, בדומה ל-Coreldraw, Adobe Illustrator ו-Xara. היתרונות של Inkscape בזכות קהילה תוססת של יישומי פלאגין ו-codebase בוגרים. דגם הקודם של Inkscape עבר פיתוח ב-1999, שממנו הופץ Inkscape. Inkscape היא האפליקציה העיקרית שלי עבור נכסים מבוססי-וקטורים ונכסי מפת סיביות (bitmap).

קטן בצד

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

קובצי עזר