واجهة مستخدم مدونة (YUIBlog)

في معرض 3 يوي : مات تايلور RaphaelJS الوحدة

RaphaelJS هي مكتبة جافا سكريبت القوية التي تدير اساسا الرسومات والصور المتحركة. انها تسمح لك بسهولة لخلق اللوحات اساسا ورسم الأشكال الأساسية والمسارات بسهولة جدا ، حتى تجمع لهم في مجموعات والتحولات التي تنطبق على واحد أو العديد من ناقلات. يمكنك رسم الأشكال ، ومعالجة الصور ، وتنشيط كل شيء. RaphaelJS يوفر لطيفة المعهد لإنشاء وتعديل العناصر اساسا مع سهولة.

في حين أن المكتبة هي مثيرة للإعجاب ، ولكني وجدت أن أستطيع أن أضيف بعض السمات الهامة لعناصر من مكتبة RaphaelJS مع YUI3. لقد بدأ تشغيل هذه الجهود مع الجديد وحدة معرض RaphaelJS .

RaphaelJS تحميل كسلان والإضافات

الميزة الأولى هي كسول التحميل من مكتبة RaphaelJS ليس فقط ، ولكن أي RaphaelJS الإضافات قد تحتاج إليها. في معرض RaphaelJS الوحدة سيتم تحميل هذه الملفات فقط عندما تقوم بتعريفه عليك أن تكون استخدامها داخل رمل يوي. على سبيل المثال :

 
 يوي ({معرض : 'معرض - 2010/9/22 ، 20-15'}) استخدام ('معرض - رافائيل ، وظيفة (ص) {
 
	 ي رافائيل (). استخدام (وظيفة) رافائيل) {
		
		 / / استخدام رافائيل هنا كأنك خارج يوي
		 فار = ورقة رافائيل ('myPaper ، 500 ، 500) ؛
 
	 }) ؛
 
 }) ؛

إذا كنت تستخدم المحمول RaphaelJS ، وتحديد مساراتها في صفيف وإرسال التي تستخدم كمعلمة الأول في رافائيل ي () () وظيفة :

 
 يوي ({معرض : 'معرض - 2010/9/22 ، 20-15'}) استخدام ('معرض - رافائيل ، وظيفة (ص) {
 
	 فار myPlugins = ['الإضافات / raphael.awesomePlugin.js' ، 'الإضافات / raphael.wickedPlugin.js'] ؛
 
	 ي رافائيل (). استخدام (myPlugins ، وظيفة (رافائيل) {
 
		 / / استخدام رافائيل هنا كأنك خارج يوي
		 فار = ورقة رافائيل ('myPaper ، 500 ، 500) ؛
		 / / أن 'ورقة' لديها أي وظائف جديدة أضيفت من قبل المحمول الخاص بك الآن
	 }) ؛
 
 }) ؛

يتم تحميل مكتبة RaphaelJS أولا ، ثم يتم تحميل أي ملحقات المحدد قبل تنفيذ الدالة رد الاتصال الخاصة بك مع هدف رافاييل كمعلمة فقط.

أحداث مخصص

بمجرد إنشاء مساحة الرسم مع الكائن رافائيل ، ثم يمكنك الحصول على الفور وصولا الى الرسم. عند استدعاء أساليب مثل rect ، circle ، و path على مساحة الرسم ، سوف تتلقى عودة الكائنات التي تمثل ناقلات اساسا. عادة ، سيكون لديك الوصول إلى العناصر المقابلة دوم من خلال node الممتلكات. على سبيل المثال :

 
 فار = ورقة رافائيل ('myPaper ، 500 ، 500) ؛
 فار paper.rect مربع = (0 ، 0 ، 100 ، 100) ؛

هذا بإنشاء كائن متجه مستطيلة في الإحداثيات [0،0] مع عرض وارتفاع 100 بكسل. لديك حق الوصول إلى العنصر دوم الأساسي (الذي هو اساسا rect عنصر) كما يلي :

 
 فار = rectNode square.node ؛
 rectNode.onclick = الدالة () {
	 تنبيه ('تهانينا ، نقرت مربع!') ؛
 } ؛

إذا كنت من مستخدمي متعطشا يوي ، ربما كنت ترغب شيئا أكثر من هذا. كيف بنيت في Y.Node كذلك؟ مثلما هو الحال في node الملكية يشير إلى HTMLElement خلف الكائن اساسا ، و $node الملكية يشير إلى Y.Node المجمع لذلك العنصر. بحيث يمكنك أن تفعل أشياء من هذا القبيل :

 
 مربع. node.on $ ('تمرير الماوس ، الدالة () {
	 تنبيه ('تهانينا ، يمكنك تحريك الفأرة!') ؛
 }) ؛

