Yahoo! User Interface Blog (YUIBlog)

Nel YUI 3 Galleria: Matt Taylor RaphaelJS Module

RaphaelJS è una potente libreria JavaScript che gestisce SVG disegni e animazioni. Esso consente di creare facilmente tele SVG e disegnare forme di base e percorsi molto facilmente, anche loro raggruppamento in set e applicazione di trasformazioni a uno o molti vettori. È possibile disegnare forme, manipolare immagini, e animare tutto. RaphaelJS offre una bella API per creare e modificare gli elementi SVG con facilità.

Mentre la biblioteca è impressionante, ma ho trovato che posso aggiungere alcune caratteristiche importanti per gli elementi della libreria RaphaelJS con YUI3. Ho iniziato questi sforzi con il nuovo modulo Galleria RaphaelJS .

RaphaelJS caricamento lazy e Plugin

La prima caratteristica è il lazy-loading di non solo la libreria RaphaelJS, ma ogni RaphaelJS plugin potrebbe essere necessario. Il modulo Galleria RaphaelJS solo caricare questi file quando si dichiara ti verrà utilizzando all'interno di una sandbox YUI. Ad esempio:

 
 YUI ({gallery: 'gallery-2010/9/22-20-15'}). Uso ('gallery-raphael', function (Y) {
 
	 Y.Raphael (). Utilizzare (function (Raffaello) {
		
		 / / Usa Raphael qui proprio come si farebbe fuori YUI
		 var = Carta Raffaello ('myPaper', 500, 500);
 
	 });
 
 });

Se si utilizza plugin RaphaelJS, specificare i loro percorsi in un array e inviare che come primo parametro nella Y.Raphael () utilizzano () funzione.:

 
 YUI ({gallery: 'gallery-2010/9/22-20-15'}). Uso ('gallery-raphael', function (Y) {
 
	 myPlugins var = ['plugins / raphael.awesomePlugin.js', 'I plugins / raphael.wickedPlugin.js'];
 
	 Y.Raphael (). Utilizzare (myPlugins, function (Raphael) {
 
		 / / Usa Raphael qui proprio come si farebbe fuori YUI
		 var = Carta Raffaello ('myPaper', 500, 500);
		 / / La 'carta' avranno tutte le nuove funzioni aggiunte dai vostri plugin ora
	 });
 
 });

La biblioteca RaphaelJS viene caricato per primo, poi tutti i plugin specificati sono caricati prima della funzione di callback viene eseguita con l'oggetto Raphael come unico parametro.

Eventi personalizzati

Dopo aver creato uno spazio di disegno con l'oggetto Raphael, allora si può immediatamente scendere al disegno. Quando si chiama metodi come rect , circle , e path sullo spazio disegno, riceverete indietro gli oggetti che rappresentano i vettori SVG. Normalmente, avrete accesso ai loro corrispondenti elementi DOM attraverso il node della proprietà. Ad esempio:

 
 var = Carta Raffaello ('myPaper', 500, 500);
 var = paper.rect quadrato (0, 0, 100, 100);

Questo crea un oggetto rettangolare vettoriale alle coordinate [0,0] con una larghezza e un'altezza di 100 pixel. È possibile accedere all'elemento sottostante DOM (che è un SVG rect elemento) in questo modo:

 
 var = rectNode square.node;
 rectNode.onclick = function () {
	 alert ('Congratulazioni, hai cliccato un quadrato!');
 };

Se sei un utente appassionato di YUI, si sarebbe probabilmente piacerebbe qualcosa di più di questo. Che ne dite di un costruito in Y.Node come bene? Proprio come il node proprietà si riferisce al HTMLElement dietro l'oggetto in formato SVG, il $node proprietà si riferisce al Y.Node wrapper per tale elemento. Così si può fare cose come questa:

 
 piazza. node.on $ ('mouseover', function () {
	 alert ('Congratulazioni, è possibile spostare il mouse!');
 });

