Blog ng Yahoo! User Interface (YUIBlog)

Sa Yui 3 Gallery: Matt Taylor RaphaelJS Module

RaphaelJS ay isang malakas na JavaScript library na namamahala ng mga mga SVG guhit at animation. Ito ay nagbibigay-daan sa iyo upang madaling lumikha ng SVG canvases at makahatak ng mga pangunahing hugis at path masyadong madali, kahit na pagsasama ito sa mga hanay at paglalapat ng mga transformations sa isa o maraming mga vectors. Maaari mong gumuhit ng hugis, manipulahin ng mga imahe, at bigyang-buhay ang lahat. RaphaelJS nagbibigay gandang API upang lumikha at baguhin ang mga SVG elemento na may kadalian.

Ang habang aklatan ay kahanga-hanga, ngunit natagpuan ko na ang maaari kong magdagdag ng ilang mahahalagang mga tampok sa mga elemento ng library RaphaelJS sa YUI3. Ko na nagsimula off ang mga pagsisikap na ito sa bagong RaphaelJS Gallery Module .

Tamad Naglo-load RaphaelJS at plugin

Ang unang na tampok ay ang tamad-loading ng hindi lamang ang RaphaelJS na library, ngunit anumang RaphaelJS plugin na maaari mong kailanganin. Ang Module ng RaphaelJS Gallery ay lamang load ang mga file na ito kapag idedeklara mo na gumagamit ka ng mga ito sa loob ng isang Yui sandbox. Halimbawa:

 
 Yui ({gallery: 'gallery-2010.09.22-20-15'}). Paggamit ('gallery-Raphael', ang function (Y) {
 
	 Y.Raphael (). Gamitin (ng function (Raphael) {
		
		 / / Gamitin Raphael dito tulad ng gagawin mo sa labas Yui
		 var papel = Raphael ('myPaper', 500, 500);
 
	 });
 
 });

Kung ikaw ay gumagamit ng RaphaelJS plugin, tukuyin ang kanilang mga landas sa isang array at ipadala na bilang unang parameter sa ang Y.Raphael () gamitin () function.:

 
 Yui ({gallery: 'gallery-2010.09.22-20-15'}). Paggamit ('gallery-Raphael', ang function (Y) {
 
	 ang var myPlugins = ['plugin / raphael.awesomePlugin.js na', 'plugin / raphael.wickedPlugin.js'];
 
	 Y.Raphael (). Gamitin (myPlugins, ang function na (Raphael) {
 
		 / / Gamitin Raphael dito tulad ng gagawin mo sa labas Yui
		 var papel = Raphael ('myPaper', 500, 500);
		 / / Ang 'papel' ay magkakaroon ng anumang mga bagong pag-andar idinagdag sa pamamagitan ng iyong mga plugin ay ngayon
	 });
 
 });

Ang RaphaelJS library ay unang-load, pagkatapos anumang tinukoy na plugin ay load bago ang iyong callback function na ay pinaandar sa ang Raphael bagay bilang lamang ang parameter.

Pasadyang Kaganapan

Kapag ginawa mo ang isang puwang ng guhit sa bagay Raphael, pagkatapos ay maaari mong agad na makakuha ng pababa sa drawing. Kapag tumawag ka ng mga paraan tulad ng rect , circle , at path sa drawing space, makakatanggap ka ng bumalik ang mga bagay na kumakatawan sa SVG vectors. Karaniwan, magkakaroon ka ng access sa kanilang kaukulang mga elemento na DOM sa pamamagitan ng node ari-arian. Halimbawa:

 
 var papel = Raphael ('myPaper', 500, 500);
 var parisukat = paper.rect ang (0, 0, 100, 100);

Lumilikha ito ng isang hugis-parihaba object vector sa coordinate [0,0] na may isang lapad at taas ng mga 100 pixels. Mayroon kang access sa kalakip na sangkap ng DOM (na kung saan ay isang sangkap ng SVG rect ) tulad ng sa gayon:

 
 var rectNode = square.node;
 rectNode.onclick = ang function () {
	 alert ('Binabati kita, ikaw nag-click sa isang parisukat na!');
 };

Kung ikaw ay isang sabik Yui gumagamit, gusto mo marahil gusto ang isang bagay na mas sa ito. Paano ang tungkol sa isang built in Y.Node pati na rin? Tulad ng ang node ari-arian ay tumutukoy sa ang HTMLElement sa likod ng SVG bagay, ang $node ari-arian ay tumutukoy sa Y.Node wrapper para sa na elemento. Kaya maaari mong gawin ang mga bagay na tulad nito:

 
 parisukat. $ node.on ('mouseover', ang function () {
	 alert ('Binabati kita, maaari mong ilipat ang isang mouse!');
 });