دعونا نجرب شيئا أكثر تعقيدا الآن. وينبغي أن يكون التفاعل مع ناقلات واحد يكون قادرا على سبب آخر ناقلات الانتباه إلى تحديث أساليبها ، أليس كذلك؟ كيف نخلق بعض الحانات التي تقدم كل الألوان التي تعتمد على المكان الذي يقع الفأر على دائرة على الصفحة :

 
 فار = ورقة رافائيل ('rcanvas ، 600 ، 800) ؛
 
 فار = paper.circle جنة تنظيم التأمين (350 ، 200 ، 100) attr ({ملء : 'بينك' والسكتة الدماغية : 'أسود'}) ؛
 
 / / دفع حفنة من المستطيلات في صفيف
 فار ط = 0 ؛ المستطيلات = [] ؛
 ل (، وأنا أقل من 10 ، وأنا + +) (
	 rectangles.push (paper.rect (0 ، 40 * ط ، 200 ، 20) attr ({ملء : 'الأحمر' والسكتة الدماغية : ''}))؛ الصفراء
 }
 
 / / حلقات عبر المستطيلات ، مضيفا معالجات محددة لكل دائرة mousemove
 Y.Array.each (مستطيلات ، وظيفة (احداثيات ، مؤشر) {
	 مؤشر فار = ط + 1 ؛
	 جنة تنظيم التأمين. node.on $ ('mousemove' ، وظيفة (evt) {
		 / / لون التعبئة الحيوية ، تعتمد على موقع هذا المستطيل
		 / / في الصفيف فضلا عن موقع الماوس
		 فار = circ.attrs.cx المجلة -- circ.attrs.r ،
			 غ = circ.attrs.r * 2 + المجلة ،
			 س = evt.clientX -- القوات اللبنانية ،
			 الأعلى = circ.attrs.cy -- circ.attrs.r ،
			 بطم = 2 circ.attrs.r * + افضل ،
			 ص = evt.clientY -- الأعلى ؛
			 أحمر = (((128 * س) / (2 * circ.attrs.r)) -1) * ط / 6 ،
			 أخضر = 256 -- ((((128 * س) / (2 * circ.attrs.r)) -1) * ط / 6) ،
			 أزرق = (((ص 128 *) / (2 * circ.attrs.r)) -1) * 6 / ط ؛
		 rect.attr ('ملء' ، 'rgb ('' + أحمر + '،' + أخضر + '،' + أزرق + ')')؛
	 }) ؛
 }) ؛

هذا المثال يستخدم هنا ، ولكن كما ترون في لقطات أدناه ، لون كل شريط يعتمد على مكان الماوس فوق الدائرة ، وكذلك الأمر في نقابة المحامين.

تبعا للمكان الذي يقع مؤشر الماوس على الدائرة ، وألوان شريط تغيير بشكل فردي.

بحيث يمكنك أن ترى أن $node هو اختصار مفيدة ، ولكن لا شيء مذهل. وسيكون حقا رائعة إذا كان كل اساسا الكائن الذي خلق مع RaphaelJS يمكن النار أحداث مخصصة . ومن شأن ذلك أن السماح لعناصر الرسم الفردية لاطلاق النار أحداث مخصصة ، وأي شيء على صفحة ويمكن الاستماع والاستجابة. قد يكون هذا مفيدا في نواح كثيرة. بالنسبة للمبتدئين ، ويوفر التفاعل بين الأغنياء الرسومات الخاصة بك. يمكن التفاعل مع المستخدم واحد متجه الآن أي إخطار ناقلات أخرى من التفاعل على الطلب. هذا يعني أنه يمكنك برمجيا النار الأحداث من الرسومات الخاصة بك عندما يتم استيفاء شروط معينة. وهذا لا يسمح الرسومات الخاصة بك لإعلام ناقلات أخرى ، ولكن أي شيء على الصفحة يمكن الاستماع فيها.

 
 فار = ورقة رافائيل ('rcanvas ، 600 ، 800) ؛
 
 فار = paper.circle جنة تنظيم التأمين (350 ، 200 ، 100) attr ({ملء : 'بينك' والسكتة الدماغية : 'أسود'}) ؛
 
 / / صنع صفائف المستطيلات والدوائر
 فار ط = 0 ، المستطيلات = [] ، والدوائر = [] ؛
 ل (، وأنا أقل من 10 ، وأنا + +) (
	 rectangles.push (paper.rect (0 ، 40 * ط ، ط * 40 ، 20) attr ({ملء : 'الأحمر' والسكتة الدماغية : ''}))؛ الصفراء
	 circles.push (paper.circle (0،0،20) إخفاء ()) ؛
 }
 Y.Array.each (مستطيلات ، وظيفة (احداثيات ، مؤشر) {
	 مؤشر فار = ط + 1 ؛
	 جنة تنظيم التأمين. node.on $ ('mousemove' ، وظيفة (evt) {
		 فار = circ.attrs.cx المجلة -- circ.attrs.r ،
			 غ = circ.attrs.r * 2 + المجلة ،
			 س = evt.clientX -- القوات اللبنانية ،
			 الأعلى = circ.attrs.cy -- circ.attrs.r ،
			 بطم = 2 circ.attrs.r * + افضل ،
			 ص = evt.clientY -- الأعلى ؛
			 newWidth = (((256 * س) / (2 * circ.attrs.r)) -1) * ط / 6 ،
			 أحمر = (((128 * س) / (2 * circ.attrs.r)) -1) * ط / 6 ،
			 أخضر = 256 -- ((((128 * س) / (2 * circ.attrs.r)) -1) * ط / 6) ،
			 أزرق = (((ص 128 *) / (2 * circ.attrs.r)) -1) * 6 / ط ؛
		 / / هذا الوقت ، وليس فقط تغيير اللون ، ولكن أيضا عرض المستطيل
		 rect.attr ({
			 العرض : newWidth ،
			 ملء : 'rgb ('' + أحمر + '،' + أخضر + '،' + أزرق + '')'
		 }) ؛
		 / / اطلاق النار حدث مخصص لإعلام أن هذا العرض قد تغيرت المستطيل
		 rect.fire ('عرض ، تغيير ، {العرض : newWidth ، المصدر : احداثيات والنظام : مؤشر}) ؛
	 }) ؛
	
	 / / كل مستطيل يحصل على المستمع ان الحرائق على العرض دون تغيير
	 rect.on ('عرض ، تغيرت ، وظيفة (evt) {
		 فار = attrs evt.source.attrs ؛
		 / / الحصول على دائرة المناظرة ونقلها إلى الطرف الأيمن من المستطيل
		 الدوائر [evt.order]. attr ({
			 معادل : attrs.x + attrs.width ،
			 قبرصي : attrs.y ،
			 ملء : 'cornflowerblue'
		 .}) عرض () ؛
		
	 }) ؛
	
 }) ؛

نلقي نظرة على هذا المثال يعمل هنا . يمكنك أن ترى أيضا من لقطة أدناه التي يجري استخلاصها الدوائر على الحق ينتهي من المستطيلات. هذا يحدث ردا على اطلاق كل مستطيل الفرد حدث مخصص ، يجري صيدها من قبل معالج الذي يتحرك في الدائرة إلى الموقف بالنسبة للسمات الحالية للمستطيل.

هذا يفتح بعض possiblities مثيرة للاهتمام لRaphaelJS داخل YUI3. على سبيل المثال ، ماذا لو كنا نستطيع إنشاء مجموعة من الأشكال ناقلات مع الفريق نفسه هو الكيان الذي حرائق الأحداث إلى العالم الخارجي؟ داخليا ، ويمكن لكل الرسم التواصل مع ناقلات الحاويات من خلال أحداث مخصصة ، والحاوية سيتخذ قرارات حول ما البيانات التي حرائق على العالم الخارجي. هذا يفتح فكرة مغلفة بشكل كامل ، وضوابط اساسا التفاعلية.

موجز

مع صعود HTML5 والتقنيات التابعة لها ، وهناك الكثير من الخيارات الأخرى أكثر من فلاش لتفاعلات الغنية. ومن الناحية المثالية ، ينبغي أن تنقلها أية عناصر على الصفحة تكون متاحة تماما وموحدة. هذا يفتح possiblities رائعة بالنسبة لنا لخلق الوصول ، وضوابط ويب قياسي من دون اللجوء الى فلاش. اساسا هو خيار جذابة لأن كل تدعمها ناقلات رسمها على صفحة بنسبة عقدة دوم أن نتمكن من تعديل مع يوي تماما مثل أي عقدة دوم الأخرى. هذا ما يسمح لل معرض RaphaelJS الوحدة لزيادة كافة الكائنات اساسا يجري إنشاؤها بواسطة RaphaelJS ، وهذا هو المفتاح لالغنية التفاعل مع هذه elments من مكان آخر في الصفحة.

العثور على المحادثات : المدونات | ستثمبليوبون

وتوسيع نطاق مشاركة : احفظ مع del.icio.us | يسو أنها! | صديق!