Einfache Vektorgrafiken mit der Raphaël JavaScript -Bibliothek

raphaël ist eine kleine JavaScript -Bibliothek, die von Dmitry Baranovskiy von Atlassian geschrieben wurde und die Sie erstellen können, die Vektorgrafiken auf Ihren Webseiten erstellen und manipulieren. Es ist erstaunlich einfach zu bedienen und browser kompatibel. Unterstützung des Internet Explorer 6.0, Safari 3.0, Firefox 3.0 und Opera 9.5. Innen Raphaël verwendet VML in IE und SVG in den anderen Browsern.

Jetzt sind Demos mit Kreisen und Quadraten in Ordnung, aber ich wollte ein Beispiel erstellen, das eine legitime, praktische Verwendung von Vektorgrafiken zeigte. Wie wäre es mit Echtzeitstatistikmessung? Hier ist ein Screenshot meines aktuellen Grafik-Nutzungs-Diagramms, in dem die Nutzungsstufen in Echtzeit „Kettenrad“ dargestellt werden. Das Beste von allem, es war ein Schnappschuss.

Die HTML ist einfach; Wir brauchen nur eine Überschrift und einen Behälter, um unsere Leinwand zu halten - ein Divelelement:

<h1>Current Sprocket Usage: <span ></span></h1>
<div ></div>

Zu Beginn müssen wir eine neue Grafik -Leinwand generieren. Ich möchte immer meinen gesamten Code in eine Objektdefinition platzieren, um einen separaten Namespace zu erstellen. Daher beginnen wir mit dem folgenden Code:

var SpGraph = {
  init : function(){
    SpGraph.graph = Raphael("graph", 400, 200);
    SpGraph.graph.rect(0, 0, 390, 110, 10).attr("fill", "#000");
  }
}

window.onload = function () {
  SpGraph.init();
};

Verwenden des Fensters.onload wir nennen wir unsere spGraph.init -Methode. Innerhalb dieser Methode erstellen wir unsere Leinwand mit Raphael ("Graph", 400, 200). Das erste Argument ist die ID unseres Containerelements, die anderen beiden stellen Breite und Höhe dar. Wir speichern das zurückgegebene Canvas -Objekt in unserer Eigenschaft von SpGraph.graph. Mit der nächsten Zeile erstellen wir ein Rechteck und setzen einige Attribute:

SpGraph.graph.rect(0, 0, 390, 110, 10).attr("fill", "#000");

Mit der RECT -Methode können wir ein Rechteck zeichnen, das die X -Koordinate, die Y -Koordinate, die Breite, die Höhe und optional einen Eckradius angibt. Beachten Sie, dass wir auch einen Anruf an die ATT -Methode zum Einstellen der Füllfarbe gekettet haben. Alle Raphaël -Grafikobjekte unterstützen die ATT -Methode und es gibt eine Reihe von Attributen, die Sie festlegen können. Raphaël unterstützt die Erkettung aller seiner Methoden, die wir bald nutzen werden. Unsere bisherigen Bemühungen haben zu diesem schönen schwarzen Rechteck mit abgerundeten Ecken geführt.

Lassen Sie uns jetzt Streifen hinzufügen! Zu diesem Zweck fügen wir der Spraph.init -Methode die folgende Schleife hinzu:

for(var x = 10; x < 110; x += 10) {
  var c = (x > 10) ? "#333" : "#f00";
  SpGraph.graph.path({stroke: c}).moveTo(0, x).lineTo(390,x);
}

Die Schleife führt jedes Mal das 10 -fache aus. Eine rote Linie für die erste und eine graue Linie für die anderen. Die Raphaël -Pfadmethode initialisiert den Pfadmodus des Zeichnens und gibt ein Pfadobjekt zurück. Es zeichnet nichts selbst. Sie müssen die Pfadobjektmethoden verwenden, die kettenfähig sind. Die Moveto -Methode verschiebt den Zeichnungscursor in die angegebenen X- und Y -Koordinaten, und die Lineto -Methode zeichnet eine Linie vom Cursorpunkt zum angegebenen Punkt. Das Ergebnis ist der stripey -Hintergrund unten:

Jetzt müssen wir die eigentliche Graphinie zeichnen. Die vertikale Achse (dargestellt durch die Streifen) ist das prozentuale Nutzungsniveau. Die horizontale Achse repräsentiert die Zeit in 10 Pixel -Schritten. In der realen Welt würde jede Aktualisierung des Diagramms über einen Ajax -Anruf erhalten, sagen wir alle 5 Sekunden, aber hier erstelle ich nur zufällige Werte und aktualisiere die Grafik jede Sekunde. Noch einmal verwenden wir die Pfadmethode, um eine 5 Pixel breite Linie zu zeichnen.

Wir haben den Pfad initial und speichern die Referenz darauf in der SPGRAPH.Path -Eigenschaft wie SO:

<h1>Current Sprocket Usage: <span ></span></h1>
<div ></div>

Bei jedem Update erweitern wir die Zeile mit der Lineto -Methode wie SO:

