Yahoo! User Interface Blog (YUIBlog)

In der YUI 3 Gallery: Matt Taylor RaphaelJS Module

RaphaelJS ist eine leistungsfähige JavaScript-Bibliothek, verwaltet SVG -Zeichnungen und Animationen. Es ermöglicht Ihnen die einfache Erstellung SVG Leinwände und ziehen Grundformen und Pfade sehr leicht, auch die Gruppierung sie in Sets und Anwenden von Transformationen auf einen oder mehrere Vektoren. Sie können Formen zeichnen, Bearbeiten von Bildern und animieren alles. RaphaelJS bietet eine schöne API zum Erstellen und Ändern von SVG-Elemente mit Leichtigkeit.

Während die Bibliothek ist beeindruckend, aber ich habe festgestellt, dass ich einige wichtige Funktionen, Elemente des RaphaelJS Bibliothek hinzufügen mit YUI3. Ich habe von diesen Anstrengungen mit der neuen begonnen RaphaelJS Gallery Module .

Lazy Loading RaphaelJS und Plugins

Das erste Merkmal ist die lazy-loading nicht nur der RaphaelJS Bibliothek, aber keine RaphaelJS Plugins die Sie benötigen. Die RaphaelJS Gallery Module werden nur diese Dateien laden, wenn Sie erklären, Sie werden mit ihnen in einer YUI Sandkasten. Zum Beispiel:

 
 YUI ({gallery: "gallery-2010.09.22-20 bis 15 '}). Nutzung (" gallery-raphael', function (Y) {
 
	 Y. Raphael (). Verwenden (function (Raphael) {
		
		 / / Verwendung Raphael hier wie würden Sie außerhalb YUI
		 var Papier = Raphael ("myPaper ', 500, 500);
 
	 });
 
 });

Wenn Sie RaphaelJS Plugins sind, geben Sie die Pfade in einem Array und senden diese als ersten Parameter in der Y. Raphael () ()-Funktion verwenden.:

 
 YUI ({gallery: "gallery-2010.09.22-20 bis 15 '}). Nutzung (" gallery-raphael', function (Y) {
 
	 var MyPlugins = ['plugins / raphael.awesomePlugin.js', 'plugins / raphael.wickedPlugin.js'];
 
	 Y. Raphael (). Verwenden (MyPlugins, function (Raphael) {
 
		 / / Verwendung Raphael hier wie würden Sie außerhalb YUI
		 var Papier = Raphael ("myPaper ', 500, 500);
		 / / Das "Papier" werden alle neuen Funktionen von Plugins nun hinzugefügt
	 });
 
 });

Die RaphaelJS Bibliothek das erste Mal geladen, dann ist jede angegebene Plugins werden geladen, bevor Sie Ihre Callback-Funktion mit dem Raphael-Objekt als einzigen Parameter ausgeführt wird.

Kundenspezifische Events

Sobald Sie eine Zeichenfläche mit der Raphael-Objekt erzeugt, dann können Sie sofort runter auf die Zeichnung. Wenn Sie Methoden wie Call rect , circle und path auf der Zeichenfläche, erhalten Sie wieder Objekte, die SVG-Vektoren. Normalerweise haben Sie Zugang zu den entsprechenden DOM-Elemente durch die node Eigentum. Zum Beispiel:

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

Dadurch entsteht ein rechteckiges Objekt Vector bei den Koordinaten [0,0] mit einer Breite und Höhe von 100 Pixel. Sie haben Zugriff auf die zugrunde liegende DOM-Element (das ist ein SVG rect -Element) in etwa so:

 
 var rectNode = square.node;
 rectNode.onclick = function () {
	 alert ('Herzlichen Glückwunsch, klickten Sie ein Quadrat');
 };

Wenn Sie ein begeisterter YUI-Nutzer sind, würden Sie wahrscheinlich etwas mehr als gefallen. Wie wäre es mit einem eingebauten Y.Node als auch? Genau wie die node Eigenschaft bezieht sich auf die HTMLElement hinter dem SVG-Objekt, das $node verweist Eigenschaft, um die Y.Node -Wrapper für dieses Element. So kann man Dinge wie diese:

 
 Quadrat. $ node.on ("mouseover", function () {
	 alert ('Herzlichen Glückwunsch, Sie können eine Maus zu bewegen!');
 });

Lasst uns versuchen, etwas komplexere jetzt. Eine Wechselwirkung mit einem Vektor der Lage sein sollten, um andere Ursache gezogen Vektoren, ihre Stile zu aktualisieren, oder? Wie wäre es schaffen wir einige Bars, die alle machen ihre Farben abhängig, wo ein mit der Maus befindet sich auf einem Kreis auf der Seite zu finden:

 
 var Papier = Raphael ("rcanvas ', 600, 800);
 
 . var circ = paper.circle (350, 200, 100) attr ({fill: 'pink', Hub: 'black'});
 
 / / Schieben ein paar Rechtecke in einem Array
 var i = 0; Rechtecke = [];
 for (; i <10; i + +) {
	 . rectangles.push (paper.rect (0, 40 * i, 200, 20) attr ({fill: 'red', Hub: 'gelb'}));
 }
 
 / / Schleife durch die Rechtecke, Zugabe von bestimmten Kreis mousemove Handler für jeden
 Y.Array.each (Rechtecke, Funktion (rect, index) {
	 var i = index + 1;
	 circ. $ node.on ('mousemove', function (evt) {
		 / / Die Füllfarbe ist dynamisch, abhängig von der Position dieses Rechtecks
		 / / Im Array sowie die Position der Maus
		 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 + top,
			 y = evt.clientY - top;
			 rot = (((128 * x) / (2 * circ.attrs.r)) -1) * i / 6,
			 grün = 256 - ((((128 * x) / (2 * circ.attrs.r)) -1) * i / 6),
			 blau = (((128 * y) / (2 * circ.attrs.r)) -1) * i / 6;
		 rect.attr ('fill', 'rgb (' + rot + ',' + grün + ',' + blau +')');
	 });
 });

Dieses Beispiel läuft hier , aber wie man in den Snapshots unten sehen können, ist die Farbe des Balkens hängt von der Mausposition über den Kreis sowie die Reihenfolge der bar.

Je nachdem, wo Sie den Mauszeiger über den Kreis befindet sich die Bar Farben individuell verändern.

So können Sie sehen, dass $node eine nützliche Abkürzung ist, aber nichts Spektakuläres. Es wäre wirklich fantastisch , wenn jeder SVG Objekt, das Sie mit RaphaelJS erstellen Feuer konnte benutzerdefinierte Ereignisse . Auf diese Weise könnten Sie Ihre individuelle Zeichnung Elemente, um benutzerdefinierte Ereignisse ausgelöst werden, und alles, was auf der Seite konnte zuhören und reagieren. Dies kann in vielerlei Hinsicht nützlich. Für den Anfang bietet es reiche Wechselwirkungen zwischen Ihren Zeichnungen. Benutzer-Interaktionen mit einem Vektor kann nun über jede andere Vektoren der Interaktion auf Anfrage. Das heißt, Sie können programatically Feuer Ereignisse aus Ihren Zeichnungen, wenn bestimmte Bedingungen erfüllt sind. Nicht nur, dass dies zu ermöglichen Ihren Zeichnungen auf andere Vektoren benachrichtigen, aber alles auf der Seite kann mithören

 
 var Papier = Raphael ("rcanvas ', 600, 800);
 
 . var circ = paper.circle (350, 200, 100) attr ({fill: 'pink', Hub: 'black'});
 
 / / Macht Arrays von Rechtecken und Kreisen
 var i = 0, Rechtecke = [], Kreise = [];
 for (; i <10; i + +) {
	 . rectangles.push (paper.rect (0, 40 * i, 40 * i, 20) attr ({fill: 'red', Hub: 'gelb'}));
	 circles.push (. paper.circle (0,0,20) zu verstecken ());
 }
 Y.Array.each (Rechtecke, Funktion (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 + top,
			 y = evt.clientY - top;
			 NewWidth = (((256 * x) / (2 * circ.attrs.r)) -1) * i / 6,
			 rot = (((128 * x) / (2 * circ.attrs.r)) -1) * i / 6,
			 grün = 256 - ((((128 * x) / (2 * circ.attrs.r)) -1) * i / 6),
			 blau = (((128 * y) / (2 * circ.attrs.r)) -1) * i / 6;
		 / / Dieser Zeit nicht nur das Ändern der Farbe, sondern auch das Rechteck Breite
		 rect.attr ({
			 Breite: NewWidth,
			 füllen: "rgb ('+ rot +', '+ grün +', '+ blau +') '
		 });
		 / / Brand benutzerdefinierte Ereignis zu benachrichtigen, dass dieses Rechteck Breite hat sich verändert
		 rect.fire ('width-changed', {width: NewWidth, Quelle: rect, um: index});
	 });
	
	 / / Jedes Rechteck bekommt einen Listener, der auf der Breite verändert Feuer
	 rect.on ('width-changed', function (evt) {
		 var attrs = evt.source.attrs;
		 / / Die entsprechenden Kreis und bewegen Sie ihn mit dem rechten Ende des Rechtecks
		 Kreise [evt.order]. attr ({
			 cx: attrs.x + attrs.width,
			 cy: attrs.y,
			 füllen: "cornflowerblue"
		 .}) Show ();
		
	 });
	
 });

Werfen Sie einen Blick auf diese laufen beispielsweise hier . Sie können auch aus dem Bild unten sehen, dass Kreise werden auf der rechten Enden der Rechtecke gezeichnet. Dies ist eine Reaktion auf jeden einzelnen Rechtecks ​​benutzerdefinierte Ereignis Brennen auftritt, von einer Prozedur, die den Kreis bewegt sich in eine Position relativ zum aktuellen Attribute des Rechtecks ​​gefangen.

Dies eröffnet einige interessante Möglichkeiten für RaphaelJS innerhalb YUI3. Zum Beispiel, was passiert, wenn wir eine Gruppe von Vektor-Formen mit der Gruppe selbst wird das Unternehmen, dass die Ereignisse Brände zur Außenwelt zu schaffen? Intern könnten jedes Vektor-Zeichenprogramm mit seinem Behälter über benutzerdefinierte Ereignisse kommunizieren, und der Behälter würden Entscheidungen darüber, welche Daten sie Feuer an die Außenwelt zu machen. Damit eröffnet sich die Idee der voll gekapselte, interaktive SVG steuert.

Zusammenfassung

Mit dem Aufstieg der HTML5 und seine Satelliten-Technologien, gibt es so viele andere Optionen als Flash für Rich-Interaktionen. Idealerweise sollte jede vectored Elemente auf der Seite voll zugänglich sein und standardisiert. Dies eröffnet wunderbare Möglichkeiten für uns zugänglich, Standard-Web-Steuerelemente, ohne auf Flash zu erstellen. SVG ist eine attraktive Option, da jeder Vektor auf der Seite erstellt wird durch einen DOM-Knoten, die wir mit YUI wie jede andere DOM-Knoten ändern können gesichert werden. Das ist, was erlaubt die RaphaelJS Gallery Module für alle SVG-Objekte, die von RaphaelJS erstellt erweitern, und das ist ein Schlüssel zu reichen Interaktion mit diesen elments von anderswo auf der Seite.

Finden Gespräche: bloglines | technorati

Share and erweitern: Lesezeichen mit del.icio.us | digg it! | reddit!