Um die in diesem Artikel aufgeführten Beispiele ausführen zu können, benötigen Sie JDK 1.2 oder höher ( http://java.sun.com ). Sie benötigen außerdem einen Webserver, der JSP unterstützt. Ich habe dieses Beispiel auf Tomcat getestet, wo ich die Klasse com.sun.image.codec.jpeg (veröffentlicht im Sun Java 2 SDK) zum Codieren der Grafikdaten verwendet habe.
Da Sie wiederverwendbare Hintergründe haben möchten, sollten Sie eine Java-Klasse erstellen, um das Layout, einschließlich des Titelbereichs und der Außenränder, zu verwalten. Wie in Abbildung A dargestellt.
Abbildung A
Wie Sie sehen können, habe ich sowohl den Titelbereich als auch den äußeren Rand schattiert. Der Titel hat einen weißen, ein Pixel breiten Rand und der Grafikbereich hat einen dünnen schwarzen Rand. Diese Ränder verleihen den Schatten mehr Definition.
Grenzen lassen sich leicht erstellen. Verwenden Sie die Fill()- Methode des Graphics2D-Objekts, um ein blaues Titelrechteck zu füllen, und verwenden Sie dann die draw()- Methode, um den Rand mit einer anderen Farbe zu zeichnen.
Auch das Erstellen eines Schatteneffekts ist sehr einfach. Verwenden Sie zunächst die Methode fill(), um einen Schatten zu zeichnen. Zeichnen Sie dann den Titel mit einem Versatz von sieben Pixeln. Durch diesen Versatz entsteht ein dreidimensionaler Effekt, der den Schatteneffekt zur Folge hat.
Angenommen, es gibt ein Unternehmen, das landwirtschaftliche Produkte verkauft, und es benötigt ein Histogramm, um die Verkäufe anzuzeigen. In einer praktischen Anwendung müssten wir diese Daten aus einer Datenbank oder einer XML-Datei beziehen. Der Einfachheit halber gehen wir jedoch davon aus, dass die Verkaufsdaten in den folgenden zwei Arrays gespeichert sind:
String datanames[] = {"apple", "orange", "peach", "lemon", "grapefruit"};
int datavalues[] = {11, 62, 33, 102, 50};
Die erste Reihe enthält Artikel für verschiedene landwirtschaftliche Produkte, die das Unternehmen verkauft. Das zweite Array ist das Verkaufsvolumen, das jedem landwirtschaftlichen Produkt entspricht.
Das Histogramm wird im JPEG-Format angezeigt und gespeichert. Daher müssen wir MIME, den Inhaltstyp, korrekt festlegen. Browser verwenden MIME-Typen, um zu entscheiden, wie sie reagieren. Der folgende Code legt den MIME-Typ fest:
Response.setContentType("image/jpeg");
Als nächstes benötigen wir ein Objekt, das das Bild darstellt. Die Java 2D-API unterstützt die Klasse BufferedImage , die eine Möglichkeit zum Speichern und Verwalten von Pixeldaten im Speicher bietet. Da wir möchten, dass die Grafiken farbig sind, verwenden wir den Grafiktyp TYPE_INT_RGB . Die beiden ganzzahligen Daten WIDTH und HEIGHT werden verwendet, um die Breite und Höhe des Bildes in Pixeln anzugeben:
BufferedImage bi = new BufferedImage(WIDTH, HEIGHT, BufferedImage.TYPE_INT_RGB);
Da wir nun ein BufferedImage-Objekt haben, können wir den Inhalt von Graphics2D festlegen, indem wir die Methode createGraphics() des Objekts aufrufen:
Graphics2D biContext = bi.createGraphics();
Der Programmierer, der das Diagramm erstellt hat, muss den WIDTH- Parameter basierend auf der Wichtigkeit des Diagramms und dem Gesamtlayout der Seite festlegen. Grafikelemente passen ihre Größe automatisch an Änderungen in der Grafikbreite an.
Die Breite und der Begrenzungsbereich des Titels sowie das längste gerade Quadrat der Grafik müssen anhand des Parameters WIDTH berechnet werden. Dadurch soll sichergestellt werden, dass alle grafischen Elemente nicht die Breite der Grafik überschreiten und den rechten Rand der Grafik überschreiten.
Die Anzahl der Datenelemente, die angezeigt werden müssen, bestimmt den HEIGHT- Parameter des Diagramms. Wenn neue Elemente zu den Arrays datavalues[] und datanames[] hinzugefügt werden, sollte die Höhe der Grafik entsprechend wachsen, um der erforderlichen Größe des Anzeigebereichs gerecht zu werden.
Der maximale Parameter wird für das längste gerade Quadrat verwendet. Dann werden die Breiten anderer rechteckiger Blöcke relativ zum Maximum berechnet:
int barWidth = (innerWIDTH * currentValue) / Maximum;
Der obige Algorithmus verwendet die beiden Werte Maximum und innerWIDTH (Grafikbereich) der Grafik, um sicherzustellen, dass sich das Rechteck automatisch erweitert und verkleinert, wenn sich der WIDTH- Wert ändert.
Um die Grafik anzuzeigen, müssen wir ein Hintergrundbild erstellen und dann die Grafikdaten hinzufügen. Erstellen Sie zunächst ein graphBG- Objekt und rufen Sie dessen Methode draw() auf:
graphBG gr = neues graphBG();
gr.draw(biContext, WIDTH, HEIGHT, „Farm Produce“, „Overall Average:“ + Average);
Zu den Parametern der Methode draw() gehören Grafikinhalt, biContext , WIDTH und HEIGHT , mit denen die Klasse graphBG die Breite und Höhe des Titels und des Grafikbereichs bestimmt. Abschließend wird der durchschnittliche Datenwert berechnet und dem im Titel angezeigten Text hinzugefügt.
Die vertikale Koordinatenposition (y-Achse) jedes rechteckigen Blocks wird gemäß der folgenden Formel berechnet: y_pos = i * displayHeight + headerOffset . Die displayHeight entspricht der Höhe des Texts auf dem geraden Quadrat plus der Höhe des geraden Quadrats, und headerOffset stellt den vertikalen Abstand vom oberen Rand der Grafik dar, einschließlich der Höhe des Titelbereichs und des Schattens.
Ich habe diese Rechtecke und ihre Ränder mit derselben Technik erstellt, mit der ich zuvor die Titelränder erstellt habe. Ich habe ein Pixel von der Breite und Höhe der Rechteckränder abgezogen, sodass jedes Rechteck einen roten Rand zu haben scheint, und habe den Subtraktionseffekt vereinfacht, indem ich die inneren Ränder auf einen weißen Hintergrund gezeichnet habe.
Wir haben das Bild im Speicher erstellt, jetzt kodieren wir es und zeigen es dem Benutzer an. Wir können den Standard-JSP-Ausgabestream nicht zum Verarbeiten von JPEG verwenden, daher müssen wir Response.getOutputStream() verwenden, um den Stream vom Antwortobjekt abzurufen. Wir können den Ausgabestream verwenden, um ein JPEGImageEncoder -Objekt zu erstellen und dessen encode() aufzurufen, wobei wir das zuvor erstellte BufferedImage -Objekt übergeben:
JPEGImageEncoder-Encoder = JPEGCodec.createJPEGEncoder(output);
Encoder.encode(bi);
Das resultierende Bild ist relativ klein und belegt nur 13,7 Kilobyte Kapazität. Abbildung B zeigt den endgültigen Effekt:
Abbildung B
In beiden Fällen ist die Ausgabe von index.jsp ein JPEG-Bild. Sie können es auf Ihrem Desktop speichern oder die PrintScreen-Taste drücken, um einen Screenshot zu erstellen. Wenn Sie mehrere Grafiken auf derselben Seite anzeigen oder Grafiken in andere Inhalte einfügen müssen, können Sie das HTML- img- Tag (< img src = ”index.jsp"> ) verwenden und die Grafiken dann bei Bedarf platzieren, z. B. Verwenden Sie a bilden.
Eine der vielleicht ältesten Internettechnologien für dynamisch generierte Grafiken kann andere Aufgaben als die Anzeige eines Bildes erfüllen. Stellen Sie sich vor, Sie müssen die Anzahl der Betrachter dieses Bildes aufzeichnen (ähnlich wie die Anzahl der Klicks auf eine Anzeige aufzeichnen) und dann Aufgaben wie Klickzählung, Datenbank- oder Dateizugriff in index.jsp implementieren und verarbeiten Diese Aufgaben laufen im Hintergrund ab. Eine gepufferte Seitenumschaltung für den Benutzer ist nicht erforderlich.
In diesem Artikel haben wir eine Methode untersucht, die saubere, ansprechend aussehende Histogramme erzeugt. Wir haben die Größenänderung der Grafiken und deren Kodierung in das JPEG-Format gekonnt gehandhabt und darüber gesprochen, den HTML-Code zu modifizieren, um die resultierenden Bilder an verschiedenen Stellen auf der Seite zu platzieren.