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!