Interfaz de usuario de Yahoo! Blog (YUIBlog)

En la galería de YUI 3: Matt Taylor RaphaelJS Módulo

RaphaelJS es una poderosa biblioteca JavaScript que maneja SVG dibujos y animaciones. Le permite crear fácilmente cuadros SVG y dibujar formas básicas y caminos con mucha facilidad, incluso agrupándolos en conjuntos y aplicar transformaciones a uno o muchos vectores. Puede dibujar formas, manipular imágenes y la animación de todo. RaphaelJS proporciona una buena API para crear y modificar los elementos SVG con facilidad.

Mientras que la biblioteca es impresionante, pero he encontrado que puedo agregar algunas características importantes a los elementos de la biblioteca RaphaelJS con YUI3. He empezado estos esfuerzos con el nuevo módulo de Galería RaphaelJS .

RaphaelJS Lazy Loading y plugins

La primera característica es la pereza de carga, no sólo de la biblioteca RaphaelJS, pero cualquier RaphaelJS complementos que puede necesitar. El módulo de Galería RaphaelJS sólo cargará estos archivos cuando se declara que las va a utilizar dentro de un recinto YUI. Por ejemplo:

 
 YUI ({gallery: la galería-09.22.2010-20-15 '}). Uso (la galería-Raphaël', function (Y) {
 
	 Y.Raphael (). Utilizar (la función de (Rafael) {
		
		 / / Usar Raphael aquí al igual que lo harían fuera de YUI
		 var papel = Raphael ('myPaper', 500, 500);
 
	 });
 
 });

Si el uso de plugins RaphaelJS, especificar sus rutas de acceso en un array y enviarlo como el primer parámetro en el Y.Raphael () utiliza () función.:

 
 YUI ({gallery: la galería-09.22.2010-20-15 '}). Uso (la galería-Raphaël', function (Y) {var MyPlugins = ['plugins / raphael.awesomePlugin.js', 'plugins / Rafael . wickedPlugin.js '.]; Y.Raphael () uso (MyPlugins, la función de (Rafael) {/ / usar Raphael aquí igual que lo haría fuera de YUI papel var = Raphael (' myPaper ', 500, 500); / / la "papel" que tiene nuevas funciones agregadas por los plugins ahora});}); 

La biblioteca RaphaelJS se carga primero, luego los complementos específicos se cargan antes de la función de devolución de llamada se ejecuta con el objeto de Rafael como único parámetro.

Eventos personalizados

Una vez que hayas creado un espacio de dibujo con el objeto de Rafael, a continuación, inmediatamente puede llegar hasta el dibujo. Cuando se llama a métodos como el rect , circle , y la path en el área de dibujo, recibirá de nuevo los objetos que representan vectores SVG. Normalmente, usted tendrá acceso a sus correspondientes elementos DOM a través del node la propiedad. Por ejemplo:

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

Esto crea un objeto vectorial rectangular, en las coordenadas [0,0], con una anchura y una altura de 100 píxeles. Usted tiene acceso al elemento DOM subyacente (que es un SVG rect elemento), así:

 
 var = rectNode square.node;
 rectNode.onclick = function () {
	 alert ('Felicitaciones, usted hace clic en un cuadrado');
 };

Si usted es un ávido usuario de YUI, es probable que quiera algo más que esto. ¿Qué tal una construida en Y.Node así? Al igual que el node la propiedad se refiere a la HTMLElement detrás del objeto SVG, el $node propiedad se refiere a la Y.Node contenedor para ese elemento. Así que usted puede hacer cosas como esta:

 
 cuadrado. $ node.on ('mouseover', function () {
	 alert ('Felicitaciones, usted puede mover un ratón!');
 });

Vamos a intentar algo más complejo ahora. Una interacción con un vector debe ser capaz de causar otros vectores dibujados para actualizar sus estilos, ¿verdad? ¿Qué podemos crear algunos de los bares que todos prestan sus colores depende de dónde uno el ratón se encuentra en un círculo en la página:

 
 var papel = Raphael ('rcanvas', 600, 800);
 
 var. circ = paper.circle (350, 200, 100) attr ({fill: 'rosa', un derrame cerebral: 'negro'});
 
 / / Empujar un montón de rectángulos en una matriz
 var i = 0; rectángulos = [];
 for (; i <10; i + +) {
	 rectangles.push (paper.rect (0, 40 * i, 200, 20) attr ({fill: 'rojo', un derrame cerebral: 'amarillo'}.));
 }
 
 / / Bucle a través de los rectángulos, la adición de controladores específicos para cada círculo mousemove
 Y.Array.each (rectángulos, la función (Rect, index) {
	 var i = índice + 1;
	 Circ. $ node.on ("MouseMove ', function (evt) {
		 / / El color de relleno es dinámico, dependiente de la localización de este rectángulo
		 / / En la matriz, así como la ubicación del ratón
		 var = Si circ.attrs.cx - circ.attrs.r,
			 rt = 2 * circ.attrs.r + LF,
			 x = evt.clientX - Si,
			 top = circ.attrs.cy - circ.attrs.r,
			 BTM = 2 * + circ.attrs.r superior,
			 y = evt.clientY - la parte superior;
			 rojo = (((128 * x) / (2 * circ.attrs.r)) -1) * I / 6,
			 verde = 256 - ((((128 * x) / (2 * circ.attrs.r)) -1) * i / 6),
			 azul = (((128 * y) / (2 * circ.attrs.r)) -1) * I / 6;
		 rect.attr ('relleno', 'rgb (' + rojo + ',' + verde + ',' + azul + ')');
	 });
 });

En este ejemplo se ejecuta aquí , pero como se puede ver en las fotos de abajo, el color de cada barra depende de la ubicación del ratón sobre el círculo, así como el orden de la barra.

Dependiendo del lugar donde el cursor del ratón se encuentra sobre el círculo, los colores de la barra cambia de forma individual.

Así que usted puede ver que $node es un atajo útil, pero nada espectacular. Realmente sería fantástico si cada objeto SVG que usted crea con RaphaelJS podía disparar eventos personalizados . Esto permitiría a los elementos de dibujo individuales para desencadenar eventos personalizados, y nada en la página podía escuchar y responder. Esto puede ser útil en muchas formas. Para empezar, proporciona interacciones ricas entre sus dibujos. La interacción del usuario con un vector de ahora puede notificar a los otros vectores de la interacción de la demanda. Esto significa que puede disparar eventos mediante programación de sus dibujos cuando se cumplan ciertas condiciones. Esto no sólo permite que sus dibujos para notificar a otros vectores, pero nada en la página se puede escuchar pulg

 
 var papel = Raphael ('rcanvas', 600, 800);
 
 var. circ = paper.circle (350, 200, 100) attr ({fill: 'rosa', un derrame cerebral: 'negro'});
 
 / / Hacer arreglos de rectángulos y círculos
 var i = 0, rectángulos = [], círculos = [];
 for (; i <10; i + +) {
	 rectangles.push (paper.rect (0, 40 * i, 40 * i, 20) attr ({fill: 'rojo', un derrame cerebral: 'amarillo'}.));
	 circles.push (paper.circle (0,0,20) hide ().);
 }
 Y.Array.each (rectángulos, la función (Rect, index) {
	 var i = índice + 1;
	 Circ. $ node.on ("MouseMove ', function (evt) {
		 var = Si circ.attrs.cx - circ.attrs.r,
			 rt = 2 * circ.attrs.r + LF,
			 x = evt.clientX - Si,
			 top = circ.attrs.cy - circ.attrs.r,
			 BTM = 2 * + circ.attrs.r superior,
			 y = evt.clientY - la parte superior;
			 newwidth = (((256 * x) / (2 * circ.attrs.r)) -1) * I / 6,
			 rojo = (((128 * x) / (2 * circ.attrs.r)) -1) * I / 6,
			 verde = 256 - ((((128 * x) / (2 * circ.attrs.r)) -1) * i / 6),
			 azul = (((128 * y) / (2 * circ.attrs.r)) -1) * I / 6;
		 / / Esta vez no, sólo cambiando el color, sino también el ancho de un rectángulo
		 rect.attr ({
			 Ancho: newwidth,
			 fill: 'rgb (' + rojo + ',' + verde + ',' + azul + ')'
		 });
		 / / Cocción de eventos personalizado para notificar que el ancho de un rectángulo ha cambiado
		 rect.fire ("ancho de cambiar", {width: newwidth, fuente: rect, el orden: índice});
	 });
	
	 / / Cada rectángulo un detector que se dispara el ancho cambiado
	 rect.on ("ancho cambiado ', function (evt) {
		 var = attrs evt.source.attrs;
		 / / Obtener el círculo correspondiente y moverlo a la parte derecha del rectángulo
		 círculos [evt.order]. attr ({
			 cx: attrs.x + attrs.width,
			 CY: attrs.y,
			 llenar: "cornflowerblue '
		 .}) Show ();
		
	 });
	
 });