var SpGraph = {
  init : function(){
    SpGraph.graph = Raphael("graph", 400, 200);
    SpGraph.graph.rect(0, 0, 390, 110, 10).attr("fill", "#000");
  }
}

window.onload = function () {
  SpGraph.init();
};

SpGraph.graph.rect(0, 0, 390, 110, 10).attr("fill", "#000");

for(var x = 10; x < 110; x += 10) {
  var c = (x > 10) ? "#333" : "#f00";
  SpGraph.graph.path({stroke: c}).moveTo(0, x).lineTo(390,x);
}

Vergessen Sie nicht, dass es in der Demo funktioniert. OK, vielleicht ist ein Kettenradnutzungsdiagramm nicht genau das legitime, praktische Beispiel, das ich versprochen habe, aber zumindest haben Sie einen Blick auf das, was Sie mit Raphaël mit nur wenigen Anstrengungen erreichen können. Die Dokumentation auf der Website ist nicht vollständig, aber es ist sowieso nicht zu schwierig zu trainieren. Warum hast du es nicht aus? Schnelle, einfache, browser kompatible Vektorgrafik im Web war noch nie einfacher.

häufig gestellte Fragen zu einfachen Vektorgrafiken mit der Raphael JavaScript -Bibliothek

Was ist die Raphael JavaScript -Bibliothek? Es vereinfacht den Prozess des Erstellens, Manipulierens und Animierens von Vektorgrafiken und macht es zu einer hervorragenden Wahl für Entwickler, die ihren Websites oder Webanwendungen visuell ansprechende Elemente hinzufügen möchten. Die Bibliothek ist Kreuzbrowser kompatibel und verwendet die SVG W3C-Empfehlung und die VML als Basis zum Erstellen von Grafiken, was bedeutet, dass sie in praktisch jedem Browser funktionieren kann. Sie können dies tun, indem Sie die Bibliothek von der offiziellen Website herunterladen und in Ihrer HTML -Datei verknüpfen. Sobald die Bibliothek enthalten ist, können Sie mit dem Aufrufen der Raphael -Funktion und der Höhe des Papierobjekts, in dem Ihre Grafiken gezogen werden, mit dem Erstellen von Vektorgrafiken beginnen. Die Bibliothek bietet verschiedene Animationsmethoden, einschließlich der Animed -Methode, mit der Sie die Transformation eines Objekts über eine bestimmte Dauer animieren können. Sie können auch die Erleichterung der Animation steuern und eine Rückruffunktion angeben, die ausgeführt werden soll, wenn die Animation abgeschlossen ist.

Wie erstelle ich Formen mit der Raphael JavaScript -Bibliothek? Sie können beispielsweise mit der Rect -Methode ein Rechteck, die Kreismethode zum Erstellen eines Kreises und die Ellipse -Methode zum Erstellen einer Ellipse verwenden. Jede Methode erfordert spezifische Parameter, wie die Koordinaten der oberen linken Ecke und die Breite und Höhe für die RECT-Methode oder die Zentralkoordinaten und den Radius für die Kreismethode. Mit dieser Methode können Sie verschiedene Attribute einer Form festlegen, z. B. ihre Füllfarbe, Hubfarbe, Schlagbreite und Deckkraft. Sie können auch die ATT -Methode verwenden, um Transformationen auf eine Form wie Skalierung, Rotation und Übersetzung anzuwenden. Sie können beispielsweise die Klickmethode verwenden, um einen Klick -Ereignis -Handler an eine Form oder die HOVER -Methode zum Anhängen von Mausover- und Mausout -Ereignishandlern anzuhängen. Mit diesen Methoden können Sie interaktive Grafiken erstellen, die auf Benutzeraktionen reagieren. Diese Methode erstellt eine Reihe von Formen, die als einzelne Einheit manipuliert werden können. Sie können einem Satz mit der Push -Methode Formen hinzufügen und Transformationen oder Animationen auf alle Formen gleichzeitig anwenden. Zusätzlich zu grundlegenden Formen bietet die Bibliothek Methoden zum Erstellen von Pfaden, mit denen komplexe Formen und Designs erstellt werden können. Sie können auch mehrere Formen und Pfade kombinieren, um komplizierte Grafiken zu erstellen. Sie können auf den SVG- oder VML -Quellcode einer Grafik zugreifen, indem Sie die TOString -Methode auf dem Papierobjekt aufrufen. Diese Methode gibt eine Reihe von SVG- oder VML -Code zurück, der den aktuellen Status des Papiers darstellt. Sie können auch verschiedene Online-Tutorials und Blog-Beiträge ansehen, die Schritt-für-Schritt-Anleitungen zur Verwendung der Bibliothek bereitstellen. Darüber hinaus finden Sie zahlreiche Beispiele und Demos auf Code -Sharing -Plattformen wie GitHub und CodePen.

Das obige ist der detaillierte Inhalt vonEinfache Vektorgrafiken mit der Raphaël JavaScript -Bibliothek. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!