Hayaan ng subukan ang isang bagay na mas kumplikado ngayon. Isang pakikipag-ugnayan sa isang vector ay dapat na magagawang maging sanhi ng iba pang mga iguguhit vectors upang i-update ang kanilang mga estilo, i-right? Paano ang tungkol sa aming lumikha ng ilang mga bar na ang lahat ng render ang kanilang mga kulay nakasalalay sa kung saan ang isang mouse ay matatagpuan sa isang bilog sa pahina:

 
 var papel = Raphael (sa 'rcanvas', 600, 800);
 
 . var sa circ = paper.circle (350, 200, 100) sa attr ({fill: 'rosas', stroke: 'itim'});
 
 / / Ng panunulak isang grupo ng parihaba sa isang array
 var i = 0; mga parihaba = [];
 para sa (; i <10; i + +) {
	 rectangles.push (paper.rect (0, 40 * i, 200, 20) ang attr ({fill: 'red', stroke: 'dilaw'}.));
 }
 
 / / Looping sa pamamagitan ng mga parihaba, pagdaragdag ng mga tiyak na bilog handlers mousemove para sa bawat
 Y.Array.each (parihaba, ang function (rect, index) {
	 var i = index + 1;
	 circ. $ node.on (ang 'mousemove', ang function (evt) {
		 / / Ang fill kulay ay dynamic, nakasalalay sa lokasyon ng parihaba na ito
		 / / Sa array pati na rin ang lokasyon ng mouse
		 var lf = circ.attrs.cx - circ.attrs.r,
			 rt = 2 * circ.attrs.r ang + lf,
			 x = evt.clientX-lf,
			 Ang tuktok = circ.attrs.cy - circ.attrs.r,
			 btm = 2 * circ.attrs.r + tuktok,
			 y = evt.clientY-itaas;
			 red = (((128 * x) / (2 * circ.attrs.r)) -1) * i / 6,
			 berde = 256 - ((((128 * x) / (2 * circ.attrs.r)) -1) * i / 6),
			 asul = (((128 * y) / (2 * circ.attrs.r)) -1) * i / 6;
		 rect.attr ('punan', 'rgb (' + red + ',' + green + ',' + asul + ')');
	 });
 });

Halimbawa na ito ay tumatakbo dito , ngunit tulad ng makikita mo sa snapshot sa ibaba, ang kulay ng bawat bar ay nakasalalay sa ang lokasyon ng mouse sa ibabaw ng bilog pati na rin ang order ng ​​bar.

Depende sa kung saan ang iyong mouse cursor ay matatagpuan sa ibabaw ng bilog, ang mga kulay na bar baguhin paisa-isa.

