ממשק המשתמש Yahoo! בלוג (YUIBlog)

ב 3 Yui גלריה: RaphaelJS מאט טיילור של מודול

RaphaelJS היא ספריית JavaScript עוצמה המנהלת SVG שרטוטים ואנימציות. היא מאפשרת לך ליצור בקלות בדים SVG ו לצייר צורות בסיסיות ושבילים בקלות רבה, גם קיבוץ אותן קבוצות ויישום שינויים לאחד או וקטורים רבים. ניתן לצייר צורות, מניפולציות בתמונות, ואת הנפש הכל. RaphaelJS מספק נחמד API כדי ליצור ולשנות אלמנטים SVG בקלות.

בעוד ספריה מרשימה, אבל מצאתי שאני יכול להוסיף כמה תכונות חשובות אלמנטים של הספרייה RaphaelJS עם YUI3. התחלתי את המאמצים הללו עם החדש מודול RaphaelJS גלריה .

טוען RaphaelJS עצלן ותוספות

התכונה הראשונה היא טעינה עצלנית של הספרייה לא רק RaphaelJS, אבל כל RaphaelJS תוספים ייתכן שיהיה עליך. מודול גלריה RaphaelJS רק לטעון את הקבצים הללו, כאשר אתה מצהיר תשתמש אותם בתוך ארגז חול Yui. לדוגמה:

 
 Yui ({הגלריה: "גלריה-2010.09.22-20-15 '}). השימוש (" גלריה רפאל ", הפונקציה (Y) {
 
	 Y.Raphael (). להשתמש (פונקציה (רפאל) {
		
		 / / להשתמש רפאל כאן בדיוק כמו שהיית עושה מחוץ Yui
		 var נייר = רפאל ("myPaper ', 500, 500);
 
	 });
 
 });

אם אתה משתמש ב-plugins RaphaelJS, ציין דרכם במערך ולשלוח כי הפרמטר הראשון Y.Raphael () להשתמש () function.:

 
 Yui ({הגלריה: "גלריה-2010.09.22-20-15 '}). השימוש (" גלריה רפאל ", (Y) פונקציה {myPlugins var = [' plugins / raphael.awesomePlugin.js", "תוספים / רפאל . wickedPlugin.js '],. Y.Raphael () שימוש (myPlugins, הפונקציה (רפאל) {/ / להשתמש רפאל כאן בדיוק כמו שהיית עושה מחוץ נייר var Yui = רפאל ("myPaper', 500, 500): / / "נייר" יהיה כל פונקציות חדשות שנוספו על ידי תוספים שלך עכשיו});}); 

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

אישית אירועים

לאחר יצירת מרחב הציור במטרה רפאל, אז אתה יכול מיד להגיע אל הציור. כשאתה מתקשר שיטות כמו rect , circle , ואת path על מרחב הציור, תקבל בחזרה אובייקטים המייצגים וקטורים SVG. בדרך כלל, תהיה לך גישה לגורמים המתאימים של DOM דרך node רכוש. לדוגמה:

 
 var נייר = רפאל ("myPaper ', 500, 500);
 var מרובע = paper.rect (0, 0, 100, 100);

זה יוצר אובייקט וקטור מלבני על הקואורדינטות [0,0] עם רוחב וגובה של 100 פיקסלים. יש לך גישה לאלמנט DOM הבסיסית (שהיא SVG rect אלמנט) כך:

 
 var rectNode = square.node;
 rectNode.onclick = function () {
	 alert ("מזל טוב, אתה לוחץ על ריבוע!");
 };

אם אתה משתמש Yui נלהב, אתה בטח רוצה משהו יותר מזה. מה עם מובנה Y.Node גם כן? בדיוק כמו node נכס מתייחס HTMLElement מאחורי האובייקט SVG, $node נכס מתייחס Y.Node מעטפת עבור רכיב זה. אז אתה יכול לעשות דברים כאלה:

 
 מרובע. $ node.on ("במעבר עכבר", function () {
	 alert ("מזל טוב, אתה יכול להזיז עכבר!");
 });

בוא ננסה משהו מורכב יותר עכשיו. האינטראקציה עם וקטור אחד צריך להיות מסוגל לגרום וקטורים נמשך אחרות לעדכן את סגנונם, נכון? מה דעתך ליצור כמה שורות שכל לעבד הצבעים שלהם תלויים בו העכבר נמצא על מעגל בדף:

 
 var נייר = רפאל ("rcanvas ', 600, 800);
 
 . circ var = paper.circle (350, 200, 100) attr ({למלא: "ורוד", שבץ מוחי: "שחור"});
 
 / / לדחוף חבורה של מלבנים למערך
 var i = 0; מלבנים = [];
 עבור (; i <10: אני + +) {
	 rectangles.push (paper.rect (0, 40 * i, 200, 20) attr ({למלא: "אדום", שבץ: "צהובה"}.));
 }
 
 / / לולאה באמצעות מלבנים, והוסיף ספציפיים mousemove מטפלים מעגל לכל אחת
 Y.Array.each (מלבנים, תפקוד (rect, מדד) {
	 var i = אינדקס + 1;
	 circ. $ node.on ("mousemove", פונקציה (EVT) {
		 / / צבע המילוי הוא דינמי, תלוי במיקום של מלבן זה
		 / / במערך כמו גם את המיקום של העכבר
		 var = אם circ.attrs.cx - circ.attrs.r,
			 RT = 2 * circ.attrs.r + אם,
			 x = evt.clientX - אם,
			 למעלה = circ.attrs.cy - circ.attrs.r,
			 BTM = 2 * circ.attrs.r + למעלה,
			 y = evt.clientY - למעלה;
			 אדום = (((128 * x) / (2 * circ.attrs.r)) -1) * i / 6,
			 ירוק = 256 - ((((128 * x) / (2 * circ.attrs.r)) -1) * i / 6),
			 כחול = (((128 * y) / (2 * circ.attrs.r)) -1) * i / 6;
		 rect.attr ("מלא", "RGB (" אדום + + ',' + ירוק + ',' כחול + + ')');
	 });
 });

דוגמה זו פועלת כאן , אבל כפי שאתה יכול לראות את התמונות הבאות, את הצבע של כל עמודה תלוי מיקום העכבר על העיגול, כמו גם סדר הבר.

תלוי איפה את סמן העכבר נמצא על המעגל, לשנות את הצבעים בר בנפרד.

אז אתה יכול לראות את זה $node הוא קיצור דרך שימושי, אבל שום דבר מרהיב. זה באמת יהיה נפלא אם כל אובייקט SVG אתה יוצר עם RaphaelJS יכול לפטר אירועים מותאמים אישית . שתאפשר אלמנטים נפרדים שלך ציור לירות אירועים מותאמים אישית, וכל דבר בדף יכול להקשיב ולהגיב. זה יכול להיות שימושי במובנים רבים. בתור התחלה, הוא מספק אינטראקציות בין עשירים הציורים שלך. אינטראקציות משתמשים עם וקטור אפשר עכשיו הודעה על וקטורים אחרים של אינטראקציה על פי דרישה. זה אומר שאתה יכול לירות programatically אירועים מן הציורים שלך כאשר תנאים מסוימים הם נפגשו. לא זו בלבד שהדבר מאפשר את הציורים שלך להודיע ​​וקטורים אחרים, אבל שום דבר בדף יכול להקשיב פנימה

 
 var נייר = רפאל ("rcanvas ', 600, 800);
 
 . circ var = paper.circle (350, 200, 100) attr ({למלא: "ורוד", שבץ מוחי: "שחור"});
 
 / / מה שהופך מערכים של מלבנים ומעגלים
 var i = 0, מלבנים = [], עיגולים = [];
 עבור (; i <10: אני + +) {
	 rectangles.push (paper.rect (0, 40 * אני, אני 40 *, 20) attr ({למלא: "אדום", שבץ: "צהובה"}.));
	 circles.push (paper.circle (0,0,20) להסתיר ().);
 }
 Y.Array.each (מלבנים, תפקוד (rect, מדד) {
	 var i = אינדקס + 1;
	 circ. $ node.on ("mousemove", פונקציה (EVT) {
		 var = אם circ.attrs.cx - circ.attrs.r,
			 RT = 2 * circ.attrs.r + אם,
			 x = evt.clientX - אם,
			 למעלה = circ.attrs.cy - circ.attrs.r,
			 BTM = 2 * circ.attrs.r + למעלה,
			 y = evt.clientY - למעלה;
			 newWidth = (((256 * x) / (2 * circ.attrs.r)) -1) * i / 6,
			 אדום = (((128 * x) / (2 * circ.attrs.r)) -1) * i / 6,
			 ירוק = 256 - ((((128 * x) / (2 * circ.attrs.r)) -1) * i / 6),
			 כחול = (((128 * y) / (2 * circ.attrs.r)) -1) * i / 6;
		 / / הזמן הזה, לא רק לשנות את הצבע, אלא גם את רוחב המלבן
		 rect.attr ({
			 רוחב: newWidth,
			 למלא: "RGB (" אדום + + ',' + ירוק + ',' כחול + + ")"
		 });
		 / / אש אירוע מותאם אישית להודיע ​​כי רוחב המלבן השתנה
		 rect.fire ('רוחב, השתנה ", {רוחב: newWidth, מקור: rect, כדי: ראשי});
	 });
	
	 / / כל מלבן מקבל המאזין כי יורה על ברוחב שונה
	 rect.on ('רוחב, השתנה ", פונקציה (EVT) {
		 var attrs = evt.source.attrs;
		 / / קבל את המעגל המתאים להעביר אותו בקצה הימני של המלבן
		 חוגים [evt.order]. attr ({
			 CX: attrs.x + attrs.width,
			 סי: attrs.y,
			 למלא: "cornflowerblue"
		 .}) הצג ();
		
	 });
	
 });

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

זה פותח כמה possiblities מעניינים עבור RaphaelJS בתוך YUI3. למשל, מה אם נוכל ליצור קבוצה של צורות וקטוריות עם הקבוצה עצמה להיות ישות כי יורה אירועי לעולם החיצון? מבחינה פנימית, כל ציור וקטור יכול לתקשר עם מיכל שלו באמצעות אירועים מותאמים אישית, ו מיכל היה לקבל החלטות על מה הנתונים שהוא יורה אל העולם החיצון. זה פותח את הרעיון של כמוס לחלוטין, שולטת אינטראקטיביות SVG.

תקציר

עם עליית של HTML5 טכנולוגיות הלוויין שלה, יש אפשרויות רבות כל כך, למעט פלאש עבור אינטראקציות עשירות. באופן אידיאלי, כל האלמנטים טסה על הדף צריך להיות נגיש באופן מלא ואחיד. זה פותח possiblities נפלאים לנו ליצור נגישות, פקדי אינטרנט רגילים מבלי להזדקק פלאש. SVG היא אופציה מפתה כי כל וקטור נמשכים בדף מגובה על ידי הצומת DOM שאנחנו יכולים לשנות עם Yui בדיוק כמו כל הצומת DOM אחר. זה מה מאפשר מודול גלריה RaphaelJS כדי להגדיל את כל האובייקטים SVG נוצר על ידי RaphaelJS, וזה המפתח אינטראקציה עשירה עם אלה elments ממקום אחר בדף.

מצא את שיחות: Bloglines | technorati

לשתף ולהרחיב: הפוך עם del.icio.us | Digg אותו! | reddit!