Proviamo qualcosa di più complesso ora. L'interazione con un vettore deve essere in grado di causare altri vettori disegnati per aggiornare i loro stili, giusto? Che ne dici di creare delle barre che tutti rendono i loro colori dipende da dove uno con il mouse si trova su un cerchio sulla pagina:

 
 var = Carta Raffaello ('rcanvas', 600, 800);
 
 . var circ = paper.circle (350, 200, 100) attr ({fill: 'rosa', l'ictus: 'nero'});
 
 / / Premendo un gruppo di rettangoli in un array
 var i = 0; rettangoli = [];
 for (; i <10; i + +) {
	 rectangles.push (paper.rect (0, 40 * i, 200, 20) attr ({fill: 'rosso', l'ictus: 'giallo'}.));
 }
 
 / / Scorrendo i rettangoli, aggiungendo gestori specifici mouseMove cerchietto per ogni
 Y.Array.each (rettangoli, la funzione (rect, index) {
	 var i = index + 1;
	 circ. node.on $ ('mouseMove', function (evt) {
		 / / Il colore di riempimento è dinamica, dipende dalla posizione di questo rettangolo
		 / / Nella matrice e la posizione del mouse
		 var = lf circ.attrs.cx - circ.attrs.r,
			 rt = 2 * circ.attrs.r + LF,
			 x = evt.clientX - LF,
			 top = circ.attrs.cy - circ.attrs.r,
			 BTM = 2 * circ.attrs.r + in alto,
			 y = evt.clientY - top;
			 rosso = (((128 * x) / (2 * circ.attrs.r)) -1) * i / 6,
			 verde = 256 - ((((128 * x) / (2 * circ.attrs.r)) -1) * I / 6),
			 blu = (((128 * y) / (2 * circ.attrs.r)) -1) * i / 6;
		 rect.attr ('riempire', 'rgb (' + rosso + ',' + verde + ',' + blu + ')');
	 });
 });

Questo esempio è in esecuzione qui , ma come potete vedere nelle istantanee di sotto, il colore di ciascuna barra dipende dalla posizione del mouse sopra il cerchio così come l'ordine del bar.

A seconda di dove il cursore del mouse si trova sopra il cerchio, i colori delle barre cambiare individualmente.

Così si può vedere che $node è una scorciatoia utile, ma niente di spettacolare. Sarebbe veramente fantastico se ogni oggetto creato con SVG RaphaelJS poteva sparare eventi personalizzati . Ciò consentirebbe gli elementi di disegno individuali per generare eventi personalizzati, e tutto ciò che sulla pagina poteva ascoltare e rispondere. Ciò può essere utile in molti modi. Per cominciare, fornisce ricche interazioni fra i vostri disegni. Interazioni dell'utente con un vettore possono ora comunicare eventuali altri vettori dell'interazione on demand. Questo significa che è possibile generare eventi programatically dai tuoi disegni, quando siano soddisfatte determinate condizioni. Questo non solo consente di notificare i vostri disegni da altri vettori, ma qualcosa nella pagina può ascoltare dentro

 
 var = Carta Raffaello ('rcanvas', 600, 800);
 
 . var circ = paper.circle (350, 200, 100) attr ({fill: 'rosa', l'ictus: 'nero'});
 
 / / Making array di rettangoli e cerchi
 var i = 0, = [] rettangoli, cerchi = [];
 for (; i <10; i + +) {
	 rectangles.push (paper.rect (0, 40 * i, 40 * i, 20) attr ({fill: 'rosso', l'ictus: 'giallo'}.));
	 circles.push (paper.circle (0,0,20) nascondere ().);
 }
 Y.Array.each (rettangoli, la funzione (rect, index) {
	 var i = index + 1;
	 circ. node.on $ ('mouseMove', function (evt) {
		 var = lf circ.attrs.cx - circ.attrs.r,
			 rt = 2 * circ.attrs.r + LF,
			 x = evt.clientX - LF,
			 top = circ.attrs.cy - circ.attrs.r,
			 BTM = 2 * circ.attrs.r + in alto,
			 y = evt.clientY - top;
			 newwidth = (((256 * x) / (2 * circ.attrs.r)) -1) * I / 6,
			 rosso = (((128 * x) / (2 * circ.attrs.r)) -1) * i / 6,
			 verde = 256 - ((((128 * x) / (2 * circ.attrs.r)) -1) * I / 6),
			 blu = (((128 * y) / (2 * circ.attrs.r)) -1) * i / 6;
		 / / Questa volta, non solo cambiando il colore, ma anche la larghezza rettangolo
		 rect.attr ({
			 larghezza: newwidth,
			 fill: 'rgb (' + rosso + ',' + verde + ',' + blu + ')'
		 });
		 / / Cottura evento personalizzato per notificare che la larghezza rettangolo è cambiato
		 rect.fire ('width-cambiato', {width: newwidth, fonte: rect, nell'ordine: index});
	 });
	
	 / / Ogni rettangolo ottiene un listener che spara sulla larghezza cambiato
	 rect.on ('width-cambiato', function (evt) {
		 attrs var = evt.source.attrs;
		 / / Ottiene il cerchio corrispondente e spostarlo verso l'estremità destra del rettangolo
		 cerchi [evt.order]. attr ({
			 cx: attrs.x + attrs.width,
			 CY: attrs.y,
			 fill: 'cornflowerblue'
		 .}) Show ();
		
	 });
	
 });

Date un'occhiata a questo esempio, in esecuzione qui . Si può anche vedere dalla snapshot qui sotto che i cerchi sono in fase di elaborazione sulle estremità destra del rettangolo. Questo sta avvenendo in risposta a cottura evento personalizzato ogni rettangolo individuo, essere catturati da un gestore che sposta il cerchio in una posizione relativa alle caratteristiche attuali del rettangolo.

Questo apre alcune interessanti per possiblities RaphaelJS all'interno YUI3. Per esempio, cosa succederebbe se potessimo creare un gruppo di forme vettoriali con il gruppo stesso sia l'entità che genera gli eventi al mondo esterno? Internamente, ogni disegno vettoriale in grado di comunicare con il suo contenitore tramite eventi personalizzati, e il contenitore sarebbe prendere decisioni su quali dati si spara al mondo esterno. Questo apre l'idea di completamente incapsulati, i controlli interattivi SVG.

Riassunto

Con l'ascesa di HTML5 e le sue tecnologie satellitari, ci sono opzioni in più tanti altri che Flash per le interazioni ricchi. Idealmente, tutti gli elementi vectored della pagina devono essere pienamente accessibili e standardizzato. Questo apre possiblities bello per noi creare accessibili, controlli web standard senza ricorrere a Flash. SVG è un'opzione attraente perchè ogni vettore tracciato sulla pagina è sostenuta da un nodo DOM che possiamo modificare con YUI come qualsiasi altro nodo DOM. Questo è ciò che consente al modulo Galleria RaphaelJS per aumentare tutti gli oggetti SVG essere creati da RaphaelJS, e che è una chiave per una ricca interazione con questi elments da altre parti della pagina.

Trova le conversazioni: bloglines | technorati

Condividi ed estendere: Segnalibro con Del.icio.us | Digg it! | reddit!