Sa gayon maaari mong makita na ang $node ay isang kapaki-pakinabang na shortcut, ngunit walang kagilas-gilas. Ito talagang hindi kapani-paniwala kung ang ang bawat SVG bagay sa iyo na lumikha sa RaphaelJS maaaring sunog ng pasadyang mga kaganapan . Na ay magpapahintulot sa iyong mga indibidwal na mga elemento sa guhit na apoy ng mga pasadyang mga kaganapan, at anumang bagay sa pahina ay maaaring makinig at tumugon. Ito ay maaaring maging kapaki-pakinabang sa maraming paraan. Para sa mga starters, ito ay nagbibigay ng mga mayaman na pakikipag-ugnayan sa pagitan ng iyong mga guhit. Pakikipag-ugnayan ng gumagamit sa isang vector ngayon ipaalam sa anumang iba pang mga vectors ng pakikipag-ugnayan sa pangangailangan. Nangangahulugan ito na maaari mong programatically sunog ang mga kaganapan mula sa iyong mga guhit kapag ay matugunan ang ilang mga kundisyon. Hindi lamang ang mga ito payagan ang iyong mga guhit na abisuhan ang iba pang mga vectors, ngunit ang anumang sa pahina ay maaaring makinig in

 
 var papel = Raphael (sa 'rcanvas', 600, 800);
 
 . var sa circ = paper.circle (350, 200, 100) sa attr ({fill: 'rosas', stroke: 'itim'});
 
 / / Paggawa ng mga arrays ng mga parihaba at bilog
 var i = 0, parihaba = [], bilog = [];
 para sa (; i <10; i + +) {
	 rectangles.push (paper.rect (0, 40 * i, 40 * i, 20) ang attr ({fill: 'red', stroke: 'dilaw'}.));
	 circles.push (paper.circle (0,0,20) itago ang ().);
 }
 Y.Array.each (parihaba, ang function (rect, index) {
	 var i = index + 1;
	 circ. $ node.on (ang 'mousemove', ang function (evt) {
		 var lf = circ.attrs.cx - circ.attrs.r,
			 rt = 2 * circ.attrs.r ang + lf,
			 x = evt.clientX-lf,
			 Ang tuktok = circ.attrs.cy - circ.attrs.r,
			 btm = 2 * circ.attrs.r + tuktok,
			 y = evt.clientY-itaas;
			 newWidth = (((256 * x) / (2 * circ.attrs.r)) -1) * i / 6,
			 red = (((128 * x) / (2 * circ.attrs.r)) -1) * i / 6,
			 berde = 256 - ((((128 * x) / (2 * circ.attrs.r)) -1) * i / 6),
			 asul = (((128 * y) / (2 * circ.attrs.r)) -1) * i / 6;
		 / / Oras na ito, hindi lamang ang pagbabago ng kulay, ngunit din ang parihaba lapad
		 rect.attr ({
			 lapad: newWidth,
			 punan: rgb ('+ red +', '+ green +', '+ asul +') '
		 });
		 / / Pagpapaputok pasadyang kaganapan na ipaalam na ang sa parihaba lapad na ito ay nagbago
		 rect.fire ('lapad-nagbago', {lapad: newWidth, pinagmulan: rect, order: index});
	 });
	
	 / / Ang parihaba bawat nakakakuha ng tagapakinig na apoy sa lapad-binago
	 rect.on ('lapad-nagbago', ang function (evt) {
		 var attrs mga = evt.source.attrs;
		 / / Makakuha ng nararapat na bilog at ilipat ito sa kanang dulo ng parihaba
		 bilog [evt.order]. attr ({
			 cx: attrs.x + attrs.width,
			 cy: attrs.y,
			 punan ang: 'cornflowerblue'
		 .}) Ipakita ();
		
	 });
	
 });

Tingnan sa ito tumatakbo halimbawa dito . Maaari mo ring makita mula sa ang snapshot ibaba na bilog ay iguguhit sa kanang dulo ng parihaba. Ito ay occuring sa tugon sa pasadyang bawat indibidwal na parihaba pagpapaputok ng kaganapan, na nakuha ng isang handler na gumagalaw ang bilog sa isang posisyon na kamag-anak sa ang kasalukuyang mga katangian ng parihaba.

Ito ay bubukas up ng ilang mga kagiliw-giliw na mga possiblities para sa RaphaelJS loob YUI3. Halimbawa, ano kung maaari naming lumikha ng isang pangkat ng mga hugis ng vector sa group mismo ang entity na apoy sa mga kaganapan sa labas ng mundo? Sa loob, ang bawat vector pagguhit ay maaaring makipag-usap sa kanyang lalagyan sa pamamagitan ng mga pasadyang mga kaganapan, at lalagyan ay gumawa ng mga desisyon tungkol sa kung anong data ang apoy sa labas ng mundo. Bubuksan nito ang ideya ng ganap na encapsulated, interactive na mga kontrol SVG.

Buod

Sa ascendance ng ang HTML5 at mga satellite teknolohiya nito, may mga kaya mas maraming mga opsyon na iba sa Flash para sa mga mayaman na pakikipag-ugnayan. Kainaman, ang anumang vectored mga elemento sa pahina ay dapat na ganap na ma-access at standardized. Ito ay bubukas up ng mga kahanga-hangang mga possiblities para sa amin upang lumikha ng mapuntahan, karaniwang mga kontrol sa web nang walang resorting sa Flash. SVG ay isang sumasamo pagpipilian dahil ang bawat vector na iguguhit sa pahina ay nai-back up sa pamamagitan ng isang DOM node na maaari naming baguhin sa Yui tulad ng anumang iba pang mga DOM node. Na kung ano ang ay nagpapahintulot ang RaphaelJS Module Gallery upang dagdagan ang lahat ng mga SVG bagay na nilikha sa pamamagitan ng RaphaelJS, at na ay isang susi sa mayaman na pakikipag-ugnayan sa mga elments mula sa ibang lugar sa pahina.

Maghanap ng mga pag-uusap: Bloglines | Technorati

Ibahagi at pahabain: bookmark sa del.icio.us | Digg ito! | reddit!