Echa un vistazo a este ejemplo funcionando aquí . También se puede ver en la foto a continuación que los círculos se están elaborando en los extremos de la derecha de los rectángulos. Esto está ocurriendo en respuesta a cocción cada rectángulo individuo evento personalizado, ser capturado por un controlador que se mueve el círculo a una posición relativa a los atributos actuales del rectángulo.

Esto abre algunas Posibilidades interesantes para RaphaelJS dentro YUI3. Por ejemplo, qué pasaría si pudiéramos crear un grupo de formas vectoriales con el grupo en sí es la entidad que desencadena eventos con el mundo exterior? Internamente, cada uno de dibujo vectorial podía comunicarse con su contenedor a través de eventos personalizados, y el contenedor que tomar decisiones acerca de qué datos se dispara con el mundo exterior. Esto abre la idea de plena encapsulados, controles interactivos SVG.

Resumen

Con el ascenso de HTML5 y sus tecnologías de satélites, hay muchas más opciones que no sean de Flash para las interacciones ricas. Lo ideal sería que todos los elementos vectoriales de la página debe ser totalmente accesible y estandarizada. Esto abre Posibilidades maravillosos para nosotros para crear los controles de acceso, web estándar sin necesidad de recurrir a Flash. SVG es una opción atractiva debido a que cada vector dibujado en la página está respaldado por un nodo DOM que podemos modificar con Yui como cualquier otro nodo DOM. Eso es lo que permite que el módulo de Galería RaphaelJS para aumentar todos los objetos de SVG siendo creadas por RaphaelJS, y que es la clave para una rica interacción con estos elments de otras partes de la página.

Buscar conversaciones: Bloglines | technorati

Compartir y ampliar: Marcar página con del.icio.us | Digg It! | reddit!