User Interface Yahoo! Blog (YUIBlog)

No YUI 3 Gallery: Módulo Matt Taylor RaphaelJS

RaphaelJS é uma biblioteca JavaScript poderosa que gerencia SVG desenhos e animações. Ele permite que você facilmente criar telas SVG e desenhar formas básicas e caminhos muito facilmente, mesmo agrupando-os em conjuntos e aplicar transformações a um ou vários vetores. Você pode desenhar formas, manipular imagens, e animar tudo. RaphaelJS fornece uma boa API para criar e modificar elementos SVG com facilidade.

Enquanto a biblioteca é impressionante, mas eu descobri que posso acrescentar algumas características importantes para os elementos da biblioteca RaphaelJS com YUI3. Eu comecei esses esforços com o novo Módulo Galeria RaphaelJS .

Lazy Loading RaphaelJS e Plugins

A primeira característica é o carregamento lento de não só a biblioteca do RaphaelJS, mas qualquer RaphaelJS plugins que você pode precisar. O Módulo Galeria RaphaelJS só vai carregar esses arquivos quando você declarar que vai usá-los dentro de uma sandbox YUI. Por exemplo:

 
 YUI ({Galeria: 'galeria 2010/09/22-20-15'}). Utilizar a função ('galeria-raphael', (Y) {
 
	 Y. Raphael (). Utilizar (function (Raphael) {
		
		 / / Use Raphael aqui apenas como você faria fora YUI
		 var = papel Raphael ("myPaper ', 500, 500);
 
	 });
 
 });

Se você estiver usando plugins RaphaelJS, especificar seus caminhos em uma matriz e enviar esse como o primeiro parâmetro na Raphael Y. () use () função.:

 
 YUI ({Galeria: 'galeria 2010/09/22-20-15'}). Utilizar a função ('galeria-raphael', (Y) {
 
	 myPlugins var = ['plugins / raphael.awesomePlugin.js', 'plugins / raphael.wickedPlugin.js'];
 
	 Y. Raphael (). Utilizar (myPlugins, function (Raphael) {
 
		 / / Use Raphael aqui apenas como você faria fora YUI
		 var = papel Raphael ("myPaper ', 500, 500);
		 / / O 'papel' terá quaisquer novas funções adicionadas por seus plugins agora
	 });
 
 });

A biblioteca RaphaelJS é carregado pela primeira vez, então qualquer plugins especificada são carregados antes sua função callback é executado com o objeto Raphael como o único parâmetro.

Eventos personalizado

Depois de criar um espaço de desenho com o objeto Raphael, então você pode começar imediatamente até o desenho. Quando você chamar métodos como rect , circle e path no espaço de desenho, você vai receber de volta os objetos que representam vetores SVG. Normalmente, você terá acesso aos seus elementos correspondentes DOM através do node propriedade. Por exemplo:

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

Isso cria um objeto vetor retangular nas coordenadas [0,0] com uma largura e uma altura de 100 pixels. Você tem acesso ao elemento DOM subjacente (que é um SVG rect elemento) assim:

 
 var rectNode = square.node;
 rectNode.onclick = function () {
	 alert ('Parabéns, você clicou em um quadrado!');
 };

Se você é um ávido usuário de YUI, você provavelmente gostaria de algo mais do que isso. Como cerca de um construído em Y.Node também? Assim como o node de propriedade refere-se à HTMLElement atrás do objeto SVG, o $node de propriedade refere-se ao Y.Node wrapper para esse elemento. Assim, você pode fazer coisas como esta:

 
 quadrados. node.on $ ('mouseover', function () {
	 alert ('Parabéns, você pode mover um rato!');
 });

Vamos tentar algo mais complexo agora. Uma interação com um vetor deve ser capaz de causar outros vetores atraídos para atualizar seus estilos, certo? Que tal criar alguns bares que todas as suas cores tornam dependentes de onde um o mouse está localizado em um círculo na página:

 
 var = papel Raphael ("rcanvas ', 600, 800);
 
 . var circ = paper.circle (350, 200, 100) attr ({preenchimento: 'rosa', acidente vascular cerebral: 'black'});
 
 / / Empurrando um monte de retângulos em um array
 var i = 0; retângulos = [];
 for (; i <10; i + +) {
	 . rectangles.push (paper.rect (0, 40 * i, 200, 20) attr ({preenchimento: 'red', acidente vascular cerebral: 'amarelo'}));
 }
 
 / / Loop através dos retângulos, acrescentando manipuladores mousemove específicos para cada círculo
 Y.Array.each (retângulos função, (rect, index) {
	 var i = índice + 1;
	 circ. node.on $ ('mousemove', function (evt) {
		 / / A cor de preenchimento é dinâmica, dependente da localização deste rectângulo
		 / / Na matriz, bem como a localização do mouse
		 var lf = circ.attrs.cx - circ.attrs.r,
			 rt = 2 * circ.attrs.r + LF,
			 x = evt.clientX - Se,
			 top = circ.attrs.cy - circ.attrs.r,
			 btm = 2 * circ.attrs.r top +,
			 y = evt.clientY - top;
			 vermelho = (((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 ('encher', 'rgb ("+ vermelho +', '+ verde +', '+ azul +')');
	 });
 });

Este exemplo é executado aqui , mas como você pode ver nos instantâneos abaixo, a cor de cada barra depende da localização do mouse sobre o círculo, bem como a ordem do bar.

Dependendo de onde o cursor do mouse está localizado sobre o círculo, as cores barra de alteração individualmente.

Então você pode ver que $node é um atalho útil, mas nada espetacular. Seria realmente fantástico se cada objeto SVG que você cria com RaphaelJS podia disparar eventos personalizados . Isso permitiria que os seus elementos de desenho individuais para disparar eventos personalizados, e qualquer coisa na página pode ouvir e responder. Isto pode ser útil em muitas maneiras. Para começar, ele fornece interações ricas entre seus desenhos. Interações do usuário com um vetor agora pode notificar qualquer outros vetores da interação on demand. Isto significa que você pode programaticamente fogo eventos de seus desenhos quando certas condições são cumpridas. Não somente isto permite que os seus desenhos para notificar outros vetores, mas nada na página pode ouvir dentro

 
 var = papel Raphael ("rcanvas ', 600, 800);
 
 . var circ = paper.circle (350, 200, 100) attr ({preenchimento: 'rosa', acidente vascular cerebral: 'black'});
 
 / / Fazer arranjos de retângulos e círculos
 var i = 0, retângulos = [], círculos = [];
 for (; i <10; i + +) {
	 . rectangles.push (paper.rect (0, 40 * i, i * 40, 20) attr ({preenchimento: 'red', acidente vascular cerebral: 'amarelo'}));
	 circles.push (. paper.circle (0,0,20) hide ());
 }
 Y.Array.each (retângulos função, (rect, index) {
	 var i = índice + 1;
	 circ. node.on $ ('mousemove', function (evt) {
		 var lf = circ.attrs.cx - circ.attrs.r,
			 rt = 2 * circ.attrs.r + LF,
			 x = evt.clientX - Se,
			 top = circ.attrs.cy - circ.attrs.r,
			 btm = 2 * circ.attrs.r top +,
			 y = evt.clientY - top;
			 NewWidth = (((256 * x) / (2 * circ.attrs.r)) -1) * i / 6,
			 vermelho = (((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;
		 / / Desta vez, não só mudando a cor, mas também a largura retângulo
		 rect.attr ({
			 width: NewWidth,
			 preenchimento: 'rgb ("+ vermelho +', '+ verde +', '+ azul +') '
		 });
		 / / Disparo de eventos personalizados para notificar que este rectângulo de largura mudou
		 rect.fire ('width-changed', {width: NewWidth, fonte: rect, a ordem: índice});
	 });
	
	 / / Cada retângulo é um ouvinte que incêndios na largura mudado
	 rect.on função ('width-changed', (evt) {
		 var attrs = evt.source.attrs;
		 / / Obtém o círculo correspondente e mova-o para a extremidade direita do retângulo
		 círculos [evt.order]. attr ({
			 cx: attrs.x + attrs.width,
			 cy: attrs.y,
			 preenchimento: 'cornflowerblue'
		 .}) Show ();
		
	 });
	
 });

Dê uma olhada neste exemplo rodando aqui . Você também pode ver na fotografia abaixo que círculos estão sendo traçadas nas extremidades direita dos retângulos. Isto está ocorrendo em resposta ao disparo cada retângulo indivíduo evento personalizado, sendo capturado por um manipulador que move o círculo para uma posição em relação aos atributos atuais do retângulo.

Isso abre algumas possibilidades interessantes para RaphaelJS dentro YUI3. Por exemplo, o que se poderia criar um grupo de formas vetoriais com o grupo em si é a entidade que dispara eventos para o mundo exterior? Internamente, cada desenho vetorial poderia se comunicar com seu recipiente através de eventos personalizados, eo recipiente se tomar decisões sobre quais dados ele é acionado para o mundo exterior. Isso abre a idéia de totalmente encapsulado, controles interativos SVG.

Sumário

Com a ascensão do HTML5 e suas tecnologias por satélite, há assim muitas mais opções do que outros Flash para interações ricos. Idealmente, todos os elementos vectored na página deve ser totalmente acessível e padronizado. Isso abre possibilidades maravilhoso para nós para criar acessível, controles web padrão, sem recorrer a Flash. SVG é uma opção atraente porque cada vetor desenhado na página é apoiada por um nó DOM que podemos modificar com YUI como qualquer outro nó DOM. Isso é o que permite que o módulo Gallery RaphaelJS para aumentar todos os objetos SVG sendo criado por RaphaelJS, e que é a chave para uma interação rica com esses elments de outro lugar na página.

Encontrar conversas: bloglines | technorati

Compartilhar e ampliar: Bookmark com del.icio.us | digg it! | reddit!